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

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

Luna Lu
Luna Lu

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

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

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

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

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

oversized-images

מדיניות ההרשאות של 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
בפורמטים ללא אובדן נתונים, יחס הבייטים לכל פיקסל לא יכול לחרוג מ-X, עם הרשאה קבועה של 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 מוסבר איך לבצע אופטימיזציה של התמונות.

דוגמה

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

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

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

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 אינטואיטיביים יותר וקלים יותר לשימוש, או אם כדאי להשתמש במקום זאת בהנחה על הוצאות כלליות שונות. נשלח לך סקר לקראת סוף תקופת הניסיון. עדכונים נוספים בקרוב!