השאלה הראשונה שצריך לשאול את עצמכם היא אם תמונה נדרשת בפועל כדי להשיג את האפקט הרצוי. עיצוב טוב הוא פשוט ותמיד יניב את הביצועים הטובים ביותר. אם אפשר להסיר משאב של תמונה, שלרוב מצריך מספר גדול של בייטים ביחס ל-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 בייטים |
| פי 3 | 100 x 100 x 9 = 90,000 | 360,000 בייטים |
כשאנחנו מכפילים את הרזולוציה של המסך הפיזי, מספר הפיקסלים הכולל גדל בפקטור של ארבעה: מספר הפיקסלים האופקיים כפול מספר הפיקסלים האנכיים. לכן, המסך "2x" לא רק מכפיל את עצמו, אלא מכפיל את מספר הפיקסלים הנדרשים!
אז מה זה אומר בפועל? מסכים ברזולוציה גבוהה מאפשרים להציג תמונות יפות, שיכולות להיות תכונת מוצר מעולה. עם זאת, למסכים ברזולוציה גבוהה נדרשות גם תמונות ברזולוציה גבוהה, ולכן:
- כדאי להעדיף תמונות וקטוריות ככל האפשר, כי הן לא תלויות ברזולוציה ותמיד מספקות תוצאות חדות.
- אם נדרשת תמונה מסוג רשת נקודות, מציגים תמונות רספונסיביות.
תכונות של פורמטים שונים של תמונות מסוג רשת נקודות
בנוסף לאלגוריתמים שונים של דחיסה עם אובדן נתונים ודחיסה ללא אובדן נתונים, פורמטים שונים של תמונות תומכים בתכונות שונות, כמו ערוצי אנימציה ושקיפות (אלפא). כתוצאה מכך, הבחירה ב "פורמט המתאים" לתמונה מסוימת היא שילוב של תוצאות חזותיות רצויות ודרישות פונקציונליות.
| מבנה הקורס | שקיפות | 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 לא מפעיל אלגוריתמים לדחיסה עם אובדן נתונים, מעבר לגודל של לוח הצבעים שנבחר. כתוצאה מכך, היא תפיק תמונה באיכות הגבוהה ביותר, אבל בעלות קובץ גדול יותר באופן משמעותי מאשר פורמטים אחרים. השתמשו בזהירות.
- ל-WebP יש מצב קידוד ללא אובדן נתונים שעשוי להיות יעיל יותר מ-PNG.
- אם נכס התמונות מכיל תמונות שמורכבות מצורות גאומטריות, כדאי להמיר אותן לפורמט וקטור (SVG).
- אם נכס התמונות מכיל טקסט, צריך לעצור את הסרטון ולבדוק אותו מחדש. טקסט בתמונות אינו ניתן לבחירה, לחיפוש או ל "ניתן לשינוי מרחק". אם אתם צריכים להעביר מראה מותאם אישית (לצורכי מיתוג או מסיבות אחרות), השתמשו במקום זאת בגופן אינטרנט.
- האם ניסית לבצע אופטימיזציה של תמונה, צילום מסך או נכס תמונות דומה? שימוש בפורמט JPEG, Lossy WebP או AVIF.
- בפורמט JPEG, המערכת משתמשת בשילוב של אופטימיזציה עם Lossless ו-Lostless כדי לצמצם את גודל הקובץ של נכס התמונות. כדאי לנסות כמה רמות של איכות JPEG כדי למצוא את האיזון בין איכות התמונה הטובה ביותר לבין גודל הקובץ.
- ייתכן ש-WebP ללא אובדן או AVIF יהיה חלופות מקובלות JPEG, אבל חשוב לזכור שמצב הפסד של WebP מוחק באופן ספציפי חלק מהמידע של Chroma כדי ליצור תמונות קטנות יותר. כלומר, הצבעים שנבחרו לא יכולים להיות זהים לפורמט JPEG מקביל.
לסיום, שימו לב שאם אתם משתמשים ב-WebView כדי לעבד תוכן באפליקציה הספציפית לפלטפורמה שלכם, יש לכם שליטה מלאה על הלקוח ואתם יכולים להשתמש ב-WebP באופן בלעדי! ב-Facebook ובהרבה חברות אחרות משתמשים ב-WebP כדי להציג את כל התמונות בתוך האפליקציות שלהם – החיסכון משתלם.
ההשפעה על Largest Contentful Paint (LCP)
התמונות יכולות להיות מועמדות ל-LCP. המשמעות היא שגודל התמונה משפיע על זמן הטעינה שלה. כשתמונה היא מועמדת LCP, חשוב לשפר את הקידוד שלה באופן יעיל לצורך שיפור ה-LCP.
עליך לשאוף ליישם את העצות שבמאמר זה כדי שהביצועים של דף יפעלו במהירות האפשרית לכל המשתמשים. LCP הוא חלק מביצועים תפיסתיים, מפני שהוא מודד את המהירות שבה מוצג הרכיב הגדול ביותר (ולכן ניתן להבחין בו) ביותר בדף.