למה תמונות בוורדפרס נראות מטושטשות אחרי ההעלאה (וזה הפתרון)

בתשע מתוך עשר פעמים התמונות שלך בכלל לא מטושטשות — וורדפרס הקטין אותן בזמן ההעלאה ומגיש עכשיו את העותק המוקטן. מאז וורדפרס 5.3, כל תמונה שרוחבה או גובהה עולה על 2560px מוחלפת בשקט בגרסת -scaled שמוגבלת ל-2560px בצלע הארוכה שלה, והקובץ הקטן יותר הזה הוא מה שהתבנית שלך מותחת כדי למלא באנר ראשי, בלוק ברוחב מלא או תצוגת רטינה. הפתרון הוא להוכיח שזה מה שקרה, ואז או להעלות את הסף או להפסיק להעלות תמונות שצריכות להיות גדולות מהתיבה שהן יושבות בה.

למה זה קורה

כשאתה מעלה תמונה, וורדפרס מריץ את wp_create_image_subsizes() (בקובץ wp-admin/includes/image.php). אם הצלע הארוכה עוברת את big_image_size_threshold — 2560px כברירת מחדל — הוא קורא ל-_wp_image_meta_replace_original(), מייצר את your-photo-scaled.jpg, ומשכתב את מטא-דאטה של הקובץ המצורף כך שגודל ה-full מצביע עכשיו על העותק המוקטן. המקור האמיתי שלך נשמר על הדיסק בתור your-photo.jpg ומקבל הפניה דרך wp_get_original_image_path(), אבל שום דבר בצד הקדמי לא מגיש אותו. כל גודל ביניים וכל מועמד srcset נוצרים מהקובץ המוקטן של 2560px, ולא ממה שהעלית.

וכאן נוצר הטשטוש. אתה מעלה תמונה חדה של 4000px לכותרת ברוחב מלא. וורדפרס מגביל אותה ל-2560px. בתצוגה רגילה בתוך קונטיינר ברוחב 1600px, זה בסדר. במסך רטינה של פי 2 הדפדפן צריך בערך 3200 פיקסלים אמיתיים כדי למלא את הקונטיינר בחדות, יש לו רק 2560, והוא מותח את ההפרש. קצוות רכים, טקסט-בתוך-תמונה מרוח, בדיוק הסימפטום של “מטושטש אחרי ההעלאה”.

החצי השני של אותה בעיה הוא ש-srcset בוחר גודל קטן מדי. אם התבנית שלך מדווחת על רוחב תוכן שלא תואם את התיבה שבאמת מוצגת, וורדפרס מגיש לדפדפן קובץ ביניים -1024x683 או -1536x1024 והוא נמתח כלפי מעלה. אותה סיבה — תיבת תצוגה גדולה מהפיקסלים הזמינים — טריגר אחר.

בדוק מה וורדפרס באמת הגיש

אל תנחש. לחץ קליק ימני על התמונה המטושטשת, פתח אותה בכרטיסייה חדשה, והסתכל על שם הקובץ בכתובת. אם הוא מסתיים ב--scaled.jpg או בסיומת מידות כמו -1024x683.jpg, אישרת את זה: הדפדפן מציג נגזרת מוקטנת, לא את מה שהעלית. אתה גם יכול לבדוק את האלמנט ולקרוא את currentSrc כדי לראות בדיוק איזה מועמד הדפדפן בחר.

כדי לראות את התמונה המלאה לפני שאתה מעלה משהו מחדש, גרור את התמונה אל כלי גדלי התמונות של וורדפרס — הוא מציג כל נגזרת שוורדפרס ייצר מהקובץ המדויק הזה, כולל האם נוצר עותק -scaled ובאילו מידות, כך שתדע מראש אם המקור שלך מספיק גדול למקום שאתה מציב אותו בו.

בשרת אתה יכול לרשום כל קובץ מוגבל:

