המדיניות בנושא תמונות לזמני טעינה מהירים ועוד

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

Luna Lu
Luna Lu

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

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

יכול להיות שתתהו איך אפשר לדעת אם התמונות שלכם מותאמות ואיך כדאי לבצע את ההתאמה. אנחנו עורכים ניסויים עם קבוצה חדשה של כללי מדיניות תכונות לאופטימיזציה של תמונות: oversized-images,‏ unoptimized-lossy-images,‏ unoptimized-lossless-images ו-unoptimized-lossless-images-strict. עכשיו כולם זמינים לתקופות ניסיון.

כללי מדיניות לאופטימיזציה של תמונות

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

תמונות גדולות במיוחד

מדיניות ההרשאות oversized-images מגבילה את הממדים המהותיים של התמונה ביחס לגודל הקונטיינר.

כשבמסמך נעשה שימוש במדיניות oversized-images, כל רכיב <img> שהרזולוציה שלו גדולה פי X מגודל הקונטיינר בכל אחד מהמאפיינים יוחלף בתמונה של placeholder.

למה?

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

דוגמאות

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

ברירת המחדל של שינוי הגודל.
התנהגות ברירת המחדל של שינוי הגודל.

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

Permissions-Policy: oversized-images *(2);

כשהתמונה גדולה מדי לקונטיינר.
כשהתמונה גדולה מדי לקונטיינר.

התוצאות דומות אם מקטינים רק את הרוחב או הגובה.

רוחב ששונה גובה לאחר שינוי
משנים את הרוחב והגובה.

אופן השימוש

לסיכום, אפשר לציין את המדיניות oversized-images באמצעות:

  • כותרת HTTP Permissions-Policy
  • מאפיין <iframe> allow

כדי להצהיר על המדיניות oversized-images, צריך לספק את הפרטים הבאים:

  • שם התכונה, oversized-images (חובה)
  • רשימה של מקורות (אופציונלי)
  • ערכי הסף (כלומר, יחס ההקטנה X) של המקורות, שצוינו בסוגריים (אופציונלי)

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

דוגמאות נוספות

Permissions-Policy: oversized-images *(2.0)

המדיניות נאכפת בכל המקורות עם ערך סף של 2.0. אסור להשתמש ברכיב <img> עם תמונה שיחס ההקטנה שלה גדול מ-2.0, והוא יוחלף בתמונה placeholder.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

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

unoptimized-{lossy,lossless}-images

כללי המדיניות של התכונות unoptimized-lossy-images, unoptimized-lossless-images ו-unoptimized-lossless-images-strict מגבילים את גודל הקובץ של התמונה ביחס לרזולוציה הפנימית שלה:

unoptimized-lossy-images
בפורמטים עם אובדן נתונים, יחס הבייטים לכל פיקסל לא יכול לחרוג מ-X, עם הרשאה קבועה של 1KB לעלויות צד. בתמונה בפורמט W x H, סף גודל הקובץ מחושב לפי W x H x X + 1024.
unoptimized-lossless-images
פורמטים ללא אובדן נתונים לא יכולים לחרוג מיחס של בייט לפיקסל עם תקורה קבועה של 10KB. כשמדובר בתמונות בפורמט W x H, ערך הסף של גודל הקובץ מחושב באופן הבא: W x H x X + 10240.
unoptimized-lossless-images-strict
בפורמטים ללא אובדן נתונים, יחס הבייטים לכל פיקסל לא יכול לחרוג מ-X, עם הרשאה קבועה של 1KB לעלויות צד. בתמונה בפורמט W x H, סף גודל הקובץ מחושב לפי W x H x X + 1024.

כשמסמך כלשהו משתמש באחד מכללי המדיניות האלה, כל רכיב <img> שמפר את האילוץ יוחלף בתמונה placeholder.

למה?

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

דוגמה

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

השוואה בין תמונה שעברה אופטימיזציה לתמונה שלא עברה אופטימיזציה
השוואה בין תמונה שעברה אופטימיזציה לבין תמונה שלא עברה אופטימיזציה.

