הכלל הזה מופעל כשכלי PageSpeed Insights מזהה שניתן לבצע אופטימיזציה של התמונות בדף כדי להקטין את גודל הקובץ בלי להשפיע באופן משמעותי על האיכות החזותית שלהן.
סקירה כללית
בדרך כלל תמונות מהוות את רוב הבייטים שהורדו בדף. כתוצאה מכך, בדרך כלל האופטימיזציה של תמונות מאפשרת כמה מהשיפורים המשמעותיים ביותר בבייטים ובביצועים: ככל שהדפדפן צריך להוריד פחות בייטים, כך יש פחות תחרות על רוחב הפס של הלקוח, וכך הדפדפן יכול להוריד ולעבד תוכן במסך מהר יותר.
המלצות
כדי למצוא את השיטה האופטימלית לפורמט ולאופטימיזציה של נכסי התמונות, צריך לבצע ניתוח קפדני במאפיינים רבים: סוג הנתונים המקודדים, היכולות של פורמט התמונה, הגדרות האיכות, רזולוציה ועוד. בנוסף, צריך לבדוק אם כדאי להציג חלק מהתמונות בפורמט וקטורי, אם אפשר להשיג את ההשפעות הרצויות באמצעות CSS ואיך לספק נכסים בקנה מידה מתאים לכל סוג מכשיר.
אופטימיזציות לכל סוגי התמונות
- פועלים בהתאם לשיטות המומלצות להצגת תמונות רספונסיביות.
- פועלים לפי רשימת המשימות לאופטימיזציה של תמונות ספציפיות.
אופטימיזציות של תמונות GIF, PNG ו-JPEG
הפורמטים GIF, PNG ו-JPEG הם 96% מתנועת התמונות כולה באינטרנט. בשל הפופולריות שלהם, PageSpeed Insights מספק המלצות ספציפיות לאופטימיזציה. לנוחותך, ניתן להוריד את התמונות שעברו אופטימיזציה ישירות מ-PageSpeed Insights (המשתמש בספריית האופטימיזציה של תמונות מ-modpagespeed.com).
ניתן גם להשתמש בכלים כמו הבינארי המרה של ImageMagick, שאפשר לבצע בהם פעולות אופטימיזציה דומות. בהמשך מפורטות הוראות לדוגמה.
אם אתם משתמשים בכלים של צד שלישי, חשוב לדעת שהטרנספורמציה יכולה להגדיל את התמונות שלכם אם הן כבר עברו אופטימיזציה טובה. במקרה כזה, יש להשתמש בקובצי המקור.
GIF ו-PNG הם פורמטים ללא אובדן נתונים, כי תהליך הדחיסה לא גורם לשינויים חזותיים בתמונות. בתמונות סטילס, בפורמט PNG יש יחס דחיסה טוב יותר עם איכות חזותית טובה יותר. כדי לשפר את הדחיסה בתמונות מונפשות, מומלץ להשתמש ברכיב video במקום ב-GIF.
- ממירים תמיד GIF ל-PNG, אלא אם הקובץ המקורי מכיל אנימציה או תמונה קטנה (פחות מכמה בייטים).
- בפורמט GIF ו-PNG, יש להסיר את ערוץ אלפא אם כל הפיקסלים אטומים.
לדוגמה, ניתן להשתמש בהמרה בפורמט בינארי כדי לבצע אופטימיזציה של תמונות GIF ו-PNG באמצעות הפקודה הבאה (הפרמטרים בתוך סוגריים מרובעים הם אופציונליים):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG הוא פורמט עם אובדן נתונים. תהליך הדחיסה מסיר את הפרטים החזותיים של התמונה, אבל יחס הדחיסה יכול להיות גדול פי 10 מקובצי GIF או PNG.
- צריך להוריד את האיכות ל-85 אם היא גבוהה יותר. כשהאיכות גדולה מ-85, התמונה גדלה במהירות, בעוד שהשיפור החזותי מועט.
- הפחתת דגימות של Chroma ל-4:2:0, כי מערכת חזותית של בני אדם פחות רגישה לצבעים בהשוואה להארה.
- יש להשתמש בפורמט מתקדם לתמונות שגדולות מ-10,000 בייטים. לרוב, פורמט JPEG בפורמט Progressive הוא בעל יחס דחיסה גבוה יותר מאשר תמונת JPEG בסיסית – התמונה גדולה, והיתרונות של רינדור הדרגתי.
- אם התמונה היא בשחור-לבן, השתמשו במרחב צבעים בגווני אפור.
לדוגמה, אפשר להשתמש בהמרה בפורמט בינארי כדי לבצע אופטימיזציה של תמונות בפורמט JPEG באמצעות הפקודה הבאה (הפרמטרים בתוך סוגריים מרובעים הם אופציונליים):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
משוב
האם הדף הזה הועיל לך?