אופטימיזציית תמונות ב-WordPress — WebP, גדלים וטעינה עצלה

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

1. פורמט: WebP ו-AVIF

JPEG ו-PNG הם פורמטים ותיקים. WebP נותן בערך את אותה איכות במשקל קטן ב-25 עד 35 אחוז, ו-AVIF יורד עוד. שניהם נתמכים בכל הדפדפנים הרלוונטיים היום.

הדרך הבטוחה היא להגיש את שניהם ולתת לדפדפן לבחור:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="...">
</picture>

2. גודל: להגיש מה שבאמת מוצג

התקלה הנפוצה ביותר היא תמונה ברוחב 4000 פיקסלים שמוצגת בתיבה של 400. WordPress מייצר אוטומטית כמה גדלים בהעלאה ומגיש אותם דרך srcset — אבל רק אם התבנית משתמשת בפונקציות הסטנדרטיות. בוני עמודים רבים עוקפים את זה ומכניסים כתובת ישירה לקובץ המקורי.

• העלו מקור סביר: רוחב 2000 פיקסלים מספיק כמעט לכל שימוש באתר.
• ודאו שהתמונות באתר מוגשות עם srcset, ולא ככתובת יחידה.
• לתמונות רקע ב-CSS אין srcset — הגדירו גרסאות לפי מדיה, או השתמשו בתגית img.

3. טעינה עצלה — ולמי לא לעשות אותה

loading="lazy" דוחה את הורדת התמונה עד שהיא מתקרבת לאזור הנראה. זה מצוין לכל מה שנמצא למטה בעמוד.

<img src="hero.webp" fetchpriority="high" width="1200" height="630" alt="...">

4. ניקוי של מה שכבר קיים

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

1. המרה קבוצתית של המדיה הקיימת ל-WebP, עם שמירה על המקור.
2. מחיקת גדלים שנוצרו על ידי תבניות ותוספים ישנים שכבר לא מותקנים — לעיתים חצי מנפח הדיסק.

5. טקסט חלופי — לא רק נגישות

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

כמה זה שווה בפועל