בדרך כלל, התמונות מהוות את רוב הבייטים שהורדו בדף אינטרנט, ולרוב גם תופסות הרבה מקום חזותי. כתוצאה מכך, לעיתים קרובות אופטימיזציה של תמונות תפיק חלק מהשיפורים המשמעותיים ביותר בבייטים ובביצועים של האתר: ככל שהדפדפן צריך להוריד פחות בייטים, כך יש פחות תחרות על רוחב הפס של הלקוח, וכך הדפדפן יכול להוריד ולעבד תוכן שימושי במסך מהר יותר.
אופטימיזציה של תמונות היא גם אומנות וגם מדע: אומנות כי אין תשובה חד משמעית אחת לגבי הדרך הטובה ביותר לדחוס תמונה מסוימת, וגם מדעי, כי יש הרבה שיטות ואלגוריתמים מפותחים שיכולים לצמצם משמעותית את הגודל של תמונה. כדי למצוא את ההגדרות האופטימליות לתמונה, נדרש ניתוח קפדני של מאפיינים רבים: יכולות עיצוב, תוכן של נתונים מקודדים, איכות, מידות פיקסלים ועוד.
אופטימיזציה של תמונות וקטוריות
כל הדפדפנים המודרניים תומכים ב-Scalable Vector Graphics (SVG), שהוא פורמט תמונה מבוסס XML לגרפיקה דו-ממדית. אפשר להטמיע את תגי העיצוב של SVG ישירות בדף או כמשאב חיצוני. רוב תוכנות השרטוט מבוססות-וקטור יכולות ליצור קובצי SVG, או שאתם יכולים לכתוב אותם ידנית ישירות בכלי לעריכת טקסט שאתם אוהבים.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
הדוגמה שלמעלה מעבדת את הצורה הפשוטה של העיגול עם קווי מתאר שחורים ורקע אדום, ויוצאה מ-Adobe Illustrator.
<?xml version="1.0" encoding="utf-8"?>
כמו שאפשר לראות, הוא מכיל הרבה מטא-נתונים, כמו פרטי שכבה, תגובות ומרחבי שמות של XML שלרוב לא נדרשים כדי לעבד את הנכס בדפדפן. לכן, תמיד כדאי להקטין את קובצי ה-SVG על ידי הרצה באמצעות כלי כמו SVGO.
דוגמה: SVGO מקטין את הגודל של קובץ ה-SVG שלמעלה שנוצר על ידי Illustrator ב-58%, וגודלו הוא מ-470 ל-199 בייטים.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
SVG הוא פורמט מבוסס XML, ולכן אפשר גם להחיל דחיסת GZIP כדי להקטין את גודל ההעברה – חשוב לוודא שהשרת מוגדר לדחיסת נכסי SVG.
תמונת רשת נתונים היא פשוט רשת דו-ממדית של "פיקסלים" נפרדים - לדוגמה, תמונה בגודל 100x100 פיקסלים היא רצף של 10,000 פיקסלים. בתורו, כל פיקסל שומר את ערכי ה-RGBA: ערוץ אדום (R), ערוץ ירוק (G) ערוץ כחול (B) וערוץ אלפא (שקיפות) (A).
באופן פנימי, הדפדפן מקצה 256 ערכים לכל ערוץ, המתורגמים ל-8 סיביות לכל ערוץ (2 ^ 8 = 256), ו-4 בייטים לפיקסל (4 ערוצים x 8 ביטים = 32 סיביות = 4 בייטים). לכן, אם אנחנו יודעים את מידות הרשת, אנחנו יכולים לחשב בקלות את גודל הקובץ:
- תמונה בגודל 100x100 פיקסלים מורכבת מ-10,000 פיקסלים
- 10,000 פיקסלים x 4 בייטים = 40,000 בייטים
- 40,000 בייטים חלקי 1,024 = 39KB
| מידות | פיקסלים | גודל הקובץ |
|---|---|---|
| 100 x 100 | 10,000 | 39 KB |
| 200 x 200 | 40,000 | 156 KB |
| 300 X 300 | 90,000 | 351 KB |
| 500 x 500 | 250,000 | 977 KB |
| 800 x 800 | 640,000 | 2,500KB |
גודל של 39KB לתמונה בגודל 100x100 פיקסלים לא נראה גדול, אבל גודל הקובץ מתפוצץ במהירות בתמונות גדולות יותר, וההורדה של נכסי התמונות היא איטית ויקרה. עד עכשיו הפוסט הזה התמקד רק בפורמט תמונה 'לא דחוס'. למרבה המזל, ניתן לעשות הרבה דברים כדי להקטין את גודל קובץ התמונה.
שיטה פשוטה אחת היא להפחית את "עומק הסיביות" של התמונה מ-8 סיביות לכל ערוץ ללוח צבעים קטן יותר: 8 סיביות לכל ערוץ נותנות לנו 256 ערכים לכל ערוץ ו-16,777,216 צבעים בסך הכל. מה קורה אם מקטינים את לוח הצבעים ל-256 צבעים? לאחר מכן יהיה צורך ב-8 ביטים בסך הכול עבור ערוצי ה-RGB וחיסכון מיידי של שני בייטים לכל פיקסל – כלומר חיסכון של 50% בדחיסה, לעומת 4 הבייטים המקוריים של 4 בייטים לפורמט פיקסל!
בסצנות מורכבות עם מעברי צבעים הדרגתיים (למשל: הדרגתיות או שמיים) צריך להשתמש בלוחות צבעים גדולים יותר כדי להימנע מפריטים חזותיים כמו שמיים מפוקסלים בנכס 5 ביט. מצד שני, אם בתמונה משתמשים רק בכמה צבעים, לוח צבעים גדול פשוט מבזבז חלקים יקרים!
לאחר אופטימיזציה של הנתונים שמאוחסנים בפיקסלים בודדים, תוכלו להתחכם יותר ולבחון גם פיקסלים קרובים: תמונות רבות, ובעיקר תמונות, כוללות פיקסלים רבים שנמצאים בקרבת מקום בצבעים דומים — לדוגמה, השמיים, מרקמים חוזרים וכן הלאה. בעזרת המידע הזה, המדחס יכול להפעיל קידוד דלתא, שבו במקום לאחסן ערכים נפרדים לכל פיקסל, אפשר לאחסן את ההבדל בין הפיקסלים הקרובים: אם הפיקסלים הסמוכים זהים, הדלתא היא 'אפס' וצריך לאחסן רק ביט אחד! אבל למה לעצור שם...
בעיניים אנושיות יש רמה שונה של רגישות לצבעים שונים: אפשר לבצע אופטימיזציה של קידוד הצבעים כדי להביא בחשבון זאת, על ידי צמצום או הגדלה של לוח הצבעים עבור הצבעים האלה. פיקסלים של 'בקרבת מקום' יוצרים רשת דו-ממדית. המשמעות היא שלכל פיקסל יש מספר שכנים: אפשר להשתמש בעובדה הזו כדי לשפר עוד יותר את קידוד דלתא. במקום לבחון רק את השכנים המיידיים של כל פיקסל, אפשר לבחון בלוקים גדולים יותר של פיקסלים בקרבת מקום ולקודד בלוקים שונים עם הגדרות שונות.
כמו שאפשר לראות, תהליך האופטימיזציה של תמונות מורכב מהר מאוד (או בכיף, בהתאם לנקודת המבט שלכם), והוא תחום פעיל במחקר אקדמי ומסחרי. התמונות תופסות הרבה בייטים וחשוב לנו לפתח טכניקות טובות יותר לדחיסת תמונות. אם מעניין אתכם לקבל מידע נוסף, כדאי להיכנס לדף Wikipedia או לקרוא דוגמה מעשית בסקירה המפורטת על טכניקות דחיסה של WebP.
אז שוב, כל זה מצוין, אבל גם אקדמי מאוד: איך זה עוזר לבצע אופטימיזציה של תמונות באתר? ובכן, חשוב להבין את הצורה של הבעיה: פיקסלים RGBA, עומק סיביות וטכניקות אופטימיזציה שונות. את כל המושגים האלה חשוב להבין ולזכור לפני שנכנסים לדיונים על פורמטים שונים של תמונות בפורמט רסטר.
דחיסת תמונות ללא איבוד נתונים לעומת דחיסת נתוני איבוד נתונים
בסוגים מסוימים של נתונים, כמו קוד מקור לדף או קובץ הפעלה, חשוב מאוד שכלי המדחס לא ישנה או יאבד את המידע המקורי: פיסת נתונים אחת חסרה או שגויה עלולה לשנות לחלוטין את המשמעות של תוכן הקובץ, או גרוע מזה, לפרוץ אותו לגמרי. בסוגים אחרים של נתונים, כמו תמונות, אודיו ווידאו, יכול להיות שזה יהיה מתאים לחלוטין להצגת הנתונים המקוריים.
למעשה, הודות לאופן הפעולה של העין, לפעמים אנחנו לא צריכים יותר מידע על כל פיקסל כדי להקטין את גודל הקובץ של התמונה. לדוגמה, לעיניים שלנו יש רגישות שונה לצבעים שונים, ולכן אנחנו יכולים להשתמש בפחות ביטים כדי לקודד צבעים מסוימים. כתוצאה מכך, צינור עיבוד נתונים אופייני לאופטימיזציה של תמונות מורכב משני שלבים כלליים:
- התמונה מעובדת באמצעות מסנן lossy שמבטל חלק מנתוני הפיקסלים.
- התמונה מעובדת עם מסנן lossless שדוחס את נתוני הפיקסלים.
השלב הראשון הוא אופציונלי, והאלגוריתם המדויק תלוי בפורמט התמונה הספציפי, אבל חשוב להבין שכל תמונה יכולה לעבור שלב של דחיסת נתונים מסוג Lossy כדי להקטין את הגודל שלה. למעשה, ההבדל בין פורמטים שונים של תמונות, כמו GIF, PNG, JPEG ואחרים, הוא בשילוב של האלגוריתמים הספציפיים שהם משתמשים בהם (או מושמטים) בעת החלת השלבים עם איבוד נתונים ובלי אובדן נתונים.
אם כן, מהי התצורה 'האופטימלית' של אופטימיזציה עם אובדן נתונים או תכונת האובדן ללא אובדן נתונים? התשובה תלויה בתוכן התמונה ובקריטריונים שלכם, כמו יחסי הגומלין בין גודל הקובץ וארטיפקטים שנוצרו כתוצאה מדחיסה עם איבוד נתונים: במקרים מסוימים, כדאי לדלג על אופטימיזציה עם איבוד נתונים כדי להציג פרטים מורכבים במהימנות מלאה. במקרים אחרים, יכול להיות שתוכלו לבצע אופטימיזציה אגרסיבית לאיבוד נתונים כדי להקטין את גודל הקובץ של נכס התמונות. כאן נכנסים לתמונה שיקול הדעת וההקשר שלכם – אין מקום אוניברסלי אחד.
דוגמה מעשית: כשמשתמשים בפורמט איבוד נתונים כמו JPEG, המדחס בדרך כלל חושף הגדרת 'איכות' שניתן להתאים אישית (למשל, פס ההזזה של האיכות שמסופק על ידי הפונקציונליות Save for Web ב-Adobe Photoshop). בדרך כלל הוא מספר בין 1 ל-100 שקובע את הפעולה הפנימית של האוסף הספציפי של אלגוריתמים עם איבוד נתונים (Lost for Web) ואלגוריתמים ללא אובדן מידע. כדי לקבל את התוצאות הטובות ביותר, אפשר לנסות הגדרות איכות שונות לתמונות, ולא לחשוש להפחית את האיכות – לרוב התוצאות החזותיות טובות מאוד והחיסכון בגודל הקובץ יכול להיות גדול למדי.
איך דחיסת תמונות משפיעה על Core Web Vitals
מכיוון שתמונות הן לעיתים קרובות מועמדים להמהירות שבה נטען רכיב התוכן הכי גדול (LCP), צמצום משך טעינת המשאבים של תמונה עשוי להניב ערך LCP טוב יותר גם בשיעור ה-Lab וגם בשדה.
כשמשחקים עם הגדרות דחיסה בפורמטים של תמונות באמצעות רשת נקודות, חשוב להתנסות בפורמטים WebP ו-AVIF כדי לראות אם אפשר להציג את אותה תמונה עם טביעת רגל קטנה בהשוואה לפורמטים ישנים יותר.
עם זאת, חשוב להיזהר לא לבצע דחיסת יתר של תמונות רסטר. פתרון טוב הוא להשתמש ב-CDN לאופטימיזציית תמונות כדי למצוא את הגדרות הדחיסה הטובות ביותר עבורך, אבל לחלופין אפשר להשתמש בכלים כמו Butteraugli כדי להעריך הבדלים חזותיים, כדי שלא תקודדו מדי תמונות בצורה אגרסיבית מדי ותאבדו יותר מדי איכות.
רשימת משימות לאופטימיזציה של תמונות
כשמבצעים אופטימיזציה של תמונות, חשוב לזכור את השיטות והטיפים הבאים:
- העדפה לפורמטים של וקטורים: תמונות וקטוריות לא תלויות ברזולוציה ובקנה מידה, ולכן הן מתאימות מאוד לעולם ברזולוציה גבוהה וריבוי מכשירים.
- לצמצם ולדחוס נכסי SVG: תגי עיצוב של XML שנוצרים על ידי רוב אפליקציות השרטוט מכילים בדרך כלל מטא-נתונים מיותרים שאפשר להסיר; חשוב לוודא שהשרתים מוגדרים להחיל דחיסת GZIP בנכסי SVG.
- העדפה ל-WebP או AVIF על פני פורמטים ישנים של רשת נקודות: בדרך כלל WebP ותמונות AVIF יהיו קטנות הרבה יותר מפורמטים ישנים של תמונות.
- לבחור את הפורמט הטוב ביותר של תמונה מסוג רשת נקודות: יש לקבוע את הדרישות הפונקציונליות ולבחור את הפורמט שמתאים לכל נכס ספציפי.
- התנסות עם הגדרות איכות אופטימליות לפורמטים של רשת נקודות: אל תחששו לצמצם את הגדרות ה"איכות", לרוב התוצאות טובות מאוד והחיסכון בבייטים משמעותי.
- להסיר מטא-נתונים מיותרים של תמונות: תמונות רבות בפורמט רשת תמונות מכילות מטא-נתונים מיותרים לגבי הנכס: מידע גיאוגרפי, פרטי מצלמה וכן הלאה. יש להשתמש בכלים מתאימים כדי להסיר את הנתונים האלו.
- להציג תמונות שמותאמות לעומס: משנים את הגודל של תמונות ומוודאים שגודל ה "תצוגה" קרוב ככל האפשר לגודל ה "טבעי" של התמונה. חשוב במיוחד לשים לב לתמונות גדולות, כי שינוי הגודל שלהן מהווה את התקורה הגדולה ביותר!
- אוטומציה, אוטומציה, אוטומציה: השקעה בכלים ובתשתיות אוטומטיים שיבטיחו אופטימיזציה תמידית של כל נכסי התמונות.