איך לעצור את וורדפרס מלדחוס את התמונות שלכם ב-82%

וורדפרס מקודד מחדש כל JPEG שהוא מייצר באיכות 82 בסולם של 0–100. ברירת המחדל הזו יושבת ב-WP_Image_Editor::get_default_quality() וחלה על כל גרסה נגזרת שוורדפרס חותך מהתמונה שהעליתם — thumbnail, medium, medium_large, large, וכל גודל נוסף שהתבנית שלכם רושמת. עבור צילומים, 82 הוא פשרה הגיונית בין משקל הקובץ לבין ארטיפקטים. עבור צילומי מסך, לכידות ממשק, גרפים, לוגואים וכל דבר עם טקסט חד או צבע שטוח, 82 הרסני באופן גלוי לעין: מקבלים רעש mosquito שזוחל סביב כל אות ופסים (banding) לרוחב מעברי צבע חלקים.

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

מאיפה באמת מגיע המספר 82

וורדפרס הוריד את ברירת המחדל של ה-JPEG מ-90 ל-82 עוד בגרסה 4.5 (2016) כאופטימיזציה למשקל הדף. הערך מוחזר על ידי get_default_quality() בקובץ wp-includes/class-wp-image-editor.php, ונקרא בכל פעם שהעורך הפעיל — WP_Image_Editor_Imagick אם לאחסון שלכם יש Imagick, אחרת WP_Image_Editor_GD — כותב קובץ בגודל משונה.

הפרט החשוב: 82 מיושם עבור כל גודל נגזר, לא פעם אחת. מעלים תמונה אחת, ווורדפרס מריץ אותה דרך המקודד מספר פעמים, ומבצע קוונטיזציה מחדש באיכות 82 בכל מעבר. הקובץ המקורי שהעליתם עצמו נשאר ללא שינוי אם הוא מתחת לסף התמונה הגדולה (2560 פיקסלים על הצלע הארוכה). אם הוא חורג מהסף הזה, וורדפרס מייצר קובץ -scaled.jpg מקודד מחדש באיכות 82 ומגיש אותו בתור הגודל “full”. כך ש”תמונת הרזולוציה המלאה שלי נראית תקינה אבל הגרסה שבדף נראית מרוחה” היא כמעט תמיד srcset שבוחר תת-גודל באיכות 82 או את קובץ ה--scaled.

איך משנים את האיכות

יש פילטר אחד להתחבר אליו. wp_editor_set_quality הוא המודרני והקנוני — הוא נורה עבור JPEG ו-WebP ומקבל את סוג ה-MIME כך שתוכלו להסתעף:

add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
    if ( 'image/jpeg' === $mime_type ) {
        return 92; // up from 82
    }
    return $quality;
}, 10, 2 );

שימו את זה ב-mu-plugin קטן (wp-content/mu-plugins/) או בתוסף ייעודי לאתר. functions.php עובד גם כן, אבל אתם מאבדים את ההגדרה ברגע שאתם מחליפים תבנית.

תיתקלו גם בהמלצה על הפילטר הישן יותר jpeg_quality. הוא עדיין נורה (וורדפרס מיישם אותו מיד אחרי wp_editor_set_quality, ל-JPEG בלבד), אבל אין שום סיבה להתחבר לשניהם — wp_editor_set_quality מכסה את כל מה שהישן עשה ועוד.

דבר אחד שכולם שוכחים: הפילטר הזה משפיע רק על תמונות שמקודדות אחרי שהוא פעיל. כל תמונה ממוזערת שכבר יושבת ב-wp-content/uploads נכתבה ב-82 ותישאר ב-82. חוללו אותן מחדש:

wp media regenerate --yes

אם אתם לא על WP-CLI, התוסף Regenerate Thumbnails עושה את אותו הדבר דרך ממשק הניהול.

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

התיקון הטוב יותר לצילומי מסך וגרפיקה שטוחה

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

העלו PNG במקום. וורדפרס שומר את תתי-הגדלים של PNG בתור PNG, ו-PNG הוא ללא אובדן — פילטר האיכות לא נוגע בו, כך שאין ארטיפקטים בשום גודל, רק דגימה מחדש נקייה. עבור צילום מסך, PNG מיטבי הוא לרוב קטן יותר מ-JPEG באיכות גבוהה של אותה תמונה בכל מקרה, כי צבע שטוח נדחס היטב ב-PNG וגרוע מאוד ב-JPEG.

אם אתם רוצים את הקבצים הקטנים יותר של פורמט מאבד מידע בלי נזק הקצוות של JPEG, WebP הוא דרך הביניים — אבל אתם עדיין שולטים באיכות שלו דרך אותו פילטר wp_editor_set_quality שהוצג למעלה, בהסתעפות על image/webp.

מה לא לעשות

אל תגדירו את האיכות ל-100 באופן גלובלי. זו התשובה עם הכי הרבה הצבעות בחצי מהשרשורים בפורומים, והיא שגויה. JPEG באיכות 100 אינו ללא אובדן — הוא עדיין מבצע קוונטיזציה — אבל הוא מנפח כל תצלום באתר שלכם בשיעור גדול ללא שיפור נראה לעין, גורר למטה את ה-LCP ואת Core Web Vitals. העלו את המספר עבור הפורמט שזקוק לזה, או שנו פורמט עבור גרפיקה; אל תפוצצו את הדחיסה בכל האתר.

אל תערכו את class-wp-image-editor.php. שינוי ערך ההחזרה של get_default_quality() בליבה עובד עד ש-wp core update הבא דורס אותו בשקט. השתמשו בפילטר.

אל תבטלו גדלי תמונות כדי “להימנע מהדחיסה”. כיבוי יצירת תמונות ממוזערות לא עוצר קידוד מחדש — הוא שובר srcset רספונסיבי, כך שדפדפנים מורידים את התמונה בגודל מלא בטלפונים. בעיה אחרת, תוצאה גרועה יותר.

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

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

עדיין תקועים?

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