find wp-content/uploads -name '*-scaled.*'

איך לתקן את זה, לפי הסדר

1. אם התמונות שלך באמת צריכות להיות גדולות מ-2560px (באנרים ראשיים גדולים, רטינה, גלריות באיכות הדפסה), העלה את הסף:

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

או בטל את ההגבלה לגמרי:

add_filter( 'big_image_size_threshold', '__return_false' );

2. העלה מחדש את התמונות המושפעות. זה השלב שאנשים מדלגים עליו. שינוי הסף משפיע רק על העלאות חדשות. תמונות שכבר נמצאות בספרייה שלך שומרות על המטא-דאטה הישן שלהן, ורענון התמונות הממוזערות בונה מחדש את גדלי הביניים מהקובץ המוקטן -scaled — הוא לא מוסיף בחזרה רזולוציה שנזרקה. הדרך האמינה היא: לשנות את הפילטר, למחוק את הקובץ המצורף, ולהעלות שוב.

3. אם המקור שלך כבר ≤2560px ועדיין מטושטש, הסף הוא לא הבעיה שלך — תיבת התצוגה גדולה מהתמונה. העלה מקור גדול יותר, או הקטן את הקונטיינר. לחדות רטינה, המקור שלך צריך להיות בערך פי שניים מרוחב הפיקסלים של ה-CSS של התיבה שהוא ממלא.

4. רק אחרי כל הנ”ל, רענן את התמונות הממוזערות כדי שגדלי הביניים יהיו עקביים — אבל הבן שזה ניקיון, לא ריפוי.

מה לא לעשות

אל תעלה את איכות ה-JPEG ל-100. וורדפרס דוחס לאיכות ברירת מחדל של 82 דרך wp_editor_set_quality, וחצי מהעצות באינטרנט אומרות לך לעקוף את זה:

add_filter( 'wp_editor_set_quality', function () { return 90; } );

זה בסדר להפחתת עיוותי דחיסה, אבל תמונה מתוחה ומוגדלת היא בעיית רזולוציה, לא בעיית דחיסה. מעבר מ-82 ל-100 מנפח את הקבצים שלך וכמעט לא עושה כלום נגד הרכות שאתה רואה.

אל תבטל את -scaled כתגובה אוטומטית. כיבוי ההגבלה (יש כלי בשביל זה) הוא הצעד הנכון אם אתה מגיש תמונות מעל 2560px — אבל אם הבעיה האמיתית שלך היא קובץ ביניים קטן מדי שנמתח, ביטולו לא משנה כלום ואתה מאבד את החיסכון ברוחב הפס בלי סיבה. אבחן קודם.

אל תאשים את המטמון או תרענן את התמונות הממוזערות קודם. הרענון קורא מאותו מקור מוגבל, אז הוא לא יכול לשחזר פרטים. ניקוי CDN או מטמון עמודים לא ייגע בקובץ שהיה קטן על הדיסק מלכתחילה.

אל תפנה ל-CSS של התבנית או ל-object-fit. שום כמות של עיצוב לא מוסיפה פיקסלים. אם הקובץ שהוגש מסתיים ב--scaled או בסיומת מידות, הקובץ הוא הבעיה, לא הפריסה.

עדיין תקוע?

אם אישרת שהקובץ שהוגש הוא ההעלאה שלך ברזולוציה מלאה — בלי -scaled, בלי סיומת מידות — והוא עדיין רך, בדוק אם תוסף (כלי אופטימיזציה, כלי לשינוי גודל תמונות ב-CDN, או ספריית טעינה עצלה) משכתב את ה-src שלך לפרוקסי דחוס. הרץ את התמונה דרך כלי גדלי התמונות כדי לאשר מה וורדפרס אמור לייצר, ואז השווה את זה מול מה שהדפדפן באמת טוען. כשהשניים לא מסכימים, משהו בין וורדפרס לדפדפן הוא האשם.