דחיסת תמונות היא הדרך הפשוטה ביותר להאיץ אתר: תמונות הן בדרך כלל החלק הכבד בעמוד, ורוב המשקל שלהן מיותר. אופטימיזציה נכונה לתמונות כוללת ארבעה דברים — לבחור פורמט מודרני (WebP או AVIF), להקטין את התמונה למידה שבה היא מוצגת בפועל, לתת לדפדפן כמה גדלים לבחור מהם (srcset), ולטעון בעצלות רק תמונות שמתחת לקפל המסך. ויש כלל אחד שחשוב לא לשבור: את התמונה הראשית של העמוד — זו שקובעת את מדד ה-LCP — לא טוענים בעצלות.
שלב 1: לבחור פורמט
| פורמט | מתי משתמשים |
|---|---|
| WebP | ברירת המחדל לתמונות באתר — מצלמות, איורים, שקיפות |
| AVIF | דחיסה חזקה עוד יותר, בעיקר לתמונות צילום גדולות |
| JPEG | גיבוי לתמונות צילום, כשצריך תאימות מלאה |
| PNG | גיבוי לגרפיקה עם שקיפות או קווים חדים |
| SVG | לוגואים ואייקונים — וקטור, חד בכל גודל |
לפי web.dev של גוגל, WebP ו-AVIF דוחסים טוב יותר מ-JPEG ו-PNG ונתמכים בכל הדפדפנים המודרניים. אם רוצים לשמור על גיבוי, תגית <picture> מאפשרת לתת לדפדפן כמה פורמטים לבחור מהם:
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="..." width="1200" height="675"> </picture>
שלב 2: להקטין למידה האמיתית
הטעות הנפוצה ביותר: תמונה של 4,000 פיקסלים מהמצלמה, שמוצגת בקופסה של 600 פיקסלים. הדפדפן מוריד את כל ה-4,000 ומקטין בעצמו — והגולש משלם על זה בזמן טעינה. לפני העלאה, מקטינים לרוחב המרבי שבו התמונה מוצגת (ופי שניים למסכים חדים, אם צריך).
שלב 3: srcset — גודל מתאים לכל מסך
טלפון לא צריך את אותה תמונה כמו מסך מחשב רחב. עם srcset ו-sizes נותנים לדפדפן רשימת גדלים, והוא בוחר את המתאים לפי רוחב המסך והצפיפות שלו (MDN):
<img src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="..." width="800" height="533">
בוורדפרס, החלק הזה קורה לבד: המערכת יוצרת כמה גדלים לכל תמונה שמעלים ומוסיפה srcset לתמונות בתוכן. מה שנשאר לכם הוא להעלות מקור בגודל סביר ולוודא שהתבנית לא עוקפת את המנגנון.
שלב 4: טעינה עצלה — ומתי לא
loading="lazy" אומר לדפדפן לא להוריד תמונה עד שהגולש מתקרב אליה. זה חוסך הרבה בעמודים ארוכים. אבל לפי web.dev, אסור לטעון בעצלות תמונות שנראות מיד בטעינת העמוד — ובמיוחד את תמונת ה-LCP, הרכיב הגדול שנראה ראשון. טעינה עצלה שלה מעכבת אותה ופוגעת במדד.
| תמונה | טעינה |
|---|---|
| התמונה הראשית בראש העמוד | fetchpriority="high" |
| לוגו ותמונות בחלק הנראה הראשון | רגילה (בלי lazy) |
| תמונות בהמשך העמוד | loading="lazy" |
על LCP ושאר המדדים כתבתי במאמר Core Web Vitals למפתחים.
שלב 5: רוחב וגובה — נגד קפיצות
כשלתמונה אין width ו-height, הדפדפן לא יודע כמה מקום לשמור לה, והתוכן קופץ כשהיא נטענת. זה פוגע במדד ה-CLS ומרגיז גולשים שמנסים ללחוץ על משהו. הוספת המידות (או aspect-ratio ב-CSS) פותרת את זה, גם כשהתמונה רספונסיבית.
כלים לדחיסה
- Squoosh — כלי חינמי של גוגל בדפדפן, להשוואה ידנית בין פורמטים ורמות איכות.
- תוסף אופטימיזציה בוורדפרס — ממיר ודוחס אוטומטית בזמן העלאה. כדאי לבחור אחד ולא להתקין כמה במקביל.
- המרה בשרת — באתרים גדולים, המרה מרוכזת בצד השרת חוסכת עבודה ידנית.
איכות דחיסה היא לא מספר קבוע: תמונת מוצר צריכה להיות חדה יותר מרקע דקורטיבי. כדאי להשוות בעיניים לפני שקובעים ברירת מחדל.
איך בודקים
PageSpeed Insights ו-Lighthouse מסמנים תמונות כבדות מדי, תמונות בפורמט ישן, תמונות בלי מידות, ואת תמונת ה-LCP. פירוט במאמר בדיקת מהירות אתר.
שאלות נפוצות
WebP או AVIF?
שניהם טובים. WebP הוא בחירה בטוחה ופשוטה לרוב האתרים; AVIF יכול לחסוך עוד בתמונות צילום גדולות, אבל ההמרה אליו איטית יותר. אפשר להגיש את שניהם דרך <picture>.
דחיסה פוגעת באיכות?
דחיסה עם אובדן (lossy) כן משנה את הקובץ, אבל ברמות איכות סבירות ההבדל לא נראה לעין בגודל התצוגה. דחיסה ללא אובדן (lossless) לא משנה פיקסלים, וחוסכת פחות.
מה עם תמונות רקע ב-CSS?
הן לא מקבלות srcset ולא loading="lazy" באותה דרך. אם תמונת רקע היא הרכיב הראשי בעמוד, לרוב עדיף להפוך אותה לתגית <img> רגילה.
מאמרים קשורים: אתר תיק עבודות: איך מציגים עבודות שמביאות לקוחות.
תמונות הן רק חלק אחד ממהירות האתר. ראו שיפור ביצועים ומהירות, או ספרו לי על האתר שלכם.
אהבתם את המאמר?
