השאלה הראשונה שצריך לשאול את עצמכם היא אם באמת צריך תמונה כדי להשיג את האפקט שאתם רוצים. אם אפשר להסיר משאב תמונה, שלרוב דורש מספר גדול של בייטים ביחס ל-HTML, ל-CSS, ל-JavaScript ולנכסים אחרים בדף, זו תמיד אסטרטגיית האופטימיזציה הכי טובה. עם זאת, תמונה שמוצבת במקום הנכון יכולה להעביר יותר מידע מאלף מילים, ולכן חשוב למצוא את האיזון הנכון.
לאחר מכן, כדאי לשקול אם יש טכנולוגיה חלופית שיכולה לספק תוצאות טובות יותר, אבל בצורה יעילה יותר:
- אפשר להשתמש באפקטים של CSS (כמו הצללות או מעברי צבע) ובאנימציות של CSS כדי ליצור נכסים שלא תלויים ברזולוציה, שתמיד נראים חדים בכל רזולוציה ובכל רמת זום, ולרוב בגודל של חלק קטן מהבייטים שנדרשים לקובץ תמונה.
- גופני אינטרנט מאפשרים להשתמש בגופנים יפים תוך שמירה על היכולת לבחור, לחפש ולשנות את גודל הטקסט – שיפור משמעותי בשימושיות.
אם אתם מקודדים טקסט בנכס תמונה, כדאי לעצור ולחשוב מחדש. טיפוגרפיה טובה היא קריטית לעיצוב טוב, למיתוג ולקריאות, אבל טקסט בתמונות מספק חוויית משתמש גרועה: אי אפשר לבחור את הטקסט, אי אפשר לחפש אותו, אי אפשר להגדיל אותו, הוא לא נגיש והוא לא מתאים למכשירים עם DPI גבוה. השימוש בגופנים לאינטרנט דורש סט אופטימיזציות משלו, אבל הוא נותן מענה לכל החששות האלה ותמיד עדיף להשתמש בו להצגת טקסט.
בחירת פורמט התמונה הנכון
אם אתם בטוחים שתמונה היא האפשרות הנכונה, כדאי לבחור בקפידה את סוג התמונה המתאים.
- גרפיקה וקטורית משתמשת בקווים, בנקודות ובפוליגונים כדי לייצג תמונה.
- גרפיקה רסטרית מייצגת תמונה על ידי קידוד של הערכים הנפרדים של כל פיקסל ברשת מלבנית.
לכל פורמט יש יתרונות וחסרונות משלו. פורמטים וקטוריים מתאימים במיוחד לתמונות שמורכבות מצורות גיאומטריות פשוטות יותר, כמו לוגו, טקסט או סמלים. הן מספקות תוצאות חדות בכל רזולוציה ובכל הגדרת זום, ולכן הן פורמט אידיאלי למסכים ברזולוציה גבוהה ולנכסים שצריך להציג בגדלים שונים.
עם זאת, פורמטים וקטוריים לא מתאימים כשהסצנה מורכבת (למשל, תמונה): כמות התגיות ב-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 יש מצב קידוד lossless שעשוי להיות יעיל יותר מ-PNG.
- אם נכס התמונה מכיל תמונות שמורכבות מצורות גיאומטריות, כדאי להמיר אותו לפורמט וקטורי (SVG).
- אם נכס התמונה מכיל טקסט, כדאי לעצור ולחשוב מחדש. אי אפשר לבחור, לחפש או להגדיל טקסט בתמונות. אם אתם צריכים להעביר מראה מותאם אישית (למיתוג או מסיבות אחרות), השתמשו בגופן אינטרנט במקום זאת.
- האם אתם מבצעים אופטימיזציה של תמונה, צילום מסך או נכס תמונה דומה? מומלץ להשתמש בפורמט JPEG, WebP עם אובדן נתונים או AVIF.
- פורמט JPEG משתמש בשילוב של אופטימיזציה עם אובדן נתונים ואופטימיזציה ללא אובדן נתונים כדי להקטין את גודל הקובץ של נכס התמונה. כדאי לנסות כמה רמות איכות של JPEG כדי למצוא את האיזון הטוב ביותר בין איכות לגודל הקובץ של הנכס.
- פורמטים WebP או AVIF עם אובדן נתונים הם חלופות מצוינות ל-JPEG לתמונות באיכות אינטרנט, אבל חשוב לזכור שבמצב עם אובדן נתונים חלק מהמידע נמחק כדי להקטין את התמונות. המשמעות היא שצבעים מסוימים עשויים להיות שונים מצבעים מקבילים ב-JPEG.
לבסוף, חשוב לדעת שאם אתם משתמשים ב-WebView כדי להציג תוכן באפליקציה הספציפית לפלטפורמה שלכם, יש לכם שליטה מלאה בלקוח ואתם יכולים להשתמש ב-WebP באופן בלעדי. פייסבוק ועוד הרבה חברות משתמשות ב-WebP כדי להציג את כל התמונות באפליקציות שלהן – החיסכון בהחלט שווה את זה.
ההשפעה על המדד Largest Contentful Paint (LCP)
יכול להיות שהתמונות הן מועמדות ל-LCP. כלומר, גודל התמונה משפיע על זמן הטעינה שלה. כשתמונה היא מועמדת ל-LCP, קידוד יעיל של התמונה הזו הוא חיוני לשיפור ה-LCP.
מומלץ ליישם את ההמלצות במדריך הזה כדי שהביצועים של הדף יהיו מהירים ככל האפשר עבור כל המשתמשים. ה-LCP הוא חלק מביצועים תפיסתיים, כי הוא מודד כמה מהר מוצג האלמנט הגדול ביותר (ולכן הכי בולט) בדף.