פורסם: 8 באוקטובר 2025
צמצום זמן ההורדה של תמונות יכול לשפר את זמן הטעינה של הדף ואת ה-LCP.
איך התובנה נכשלת
בתובנה יופיעו תמונות עם גדלים גדולים מדי להורדה. החיסכון המשוער בבייט מחושב על ידי השוואה בין גודל ההורדה של התמונה לבין יחס יעיל של בייט/פיקסל לפורמט התמונה.
איך לשפר את זמן ההורדה של תמונות
יש כמה אסטרטגיות מומלצות בתובנה הזו לשיפור זמן ההורדה של התמונה, בהתאם לגודל המוצג ולפורמט הקובץ של התמונה. פריסת CDN של תמונות יכולה לעזור מאוד בכל האסטרטגיות האלה.
הגדלת גורם הדחיסה של התמונה
רוב פורמטי התמונות תומכים ברמת דחיסה שאפשר לשנות כדי להקטין את הגודל של קובץ התמונה, אבל זה עלול לפגוע באיכות התמונה. כדי לשפר את הדחיסה של התמונות, אפשר להשתמש בכלים כמו ImageOptim, Squoosh ו-Imagemin.
שימוש בפורמטים מודרניים של תמונות
AVIF ו-WebP הם פורמטים של תמונות שמאפשרים דחיסה איכותית יותר בהשוואה לפורמטים ישנים יותר כמו JPEG ו-PNG. קידוד התמונות בפורמטים החדשים האלה הוא אסטרטגיה טובה להקטנת גודל ההורדה של התמונות.
יש תמיכה ב-AVIF בגרסה העדכנית של כל הדפדפנים העיקריים, והפורמט הזה מציע קבצים קטנים יותר בהשוואה לפורמטים אחרים עם אותן הגדרות איכות. מידע נוסף על AVIF זמין ב-Codelab בנושא הצגת תמונות AVIF.
פורמט WebP נתמך על ידי כל הדפדפנים העיקריים ומספק דחיסה טובה יותר של תמונות באינטרנט עם אובדן נתונים וללא אובדן נתונים. מידע נוסף על WebP זמין במאמר בנושא שימוש בתמונות WebP.
שימוש בפורמטים של וידאו לתוכן אנימציה
קובצי GIF גדולים לא פועלים באופן יעיל להצגת אנימציה בהשוואה לסרטונים. כדי לצמצם את מספר הבייטים שמועברים ברשת, במקום קובצי GIF כדאי לשקול את האפשרות להשתמש בסרטוני MPEG4/WebM בשביל אנימציות ובקובצי PNG/WebP בשביל תמונות סטטיות.
במאמר החלפת קובצי GIF עם אנימציה בסרטונים לטעינה מהירה יותר של דפים מוסבר איך להחליף תמונות GIF בסרטונים.
הצגת תמונות בגודל רספונסיבי
מומלץ שהדף אף פעם לא יציג תמונות גדולות יותר מהגרסה שמוצגת במסך של המשתמש. כל מה שגדול יותר מזה פשוט מוביל לבזבוז בייטים ומאט את זמן הטעינה של הדף.
אחת האסטרטגיות היא להשתמש בפורמטים של תמונות מבוססות-ווקטור, כמו SVG. תמונת SVG יכולה להתרחב לכל גודל, כי כמות הקוד שלה מוגבלת. מידע נוסף זמין במאמר החלפת סמלים מורכבים ב-SVG.
אם אי אפשר להשתמש בתמונות מבוססות-ווקטור, מומלץ להציג תמונות שהן 'רספונסיביות'. כשמשתמשים בתמונות רספונסיביות, יוצרים כמה גרסאות של כל תמונה, ואז מציינים באיזו גרסה להשתמש ב-HTML או ב-CSS באמצעות שאילתות מדיה, מידות אזור התצוגה וכו'.
לדוגמה, לרכיב <img> יש מאפיינים srcset ו-sizes שבאמצעותם אפשר לציין כתובות URL של תמונות בגדלים שונים:
אם אתם צריכים לשנות את התמונה לגמרי, אתם יכולים להשתמש ברכיב <picture>:
מידע נוסף זמין במאמרים בנושא תמונות רספונסיביות ורכיב התמונה.
הנחיות ספציפיות לטכנולוגיה
התובנה הזו כוללת גם הנחיות ספציפיות לטכנולוגיות שמשמשות בדפים הבאים:
AMP
- כדאי להציג את כל רכיבי
amp-imgבפורמטים של WebP, וכן לציין פורמט גיבוי חלופי שמתאים לדפדפנים אחרים. - להצגת תוכן באנימציה, כשהתוכן לא מוצג במסך כדאי להשתמש ב-
amp-animכדי לצמצם את השימוש ביחידת העיבוד המרכזית (CPU).
Drupal
- כדאי לשקול שימוש במודול שמבצע אופטימיזציה ומצמצם את גודל התמונות שהעלית לאתר באופן אוטומטי, בלי לפגוע באיכות שלהן.
- צריך לוודא שנעשה שימוש בסגנונות המותאמים של התמונות הרספונסיביות שסופקו על ידי Drupal לכל התמונות שמוצגות באתר.
Joomla
כדאי לשקול להשתמש בפלאגין או בשירות שימירו אוטומטית את התמונות שהועלו לפורמטים האופטימליים.
Magento
כדאי לשקול להשתמש בתוסף של צד שלישי ל-Magento שמבצע אופטימיזציה של תמונות.
WordPress
כדאי לשקול להשתמש בפלאגין של WordPress לאופטימיזציית תמונות שדוחס את התמונות בלי לפגוע באיכות שלהן.