אופטימיזציית תמונות באתרים

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

בחירת הפורמט הנכון

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

תגית picture מאפשרת לספק כמה פורמטים ולתת לדפדפן לבחור את הטוב ביותר שהוא תומך בו:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="תיאור התמונה" />
</picture>

תמונות רספונסיביות - לא כולם צריכים את אותו קובץ

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

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="תיאור התמונה"
/>

כך משתמש בטלפון מוריד קובץ קטן בהרבה ממשתמש שגולש ממסך גדול, בלי שום שינוי ידני מצדו.

טעינה עצלה - Lazy Loading

לא צריך לטעון את כל התמונות בדף מיד כשהוא נפתח, במיוחד תמונות שנמצאות עמוק בגלילה ורוב המשתמשים בכלל לא יגיעו אליהן. תכונת loading="lazy" מובנית בדפדפן דוחה את טעינת התמונה עד שהיא קרובה להיכנס לתצוגה:

<img src="photo.jpg" loading="lazy" alt="תיאור התמונה" />

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

מידות נכונות ומניעת קפיצות בפריסה

תמונה ש-CSS "מכווץ" מגודל מקורי ענק לגודל תצוגה קטן עדיין גורמת למשתמש להוריד את הקובץ המקורי הכבד. עדיף להכין מראש תמונה בגודל שקרוב לגודל התצוגה בפועל. חשוב גם להגדיר width ו-height (או aspect-ratio) בקוד, כדי שהדפדפן ישריין מקום לתמונה עוד לפני שהיא נטענת, וימנע קפיצה מכוערת של שאר התוכן כשהיא מופיעה.

דחיסה וכלים אוטומטיים

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

אל תשכחו את alt

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

מאיפה ממשיכים ללמוד

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

לסיכום

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

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

הצטרפו לקהילה בדיסקורד