כדאי להשתמש במדיניות תמונות שעברה אופטימיזציה כדי להבטיח שבאתר שלכם נעשה שימוש בתמונות שמניבות את הביצועים הטובים ביותר.
בדרך כלל תמונות תופסות הרבה שטח חזותי ומהוות את רוב הבייטים שמשתמשים מורידים באתר. אופטימיזציה של תמונות יכולה לשפר את ביצועי הטעינה ולהפחית את התנועה ברשת.
באופן מפתיע, יותר מחצי מהאתרים באינטרנט מציגים תמונות באיכות גרועה או תמונות גדולות שלא לצורך. כך נשאר הרבה מקום לשיפורי ביצועים, פשוט על ידי אופטימיזציה של התמונות.
השאלה שלי שחשוב לענות עליה היא איך אדע אם התמונות שלי עברו אופטימיזציה, ואיך אוכל לבצע אופטימיזציה שלהן? אנחנו בודקים סדרה חדשה של כללי מדיניות לתכונות לאופטימיזציית תמונות: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images ו-unoptimized-lossless-images-strict.
כל הסוגים זמינים עכשיו לגרסאות מקור לניסיון.
מדיניות בנושא תמונות שעברו אופטימיזציה
מדיניות ההרשאות מוסיפה מגבלות חדשות על תמונות שאפשר להחיל עם אכיפה בזמן הפיתוח. תמונות שמפרות את ההגבלות יוצגו כתמונות placeholder, שקל לזהות ולתקן. ניתן לציין את כללי המדיניות האלה במצב דוחות בלבד, שבו התמונות יעובדו כרגיל ללא אכיפה, בזמן שהדיווח ידווח על הפרות. (למידע נוסף, ראו מצב דיווח בלבד בהמשך).
תמונות גדולות
מדיניות ההרשאות oversized-images מגבילה את המימדים המהותיים של תמונה ביחס לגודל הקונטיינר שלה.
כשבמסמך נעשה שימוש במדיניות oversized-images, כל אלמנט <img> שהרזולוציה הפנימית שלו גדולה פי X יותר מגודל הקונטיינר בכל אחד מהמימדים יוחלף בתמונת placeholder.
למה?
הצגת תמונות גדולות יותר ממה שמכשיר הצפייה יכול לעבד – לדוגמה, הצגת תמונות ממחשבים בהקשרים של נייד או הצגת תמונות בצפיפות פיקסלים גבוהה במכשיר עם צפיפות פיקסלים נמוכה – מבזבז את התנועה ברשת ואת זיכרון המכשיר. למידע נוסף על אופטימיזציה של התמונות, קראו את המאמר הצגת תמונות במידות נכונות והצגת תמונות רספונסיביות.
דוגמאות
הנה כמה דוגמאות שממחישות זאת. הדוגמה הבאה מציגה את התנהגות ברירת המחדל כשחותכים את גודל התצוגה של תמונה לחצי.
אם מחילים את מדיניות ההרשאות הבאה, מקבלים במקום זאת תמונת 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> בכל מקום אחר יעובדו כרגיל.
תמונות ללא אופטימיזציה-{lossy,lossless}
כללי המדיניות של התכונות unoptimized-lossy-images, unoptimized-lossless-images,
unoptimized-lossless-images-strict מגבילים את גודל הקובץ של תמונה ביחס לרזולוציה הפנימית שלה:
unoptimized-lossy-images- פורמטים של אובדן נתונים לא יכולים לחרוג מיחס X של בייט לפיקסל עם תקורה קבועה של 1KB. לתמונות בפורמט W x H, ערך הסף של גודל הקובץ מחושב כך: W x H x 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 X + 1024.
כשבמסמך נעשה שימוש באחד מכללי המדיניות האלה, כל רכיב <img> שמפר את האילוץ יוחלף בתמונת placeholder.
למה?
ככל שגודל ההורדה גדול יותר, כך העלאת התמונה נמשכת זמן רב יותר. כדאי להקפיד שגודל הקובץ יהיה קטן ככל האפשר כשמבצעים אופטימיזציה של תמונה: הסרת מטא-נתונים, בחירת פורמט תמונה טוב, שימוש בדחיסת תמונות וכן הלאה. למידע נוסף על אופטימיזציה של התמונות, קראו את המאמרים שימוש ב-Imagemin לדחיסת תמונות ושימוש בתמונות WebP.
דוגמה
בטבלה הבאה מוצגת התנהגות ברירת המחדל של הדפדפן. ללא מדיניות ההרשאות, תמונה עם אובדן אובדן שלא עבר אופטימיזציה יכולה להיות מוצגת בדיוק כמו תמונה שעברה אופטימיזציה.
אם מחילים את מדיניות ההרשאות הבאה, מקבלים במקום זאת תמונת placeholder.
Permissions-Policy: unoptimized-lossy-images *(0.5);
אופן השימוש
אם עוד לא השתמשתם במדיניות ההרשאות, תוכלו לקרוא פרטים נוספים במאמר Introduction to Permissions Policy.
לסיכום, אפשר לציין את כללי המדיניות 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 Lossy, אם אפשר. אם זה לא מספיק, נסו את הפורמט WebP Lossless. צריך להשתמש בפורמט 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 (בפורמטים מסוג Lossless). אסור להשתמש ברכיב <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, ולהשתמש במצב דוחות בלבד בסביבת הייצור. (פרטים נוספים זמינים במאמר Permissions Policy Policy.) בדומה לכותרת ה-HTTP של Permissions-Policy, הכותרת Permissions-Policy-Report-Only מאפשרת לכם לצפות בדוחות על הפרות באופן שוטף, ללא כל אכיפה.
מגבלות
כללי המדיניות בנושא תמונות פועלים רק ברכיבי תמונה של HTML (<img>, <source> וכו') ועדיין לא נתמכים בתמונות רקע או בתוכן שנוצר. אם תרצו לקבל תמיכה במדיניות לגבי תכנים רחבים יותר, ספרו לנו.
אופטימיזציה של התמונות
דיברתי לא מעט על אופטימיזציה של התמונות, אבל לא ציינתי איך לעשות זאת. הנושא הזה לא נכלל במאמר הזה, אבל אפשר למצוא מידע נוסף בקישורים שלמטה וב-codelabs שמפורטים בסוף המאמר.
נשמח לקבל ממך משוב
אנחנו מקווים שהמאמר הזה עזר לכם להבין טוב את המדיניות בנושא תמונות ועורר אתכם התלהבות. נשמח מאוד אם תנסה את המדיניות ותשלח לנו משוב.
תוכלו לשלוח לנו משוב על כל אחת מהתכונות שמוזכרות במאמר זה לרשימת התפוצה שלנו: feature-control@chromium.org.
נשמח לדעת מהם ערכי הסף שבהם השתמשת ואלו היו מועילים. נשמח לדעת אם unoptimized-lossless-images או unoptimized-lossless-images-strict הם אינטואיטיביים וקלים יותר לשימוש, או אם כדאי להשתמש במקום זאת בתקורה חריגה. נשלח לך סקר לקראת סוף תקופת הניסיון. עדכונים נוספים בקרוב!