ביצועי תמונה

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

ניתן להוסיף תמונות לדף באמצעות הרכיבים <img> או <picture>, או מאפיין background-image של שירות ה-CSS.

Image size

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

עם זאת, כדי לבחור את הגודל המתאים של התמונה חייבים הרבה משתנים. המשימה של בחירת גודל התמונה המתאים בכל מקרה, ומסובך. ב-2010, כשהושק ה-iPhone 4, רזולוציית המסך (640x960) היה כפול מזה של iPhone 3 (320x480). לעומת זאת, הגודל של ה-iPhone 4 נשאר בערך כמו ה-iPhone 3.

הצגת כל התוכן ברזולוציה גבוהה יותר הייתה יוצרת טקסט ותמונות קטן משמעותית – מחצית מהגודל הקודם שלהם כדי להיות מדויק. במקום זאת, פיקסל אחד הפכו ל-2 פיקסלים של מכשיר. מצב זה נקרא יחס הפיקסלים של המכשיר (DPR). ב-iPhone 4 - ובדגמים רבים של iPhone ששוחררו לאחר מכן - היה DPR של 2.

חזרה על הדוגמה הקודמת, אם למכשיר יש DPR של 2 ובתמונה מוצגת במכל של 500 פיקסלים על 500 פיקסלים, ולאחר מכן תמונה ריבועית של 1,000 פיקסלים (שנקרא עכשיו הגודל הפנימי) הוא עכשיו הגודל האופטימלי. באופן דומה, אם יחס הגובה-רוחב של המכשיר הוא 3, אז תמונה ריבועית של 1500 פיקסלים היא הגודל האופטימלי.

srcset

הרכיב <img> תומך במאפיין srcset, שמאפשר לציין רשימה של מקורות תמונות אפשריים שהדפדפן עשוי להשתמש בהם. כל מקור תמונה שצוין חייב לכלול את כתובת האתר של התמונה, ורוחב מתאר או דחיסות פיקסלים.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

קטע ה-HTML הקודם משתמש במתאר דחיסות הפיקסלים כדי לרמוז על הדפדפן כדי להשתמש ב-image-500.png במכשירים עם DPR של 1, image-1000.jpg עם DPR של 2 ו-image-1500.jpg במכשירים עם DPR של 3.

כל זה אולי נראה חתוך ויבש, אבל שיעור ה-DPR של המסך הוא לא הדבר היחיד בבחירת התמונה האופטימלית לדף נתון. של הדף layout הוא עוד שיקול דעת.

sizes

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

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

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

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

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

הדפדפן יכול לשלב את המידע הזה עם הרשימה של תמונות srcset כדי למצוא את התמונה האופטימלית. לדוגמה, אם המשתמש משתמש בנייד במכשיר ברוחב מסך של 320 פיקסלים עם DPR של 3, התמונה מוצגת 320 CSS pixels x 3 DPR = 960 device pixels. בדוגמה הזאת, הערך הכי קרוב גודל התמונה יהיה image-1000.jpg וברוחב פנימי של 1,000 פיקסלים (1000w).

פורמטים של קבצים

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

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

AVIF הוא פורמט תמונה חדש יותר, ולמרות שהוא פחות נתמך כמו WebP, הוא מספקת תמיכה סבירה במידה סבירה בכל הדפדפנים. AVIF תומך גם באובדן נתונים ודחיסה ללא אובדן נתונים, ובבדיקות הניבו חיסכון של יותר מ-50% כאשר בהשוואה ל-JPEG במקרים מסוימים. ב-AVIF אפשר למצוא גם סולם צבעים רחב (WCG) וגם תכונות של טווח דינמי גבוה (HDR).

דחיסה

יש שני סוגי דחיסה:

1. דחיסת נתונים מאוחסנת
2. דחיסה ללא אובדן נתונים

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

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

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

הרכיב <picture>

הרכיב <picture> מאפשר גמישות רבה יותר בציון כמה הצעות לתמונות:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

