השאלה הראשונה שאתם צריכים לשאול את עצמכם היא אם תמונה, למעשה, כדי להשיג את האפקט הרצוי. עיצוב טוב הוא פשוט והוא תמיד יניב את הביצועים הטובים ביותר. אם אפשר למחוק משאב של תמונה, שלרוב דורש מספר גדול של בייטים ביחס ל-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" והמסך שלו לא רק מוכפל, אלא גם מגדיל את מספר הפיקסלים הדרושים.
אז מה זה אומר בפועל? מסכים ברזולוציה גבוהה מאפשרים לך להציג תמונות יפות, שיכולות להיות תכונה נהדרת למוצר. עם זאת, במסכים ברזולוציה גבוהה יש צורך גם בתמונות ברזולוציה גבוהה, כך:
- מומלץ להשתמש בתמונות וקטוריות אם אפשר, כי הן לא תלויות ברזולוציה ותמיד מספקות תוצאות חדות.
- אם נדרשת תמונה מסוג רשת נקודות, יש להציג תמונות רספונסיביות.
תכונות של פורמטים שונים של תמונות בשיטת רסטר
בנוסף לאלגוריתמים שונים של דחיסת נתונים מסוג Lossless ו-Lostless, פורמטים שונים של תמונות תומכים בתכונות שונות, כמו ערוצי אנימציה וערוצי שקיפות (אלפא). כתוצאה מכך, הבחירה ב"פורמט הנכון" לתמונה מסוימת, היא שילוב של תוצאות חזותיות רצויות ודרישות פונקציונליות.
| פורמט | שקיפות | Animation | דפדפן |
|---|---|---|---|
| PNG | כן | לא | הכול |
| JPEG | לא | לא | הכול |
| WebP | כן | כן | כל הדפדפנים המתקדמים. עיינו בקטע האם אפשר להשתמש? |
| AVIF | כן | כן | לא. אפשר לעיין בקטע האם אוכל להשתמש? |
קיימים שני פורמטים אוניברסליים של תמונות מסוג רשת: PNG ו-JPEG. בנוסף לפורמטים האלה, דפדפנים מודרניים תומכים בפורמט החדש יותר WebP, אבל רק חלקם תומכים בפורמט AVIF החדש יותר. בשני הפורמטים החדשים יש דחיסה כוללת טובה יותר ותכונות נוספות. אז באיזה פורמט כדאי להשתמש?
בדרך כלל, דחיסת נתונים טובה יותר ב-WebP וב-AVIF מספקת דחיסת נתונים טובה יותר מפורמטים ישנים יותר, וצריך להשתמש בו כשזה אפשרי. אפשר להשתמש בתמונות WebP או AVIF יחד עם תמונה בפורמט JPEG או PNG כחלופה. פרטים נוספים זמינים במאמר שימוש בתמונות WebP.
מבחינת פורמטים ישנים של תמונות, כדאי לבדוק את הדברים הבאים:
- אתם צריכים אנימציה? משתמשים ברכיבי
<video>.- מה לגבי GIF? קובץ GIF מגביל את לוח הצבעים ל-256 צבעים לכל היותר.
והוא יוצר קבצים גדולים יותר באופן משמעותי מאשר רכיבי
<video>. צפייה החלפת קובצי GIF מונפשים בסרטון.
- מה לגבי GIF? קובץ GIF מגביל את לוח הצבעים ל-256 צבעים לכל היותר.
והוא יוצר קבצים גדולים יותר באופן משמעותי מאשר רכיבי
- האם צריך לשמור על פרטים מדויקים ברזולוציה הגבוהה ביותר? שימוש בפורמט PNG או WebP ללא אובדן מידע.
- קובץ PNG לא מפעיל אלגוריתמים של דחיסת נתונים מסוג Lossing מעבר לבחירת הגודל של לוח הצבעים. כתוצאה מכך, הוא יפיק תמונה באיכות הגבוהה ביותר, אבל במחיר של קובץ גדול יותר באופן משמעותי מפורמטים אחרים. חשוב להשתמש בזהירות.
- ל-WebP יש מצב קידוד ללא אובדן מידע שעשוי להיות יעיל יותר מ-PNG.
- אם נכס התמונות מכיל תמונות שמורכבות מצורות גאומטריות, כדאי להמיר אותו לפורמט וקטורי (SVG).
- אם נכס התמונות מכיל טקסט, צריך לעצור את הצילום ולבחון מחדש. טקסט בתמונות לא ניתן לבחירה, לחיפוש או לשינוי מרחק התצוגה. אם אתם רוצים ליצור מראה מותאם אישית (לצורכי מיתוג או מסיבות אחרות), השתמשו במקום זאת בגופן אינטרנט.
- אתם מבצעים אופטימיזציה של תמונה, צילום מסך או נכס תמונות דומה? צריך להשתמש בפורמט JPEG, Losty WebP או AVIF עם אובדן נתונים.
- קובץ JPEG משתמש בשילוב של אופטימיזציה עם אובדן נתונים (Lostyless) ואופטימיזציה ללא אובדן כדי להקטין את גודל הקובץ של נכס התמונות. כדאי לנסות כמה רמות איכות JPEG כדי למצוא את האיזון בין האיכות הטובה ביותר לבין גודל הקובץ עבור הנכס.
- יכול להיות שחלופות JPEG יתקבלו עם WebP עם אובדן או AVIF, אבל חשוב לזכור שמצב Lossy של WebP במיוחד ממחק חלק מהמידע של Chroma כדי ליצור תמונות קטנות יותר. המשמעות היא שיכול להיות שצבעים נבחרים לא יהיו זהים לפורמט JPEG מקביל.
לסיום, שימו לב שאם אתם משתמשים ב-WebView כדי לעבד תוכן באפליקציה הספציפית לפלטפורמה שלכם, יש לכם שליטה מלאה על הלקוח ותוכלו להשתמש ב-WebP באופן בלעדי! Facebook ורבים אחרים משתמשים ב-WebP כדי להציג את כל התמונות שלהם בתוך האפליקציות שלהם – החיסכון שווה מאוד.
ההשפעה על Largest Contentful Paint (LCP)
התמונות יכולות להיות מועמדות ל-LCP. המשמעות היא שגודל התמונה משפיע על זמן הטעינה שלה. אם תמונה היא מועמדים ל-LCP, חשוב מאוד לקודד את התמונה בצורה יעילה כדי לשפר את ה-LCP.
מומלץ ליישם את העצות שמתוארות במאמר הזה כדי לשפר את התחושה של הביצועים של דף לכל המשתמשים במהירות האפשרית. מדד ה-LCP הוא חלק מביצועי התפיסה, מכיוון שהוא מודד את המהירות שבה מוצג הרכיב הגדול ביותר (וכתוצאה מכך הבולט ביותר) בדף.