שיפור של שליחת התמונות

תאריך פרסום: 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

Joomla

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

Magento

כדאי לשקול להשתמש בתוסף של צד שלישי ל-Magento שמבצע אופטימיזציה של תמונות.

WordPress

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

משאבים