אופטימיזציה של תמונות לאתר: פורמטים, גדלים רספונסיביים וסדרי טעינה

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

התחילו בקובץ שהדפדפן באמת מוריד

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

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

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

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

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

התאימו את הפורמט לתוכן

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

הטבלה היא נקודת פתיחה להשוואת קבצים אמיתיים.

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

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

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

תארו את הרוחבים הזמינים באמצעות srcset

רוחב CSS אינו בהכרח מספר הפיקסלים הפיזיים הנדרש לחדות. צפיפות המכשיר חשובה. לתמונה ברוחב 600 פיקסלי CSS במסך צפוף עשוי להתאים קובץ רחב יותר. אל תקבעו שמידות המקור לעולם אינן יכולות לעבור את מידות התצוגה.

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

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

<style>
  .article-image {
    display: block;
    width: min(100%, 960px);
    height: auto;
  }
  .article-content {
    width: calc(100% - 32px);
    max-width: 960px;
    margin-inline: auto;
  }
</style>
<div class="article-content">
  <img class="article-image"
       src="/images/coast-960.webp"
       srcset="/images/coast-480.webp 480w,
               /images/coast-960.webp 960w,
               /images/coast-1920.webp 1920w"
       sizes="(max-width: 991px) calc(100vw - 32px), 960px"
       width="1920" height="1080"
       alt="Rocky coastline beside a calm blue sea">
</div>

נקודת השבירה נובעת מהמבנה: 992 פחות 32 הם 960. שמרו על התאמה בין CSS ל-sizes בעת שינוי העיצוב. sizes="100vw" שגוי בכרטיס צר יכול לגרום לבחירת קובץ גדול מדי.

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

השתמשו ב-picture לבחירת פורמט וחיתוך

הרכיב picture מוסיף כללי בחירה מפורשים. הוא מתאים לפורמטים ולחיתוך אמנותי, שבו תצוגת מובייל משנה קומפוזיציה ולא רק מספר פיקסלים. רכיב img החובה נשאר אחראי לטקסט החלופי ולמקור הגיבוי.

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

<picture>
  <source type="image/avif"
          srcset="/images/garden-800.avif 800w,
                  /images/garden-1600.avif 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <source type="image/webp"
          srcset="/images/garden-800.webp 800w,
                  /images/garden-1600.webp 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <img src="/images/garden-800.jpg"
       srcset="/images/garden-800.jpg 800w,
               /images/garden-1600.jpg 1600w"
       sizes="(max-width: 800px) 100vw, 800px"
       width="1600" height="1000"
       style="display:block;width:min(100%,800px);height:auto"
       alt="Raised garden beds arranged along a stone path">
</picture>

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

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

שריינו מקום והקדימו את בקשת ה-LCP

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

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

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

דוגמה זו לתמונה בהמשך הדף שומרת מקום ומאפשרת פענוח אסינכרוני.

<img src="/images/workshop-960.webp"
     width="960" height="640"
     loading="lazy" decoding="async"
     style="max-width:100%;height:auto"
     alt="Hand tools organized on a workshop wall">

אל תדחו את תמונת ה-LCP הצפויה. הציבו את כתובתה האמיתית ב-HTML הראשוני כשאפשר, ולא רק במאפיין נתונים עבור JavaScript. fetchpriority="high" מסמן חשיבות, אך אינו מתקן משאב שעוד אי אפשר לגלות.

תמונת הפתיחה הבאה מבקשת טעינה מיידית ועדיפות גבוהה.

<img src="/images/hero-1600.webp"
     srcset="/images/hero-800.webp 800w,
             /images/hero-1600.webp 1600w"
     sizes="100vw"
     width="1600" height="900"
     loading="eager" fetchpriority="high"
     style="display:block;width:100%;height:auto"
     alt="Sunlight falling across a quiet mountain valley">

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

הפכו את תהליך התמונות לחוזר

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

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

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

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

ב-WordPress בדקו את מדריך Core Web Vitals לפלטפורמה לפני הוספת תוסף. ב-Shopify השתמשו במדריך מהירות החנות ובדקו את תגי התמונה שהערכה מייצרת. שמרו על שיטה אחת ברורה כדי ששתי מערכות לא ידחסו שוב אותו קובץ.

בדקו דפים קיימים בסדר מועיל

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

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

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

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

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