תמונות הן בדרך כלל המשאב הכבד ביותר והנפוץ ביותר באינטרנט. בתור לכן אופטימיזציה של תמונות יכולה לשפר משמעותית את ביצועי האתר. ברוב המקרים, אופטימיזציה של תמונות פירושה קיצור זמן הרשת על ידי שליחת פחות בייטים, אבל אפשר גם לבצע אופטימיזציה של כמות הבייטים שיישלחו למשתמש באמצעות הצגת תמונות בגודל מתאים למכשיר של המשתמש.
ניתן להוסיף תמונות לדף באמצעות הרכיבים <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).
דחיסה
יש שני סוגי דחיסה:
דחיסה של אובדן נתונים פועלת על ידי הפחתת הדיוק של התמונה באמצעות כימות, ומידע על צבע נוסף עשוי להימחק באמצעות תת-דגימה של 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
יכולה להיות לכם שליטה מדויקת יותר באיזו תמונה להשתמש.
הנתון הזה מוצג בטבלה הבאה, שבה מופיעים כמה רוחבי אזור תצוגה יחסי הפיקסלים של המכשיר נבדקים:
רוחב אזור התצוגה (פיקסלים) | DR אחד | 1.5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
מכשירים עם 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 גבוה:
רוחב אזור התצוגה (פיקסלים) | DR אחד | 1.5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.jpg | 1000-sm.jpg |
480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
בעזרת השאילתה הנוספת הזו אפשר לראות ש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
מאפשר לדפדפן להחליט מה הכי מתאים
משתמש.
הדגמות של תמונות
בוחנים את הידע
באילו פורמטים של תמונות יש תמיכה בדחיסה ללא אובדן נתונים?
אילו פורמטים של תמונות תומכים בדחיסת נתונים מסוג lossy?
מה המשמעות של מתאר הרוחב (למשל 1000w
)
הדפדפן לגבי אפשרות לתמונה שצוין ב-srcset
המאפיין הזה?
מה המאפיין sizes
מיידע את הדפדפן על
רכיב אחד (<img>
) שעליו הוא חל?
srcset
של הרכיב <img>
.
srcset
של הרכיב <img>
,
בהתחשב במידות של אזור התצוגה הנוכחי של המשתמש.
הסרטון הבא: ביצועי הסרטון
תמונות הן סוג המדיה הנפוץ ביותר שבו משתמשים באינטרנט, אבל הן רחוקות מאוד הם הדבר היחיד שצריך לזכור כשמדובר בביצועים. קמפיינים של מודעות וידאו הוא סוג נפוץ נוסף של מדיה שנעשה בה שימוש ברחבי האינטרנט, ויש לו שיקולי ביצועים. במודול הבא של הקורס, נלמד כמה שיטות לאופטימיזציה של סרטונים ואיך לטעון אותם ביעילות.