כשמשתמשים ב-<source> רכיבים בתוך הרכיב <picture>, אפשר להוסיף תמיכה בתמונות AVIF ו-WebP, אבל אפשר גם להשתמש בתמונות מותאמות יותר מדור קודם אם הדפדפן לא תומך בפורמטים מודרניים. בגישה הזאת, הדפדפן בוחר את רכיב <source> הראשון שצוין שתואם לרכיב הזה. אם אפשר לעבד את התמונה בפורמט הזה, היא תשתמש בתמונה. אחרת, הדפדפן עובר לרכיב <source> הבא שצוין. בקוד ה-HTML הקודם הוא מקבל עדיפות על פני פורמט WebP, פורמט JPEG, אם לא יש תמיכה ב-AVIF או ב-WebP.

כדי להשתמש ברכיב <picture> צריך שהרכיב <img> יוצב בתוכו. המאפיינים alt, width ו-height מוגדרים ב-<img> ונמצאים בשימוש ללא קשר לאפשרות שנבחרה ב-<source>.

הרכיב <source> תומך גם ברכיבים media, srcset ו-sizes . בדומה לדוגמה הקודמת (<img>), גם כאן מציינים את לדפדפן איזו תמונה לבחור באזורי תצוגה שונים.

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

המאפיין media מקבל תנאי מדיה. בדוגמה שלמעלה, ה-DPR של המכשיר משמש כמצב למדיה. כל מכשיר עם שיעור DPR גדול מ- או שווה ל-1.5, ישתמש ברכיב <source> הראשון. הרכיב <source> אומרת לדפדפן, במכשירים שבהם אזור התצוגה רחב יותר מ-768 פיקסלים, האפשרות שנבחרה לתמונה מוצגת ברוחב של 500 פיקסלים. במכשירים קטנים יותר, היא תופסת את כל רוחב אזור התצוגה. על ידי שילוב של media ו-srcset יכולה להיות לכם שליטה מדויקת יותר באיזו תמונה להשתמש.

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

מכשירים עם DPR של 1 מורידים את התמונה image-500.jpg, כולל רוב המכשירים למשתמשים במחשבים – שצופים בתמונה בגודל חיצוני של 500 פיקסלים. במצב מופעל לעומת זאת, משתמשים בנייד עם דירוג DPR של 3 מורידים קובץ שעשוי להיות גדול יותר image-1500.jpg – אותה תמונה שמשמשת במחשבים עם DPR של 3.

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

בדוגמה הזו, הרכיב <picture> מותאם כך שיכלול רכיב נוסף רכיב <source> לשימוש בתמונות שונות במכשירים רחבים עם DPR גבוה:

בעזרת השאילתה הנוספת הזו אפשר לראות שimage-1000-sm.jpg image-1500-sm.jpg מוצגים באזורי תצוגה קטנים. המידע הנוסף הזה מאפשרת לדחוס תמונות עוד יותר, כי פריטי המידע שנוצרו בתהליך דחיסת הנתונים לא מאוד יוצגו בגודל ובצפיפות כאלה, ובמקביל לא פוגעים באיכות התמונה. במחשבים.

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

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

בקטע ה-HTML הקודם, מתארי הרוחב הוסרו לטובתך של מתארי יחס הפיקסלים של המכשיר. מספר התמונות שמוצגות בנייד מוגבל אל /image-500.jpg או /image-1000.jpg, גם במכשירים עם DPR של 3.

איך לנהל את המורכבות

כשאתם עובדים עם תמונות רספונסיביות, אתם יכולים למצוא את עצמכם עם הרבה תמונות בגדלים ובפורמטים של כל תמונה. בדוגמה שלמעלה, וריאציות בכל גודל נעשה שימוש, אבל לא כולל AVIF ו-WebP. כמה וריאציות מומלץ ליצור יש? כמו בעיות הנדסיות רבות, התשובה בדרך כלל היא 'תלוי'.

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

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

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

הצגת תמונות על סמך כותרת הבקשה Accept

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

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

קטע ה-HTML הקודם הוא גרסה פשוטה של הקוד שניתן להוסיף אל הקצה העורפי של JavaScript בשרת שלכם כדי לבחור ולהציג את פורמט התמונה האופטימלי. אם הכותרת של הבקשה Accept כוללת את image/avif, אז תמונת ה-AVIF היא מוצגת. אחרת, אם הכותרת Accept כוללת את image/webp, תמונת ה-WebP מוצגת. אם אף אחד מהתנאים האלה לא מתקיים, התמונה בפורמט JPEG מוצגת.

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

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

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

טעינה מדורגת

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

decoding

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

הדגמות של תמונות

בוחנים את הידע

הסרטון הבא: ביצועי הסרטון

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