השאלה הראשונה שצריך לשאול את עצמכם היא אם התמונה באמת נדרשת כדי להשיג את האפקט הרצוי. אם אתם יכולים להסיר משאב תמונה, שבדרך כלל דורש מספר גדול של בייטים בהשוואה ל-HTML, ל-CSS, ל-JavaScript ולנכסים אחרים בדף, זו תמיד שיטת האופטימיזציה הטובה ביותר. עם זאת, תמונה שממוקמת היטב יכולה גם להעביר מידע רב יותר מאלף מילים, ולכן אתם צריכים למצוא את האיזון.
בשלב הבא, כדאי לבדוק אם יש טכנולוגיה חלופית שיכולה לספק תוצאות טובות יותר, אבל בצורה יעילה יותר:
- אפשר להשתמש באפקטים של CSS (כמו צללים או גוונים) ובאנימציות של CSS כדי ליצור נכסים שאינם תלויים ברזולוציה, שתמיד נראים חדים בכל רזולוציה וברמת זום, ולרוב בחלק קטן מהבייטים הנדרשים לקובץ תמונה.
- גופנים לאינטרנט מאפשרים להשתמש בגופנים יפים תוך שמירה על היכולת לבחור, לחפש ולשנות את גודל הטקסט – שיפור משמעותי בנוחות השימוש.
אם אתם מתכננים לקודד טקסט בנכס תמונה, כדאי לעצור ולחשוב שוב. טיפוגרפיה נהדרת חיונית לתכנון, למיתוג ולקריאוּת טובים, אבל טקסט בתמונות מספק חוויית משתמש גרועה: אי אפשר לבחור את הטקסט, לחפש אותו, להגדיל אותו, להנגיש אותו או להציג אותו במכשירים עם רזולוציה גבוהה. השימוש בגופנים לאינטרנט מחייב קבוצה משלו של פעולות אופטימיזציה, אבל הוא פותר את כל הבעיות האלה ותמיד הוא בחירה טובה יותר להצגת טקסט.
בחירת פורמט התמונה המתאים
אם אתם בטוחים שתמונה היא האפשרות הנכונה, עליכם לבחור בקפידה את סוג התמונה המתאים למשימה.
- בגרפיקה וקטורית נעשה שימוש בקווים, בנקודות ובפוליגונים כדי לייצג תמונה.
- גרפיקה רסטר מייצגת תמונה על ידי קידוד הערכים הנפרדים של כל פיקסל בתוך רשת מלבנית.
לכל פורמט יש יתרונות וחסרונות משלו. פורמטים וקטוריים מתאימים במיוחד לתמונות שמכילות צורות גיאומטריות פחות מורכבות, כמו סמלי לוגו, טקסט או סמלים. התמונות האלה מספקות תוצאות חדות בכל הגדרת רזולוציה וזום, ולכן הן פורמט אידיאלי למסכים ברזולוציה גבוהה ולנכסים שצריך להציג בגדלים שונים.
עם זאת, פורמטים וקטוריים לא מתאימים כשהסצנה מורכבת (לדוגמה, תמונה): כמות ה-Markup של SVG לתיאור כל הצורות עשויה להיות גבוהה מדי, ועדיין יכול להיות שהפלט לא ייראה 'ריאליסטי'. במקרה כזה, צריך להשתמש בפורמט תמונה רסטר, כמו PNG, JPEG, WebP או AVIF.
לתמונות רסטר אין את אותן תכונות נוחות של תמונות וידאו, שהן לא תלויות ברזולוציה או בזום. כשמשנים את הגודל של תמונה רסטר, הגרפיקה נראית מטושטשת ומחוספסת. לכן, יכול להיות שתצטרכו לשמור כמה גרסאות של תמונה רסטר ברזולוציות שונות כדי לספק למשתמשים חוויה אופטימלית.
ההשלכות של מסכים ברזולוציה גבוהה
יש שני סוגים שונים של פיקסלים: פיקסלים ב-CSS ופיקסלים במכשיר. פיקסל CSS אחד עשוי להתאים ישירות לפיקסל אחד במכשיר, או להיות מגובה על ידי כמה פיקסלים במכשיר. מה העניין? ככל שיש יותר פיקסלים במכשיר, כך הפרטים של התוכן המוצג במסך מפורטים יותר.
מסכים עם DPI גבוה (HiDPI) מניבים תוצאות יפות, אבל יש פשרה אחת ברורה: נכסי תמונות צריכים יותר פרטים כדי לנצל את מספר הפיקסלים הגבוה יותר במכשיר. החדשות הטובות הן שתמונות וקטוריות מתאימות באופן אידיאלי למשימה הזו, כי אפשר ליצור גרסת רינדור שלהן בכל רזולוציה עם תוצאות חדות. יכול להיות שתצטרכו לשלם על עלות עיבוד גבוהה יותר כדי ליצור גרסת רינדור עם פרטים עדינים יותר, אבל הנכס הבסיסי הוא זהה ולא תלוי ברזולוציה.
לעומת זאת, תמונות רסטר הן אתגר גדול יותר כי הן מקודדות את נתוני התמונה לפי פיקסל. לכן, ככל שמספר הפיקסלים גדול יותר, כך גודל הקובץ של תמונה רסטר גדול יותר. שימו לב להבדל בין נכס צילום שמוצג בגודל 100x100 פיקסלים (CSS):
| רזולוציית מסך | סה"כ פיקסלים | גודל הקובץ ללא דחיסה (4 בייטים לכל פיקסל) |
|---|---|---|
| 1x | 100 x 100 = 10,000 | 40,000 בייטים |
| 2x | 100 x 100 x 4 = 40,000 | 160,000 בייטים |
| 3x | 100 x 100 x 9 = 90,000 | 360,000 בייטים |
כשמעלים פי שניים את הרזולוציה של המסך הפיזי, המספר הכולל של הפיקסלים גדל פי ארבעה: פי שניים ממספר הפיקסלים האופקיים, כפול פי שניים ממספר הפיקסלים האנכיים. לכן, במסך '2x' לא רק מספר הפיקסלים הכפול נדרש, אלא פי ארבעה!
מה המשמעות של זה בפועל? מסכים ברזולוציה גבוהה מאפשרים לכם להציג תמונות יפות, וזו יכולה להיות תכונה נהדרת של המוצר. עם זאת, מסכים ברזולוציה גבוהה דורשים גם תמונות ברזולוציה גבוהה, ולכן:
- כשהדבר אפשרי, עדיף להשתמש בתמונות וקטוריות כי הן לא תלויות ברזולוציה ותמיד מניבות תוצאות חדות.
- אם נדרשת תמונה רסטר, יש להציג תמונות רספונסיביות.
מאפיינים של פורמטים שונים של תמונות רסטר
בנוסף לאלגוריתמים שונים של דחיסת נתונים מסוג lossy ו-lossless, פורמטים שונים של תמונות תומכים בתכונות שונות, כמו אנימציה וערוצים שקופים (אלפא). כתוצאה מכך, הבחירה ב'פורמט הנכון' לתמונה מסוימת היא שילוב של התוצאות החזותית המתאימות והדרישות הפונקציונליות.
| פורמט | שקיפות | Animation | דפדפן |
|---|---|---|---|
| PNG | כן | כן (APNG) | הכול |
| JPEG | לא | לא | הכול |
| WebP | כן | כן | כל הדפדפנים המודרניים. האם מותר להשתמש? |
| AVIF | כן | כן | כל הדפדפנים המודרניים. האם מותר להשתמש? |
יש שני פורמטים נתמכים של תמונות רסטר: PNG ו-JPEG. בנוסף לפורמטים האלה, דפדפנים מודרניים תומכים בפורמטים החדשים יותר של תמונות WebP ו-AVIF. בשני הפורמטים החדשים יש דחיסה טובה יותר באופן כללי ותכונות נוספות. אז באיזה פורמט כדאי להשתמש?
בדרך כלל, פורמטים של WebP ו-AVIF מספקים רמה טובה יותר של דחיסת נתונים מאשר פורמטים ישנים יותר, ולכן כדאי להשתמש בהם כשהדבר אפשרי. אפשר להשתמש בתמונות WebP או AVIF יחד עם תמונה בפורמט JPEG או PNG כחלופה. פרטים נוספים זמינים במאמר שימוש בתמונות WebP.
לגבי פורמטים ישנים יותר של תמונות, כדאי לשקול את האפשרויות הבאות:
- צריכים אנימציה? שימוש ברכיבי
<video>.- מה לגבי קובצי GIF? בפורמט GIF, לוח הצבעים מוגבל ל-256 צבעים לכל היותר, והקובץ שנוצר גדול בהרבה מאשר רכיבי
<video>. קובצי APNG כוללים יותר צבעים מאשר קובצי GIF, אבל הם גם גדולים בהרבה מפורמטים של סרטונים באיכות חזותית דומה. החלפת קובצי GIF מונפשים בסרטון
- מה לגבי קובצי GIF? בפורמט GIF, לוח הצבעים מוגבל ל-256 צבעים לכל היותר, והקובץ שנוצר גדול בהרבה מאשר רכיבי
- האם אתם צריכים לשמור על פרטים עדינים ברזולוציה הגבוהה ביותר? יש להשתמש בפורמט PNG או בפורמט WebP ללא אובדן נתונים.
- בפורמט PNG לא חלים אלגוריתמים של דחיסת נתונים עם אובדן מידע, מלבד הבחירה בגודל של לוח הצבעים. כתוצאה מכך, התמונה תהיה באיכות הגבוהה ביותר, אבל גודל הקובץ יהיה גדול בהרבה מפורמטים אחרים. חשוב להשתמש בהם בצורה מושכלת.
- ל-WebP יש מצב קידוד ללא אובדן נתונים שעשוי להיות יעיל יותר מ-PNG.
- אם נכס התמונה מכיל תמונות שמכילות צורות גיאומטריות, כדאי להמיר אותו לפורמט וקטור (SVG).
- אם נכס התמונה מכיל טקסט, צריך להפסיק ולחשוב מחדש. אי אפשר לבחור טקסט בתמונות, לחפש אותו או להגדיל אותו. אם אתם רוצים להעביר מראה מותאם אישית (למטרות מיתוג או מסיבות אחרות), השתמשו במקום זאת בגופן אינטרנט.
- האם אתם מבצעים אופטימיזציה של תמונה, צילום מסך או נכס תמונה דומה? יש להשתמש בפורמט JPEG, בפורמט WebP עם אובדן נתונים או בפורמט AVIF.
- בפורמט JPEG נעשה שימוש בשילוב של אופטימיזציה עם אובדן נתונים ואופטימיזציה ללא אובדן נתונים כדי להקטין את גודל הקובץ של נכס התמונה. כדאי לנסות כמה רמות איכות של קובצי JPEG כדי למצוא את האיזון הטוב ביותר בין איכות לגודל הקובץ של הנכס.
- WebP עם אובדן נתונים או AVIF עם אובדן נתונים הם חלופות מצוינות ל-JPEG לתמונות באיכות אינטרנט, אבל חשוב לזכור שבמצב אובדן נתונים חלק מהמידע מושלך כדי ליצור תמונות קטנות יותר. המשמעות היא שצבעים מסוימים עשויים להיות שונים מקבצים מקבילים בפורמט JPEG.
לסיום, חשוב לזכור שאם אתם משתמשים ב-WebView כדי להציג תוכן באפליקציה ספציפית לפלטפורמה, יש לכם שליטה מלאה על הלקוח ואתם יכולים להשתמש ב-WebP בלבד. Facebook ועוד רבים משתמשים ב-WebP כדי להעביר את כל התמונות שלהם באפליקציות שלהם – החיסכון בהחלט שווה את זה.
ההשפעה על המדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP)
התמונות יכולות להיות מועמדות ל-LCP. כלומר, גודל התמונה משפיע על זמן הטעינה שלה. כשתמונה היא מועמדת ל-LCP, קידוד יעיל של התמונה הזו חיוני לשיפור ה-LCP.
כדאי להשתדל ליישם את העצות שמפורטות במדריך הזה כדי שהביצועים החזותיים של הדף יהיו מהירים ככל האפשר לכל המשתמשים. מדד LCP הוא חלק מהביצועים החזותיים, כי הוא מודד את המהירות שבה מוצג האלמנט הגדול ביותר בדף (ולכן הבולט ביותר).