אם מפעילים את מדיניות ההרשאות הבאה, מקבלים תמונת placeholder במקום זאת.

Permissions-Policy: unoptimized-lossy-images *(0.5);

כשהתמונה לא עוברת אופטימיזציה.
כשהתמונה לא עברה אופטימיזציה.

אופן השימוש

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

לסיכום, אפשר לציין את כללי המדיניות של unoptimized-{lossy,lossless}-images באמצעות:

  • כותרת HTTP‏ Permissions-Policy
  • מאפיין <iframe> allow

כדי להצהיר על מדיניות unoptimized-{lossy,lossless}-images, עליכם לספק את הפרטים הבאים:

  • שם התכונה, לדוגמה, unoptimized-lossy-images (חובה)
  • רשימה של מקורות (אופציונלי)
  • ערכי הסף (כלומר, יחס בייט לכל פיקסל X) של המקורות, שצוינו בסוגריים (אופציונלי)

מומלץ להשתמש ביחס של 0.5 בייטים לכל פיקסל או פחות עבור unoptimized-lossy-images, וביחס של 1 בייטים לכל פיקסל או פחות עבור unoptimized-lossless-images ו-unoptimized-lossless-images-strict.

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

אם אתם משתמשים בפורמטים של WebP, נסו להשתמש בערכים מחמירים יותר של ערכי הסף:

  • 0.2 עבור WEBPV8
  • 0.5 עבור WEBPL

דוגמאות נוספות

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

המדיניות הזו נאכפת בכל המקורות עם ערך סף של 0.5 (לפורמטים עם אובדן נתונים) ו-1 (לפורמטים ללא אובדן נתונים). אסור להשתמש ברכיב <img> שהיחס בין הבייטים לפיקסלים בתמונה שלו חורג מהאילוץ, והוא יוחלף בתמונת placeholder.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

המדיניות הזו נאכפת על מקור האתר עם ערך סף של 0.3 (לפורמטים עם איבוד נתונים) ו-0.8 (לפורמטים ללא אובדן נתונים). רכיבי <img> בהקשרים של גלישה ברמה העליונה ובהקשרים של גלישה בתוך מקור יוצגו כרגיל רק אם יחס בייט לפיקסל עומד במגבלות האלה. רכיבי <img> בכל מקום אחר ייראו כרגיל.

מצב 'דוחות בלבד' בשטח

יכול להיות שלא כדאי לפרסם אתר עם תמונות placeholder. אפשר להשתמש בכללי המדיניות במצב אכיפה (עם תמונות לא מותאמות שמעובדות כתמונות placeholder) במהלך הפיתוח וה-Staging, ולהשתמש במצב דוחות בלבד בסביבת הייצור. (פרטים נוספים זמינים במאמר דיווח על הפרות של מדיניות ההרשאות). בדומה לכותרת ה-HTTP של Permissions-Policy, הכותרת Permissions-Policy-Report-Only מאפשרת לכם לצפות בדוחות על הפרות באופן כללי, ללא אכיפה כלשהי.

מגבלות

המדיניות בנושא תמונות פועלת רק על רכיבי תמונות של HTML (<img>, <source> וכו') ועדיין לא נתמכת בתמונות רקע או בתוכן שנוצר. כדי לקבל תמיכה במדיניות לגבי תוכן רחב יותר, אפשר לפנות אלינו.

אופטימיזציה של התמונות

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

נשמח לקבל ממך משוב

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

אתם יכולים לשלוח לנו משוב על כל אחת מהתכונות שמפורטות במאמר הזה לרשימת התפוצה שלנו: feature-control@chromium.org.

נשמח לדעת אילו ערכי סף השתמשתם בהם ומצאתם שימושיים. נשמח לדעת אם unoptimized-lossless-images או unoptimized-lossless-images-strict נוחים יותר לשימוש, או אם כדאי להשתמש במקום זאת בהנחה על הוצאות כלליות שונות. אנחנו נשלח סקר לקראת סיום הניסוי. עדכונים נוספים בקרוב!