בחירת פורמט התמונה המתאים

Ilya Grigorik

Jeremy Wagner

השאלה הראשונה שאתם צריכים לשאול את עצמכם היא אם תמונה, למעשה, כדי להשיג את האפקט הרצוי. אם אפשר למחוק משאב של תמונה, שלרוב דורש מספר גדול של בייטים ביחס ל-HTML, ל-CSS, ל-JavaScript ולנכסים אחרים בדף, זו תמיד אסטרטגיית האופטימיזציה הטובה ביותר. עם זאת, תמונה שמוצבת בצורה נכונה יכולה גם להעביר מידע רב יותר מאלף מילים, אז זה תלוי בך למצוא את האיזון הזה.

בשלב הבא, כדאי לבדוק אם יש טכנולוגיה חלופית שיכולה לספק תוצאות טובות יותר, אבל בצורה יעילה יותר:

• אפקטים של CSS (כמו צלליות או הדרגתיות) ואנימציות של CSS. אפשר להשתמש בו כדי ליצור נכסים שלא תלויים ברזולוציה ותמיד נראים חדים בכל רזולוציה ורמת זום. בחלק מהבייטים שנדרש על ידי קובץ התמונה.
• גופני אינטרנט מאפשרים להשתמש בגופנים יפים תוך שמירה על היכולת לבחור, לחפש, ולשנות את גודל הטקסט - שיפור משמעותי בנוחות השימוש.

אם נתקלתם פעם בקידוד טקסט בנכס תמונות, נסו לעצור את התהליך ולבדוק אותו מחדש. טיפוגרפיה טובה חיונית לעיצוב, למיתוג ולקריאות טובים, אבל טקסט בתמונות מספק חוויית משתמש גרועה: הטקסט אינו ניתן לבחירה, לא ניתן לחיפוש, לא ניתן לשינוי מרחק התצוגה, לא נגיש, ולא ידידותי למכשירים עם DPI גבוה. כדי להשתמש בגופן אינטרנט צריך לבצע אופטימיזציה משלו, אבל היא מטפלת בכל החששות האלה ותמיד טובה יותר להצגת הטקסט.

בחירת פורמט התמונה המתאים

אם אתם בטוחים שהאפשרות להשתמש בתמונה היא הנכונה, עליכם לבחור בקפידה את סוג התמונה המתאים לעבודה.

• גרפיקה וקטורית להשתמש בקווים, נקודות ופוליגונים כדי לייצג תמונה.
• גרפיקה מסוג רסטר שמייצגת תמונה באמצעות קידוד הערכים הנפרדים של כל פיקסל ברשת מלבנית.

לכל פורמט יש יתרונות וחסרונות משלו. פורמטים וקטוריים מתאימים במיוחד לתמונות עם צורות גיאומטריות פחות מורכבות, כמו סמלי לוגו, טקסט או סמלים. הם מספקים תוצאות חדות בכל רזולוציה וזום ולכן הם פורמט אידיאלי למסכים ולנכסים ברזולוציה גבוהה שצריכים להיות מוצגים בגדלים שונים.

עם זאת, פורמטים וקטוריים מתקצרים כשהסצנה מורכבת (לדוגמה, תמונה): כמות תגי העיצוב של SVG לתיאור כל הצורות יכולה להיות גבוהה מאוד והפלט עדיין עשוי שלא להיראות "פוטוריאליסטי". במקרה כזה, כדאי להשתמש בפורמט של תמונה מסוג רסטר כמו PNG, JPEG, WebP או AVIF.

לתמונות רסטר אין אותם מאפיינים נחמדים של רזולוציה או התמקדות בזום —כשמגדילים תמונה בפורמט רשת נקודות, רואים גרפיקה משוננת ומטושטשת. כתוצאה מכך, ייתכן שיהיה עליך לשמור גרסאות מרובות של תמונת רשת עם רזולוציות שונות כדי לספק למשתמשים את החוויה האופטימלית.

ההשלכות של מסכים עם רזולוציה גבוהה

יש שני סוגים של פיקסלים: פיקסלים של CSS ופיקסלים של מכשירים. פיקסל CSS יחיד עשוי להתאים ישירות לפיקסל בודד במכשיר, או שיכול להיות מגובה על ידי כמה פיקסלים של מכשיר. מה המטרה? ובכן, ככל שיש יותר פיקסלים במכשיר, כך הפרטים קטנים יותר של התוכן שמוצג על המסך.

מסכים עם DPI גבוה (HiDPI) מניבים תוצאות יפות, אבל יש יתרונות מרכזיים אחדים: בנכסי תמונות נדרש יותר פרטים כדי לנצל את מספר הפיקסלים הגבוה יותר במכשיר. החדשות הטובות הן שתמונות וקטור הן אידיאלית למשימה הזו, כי ניתן לעבד אותם בכל רזולוציה עם תוצאות חדות – יכול להיות שהעיבוד של הפרטים שתקבלו יהיה גבוה יותר, אבל הנכס הבסיסי זהה ולא תלוי ברזולוציה.

מצד שני, תמונות ברשת נקודות אתגר הרבה יותר מכיוון שהן מקודדות נתוני תמונה על בסיס פיקסל בודד. לכן, ככל שמספר הפיקסלים גדול יותר, כך גודל הקובץ של תמונת רשת גדול יותר. כדאי להביא בחשבון את ההבדלים בין נכס תמונות שמוצג בגודל 100x100 פיקסלים (CSS):

כשאנחנו מכפילים את הרזולוציה של המסך הפיזי, המספר הכולל של הפיקסלים גדל בגורם של ארבעה: כפול מספר הפיקסלים האופקיים, כפול מספר הפיקסלים האנכיים. כלומר, " 2x" והמסך שלו לא רק מוכפל, אלא גם מגדיל את מספר הפיקסלים הדרושים.

אז מה זה אומר בפועל? מסכים ברזולוציה גבוהה מאפשרים לכם להציג תמונות יפהפיות, שיכולות להיות תכונה מעולה של המוצר. עם זאת, במסכים ברזולוציה גבוהה יש צורך גם בתמונות ברזולוציה גבוהה, כך:

• מומלץ להשתמש בתמונות וקטוריות אם אפשר, כי הן לא תלויות ברזולוציה ותמיד מספקות תוצאות חדות.
• אם נדרשת תמונה מסוג רשת נקודות, יש להציג תמונות רספונסיביות.

תכונות של פורמטים שונים של תמונות בשיטת רסטר

בנוסף לאלגוריתמים שונים של דחיסת נתונים מסוג Lossless ו-Lostless, פורמטים שונים של תמונות תומכים בתכונות שונות, כמו ערוצי אנימציה וערוצי שקיפות (אלפא). כתוצאה מכך, הבחירה ב"פורמט הנכון" לתמונה מסוימת, השילוב של התוצאות החזותיות המתאימות והדרישות הפונקציונליות.

יש שני פורמטים אוניברסליים של תמונות מסוג רסטר: PNG ו-JPEG. בנוסף לפורמטים האלה, דפדפנים מודרניים תומכים גם בפורמטים החדשים יותר של תמונות WebP ו-AVIF. בשני הפורמטים החדשים יש דחיסה כוללת טובה יותר ותכונות נוספות. אז באיזה פורמט כדאי להשתמש?

בדרך כלל, דחיסת נתונים טובה יותר ב-WebP וב-AVIF מספקת דחיסת נתונים טובה יותר מפורמטים ישנים יותר, וצריך להשתמש בו כשזה אפשרי. אפשר להשתמש בתמונות WebP או AVIF יחד עם תמונה בפורמט JPEG או PNG כחלופה. פרטים נוספים זמינים במאמר שימוש בתמונות WebP.

מבחינת פורמטים ישנים של תמונות, כדאי לבדוק את הדברים הבאים:

1. אתם צריכים אנימציה? משתמשים ברכיבי <video>.
   • מה לגבי GIF? קובץ GIF מגביל את לוח הצבעים ל-256 צבעים לכל היותר. והוא יוצר קבצים גדולים יותר באופן משמעותי מאשר רכיבי <video>. APNG מציע יותר צבעים מאשר GIF, אבל הוא גם גדול משמעותית מסרטון בפורמטים של איכות ויזואלית שוות-ערך במידה סבירה. צפייה החלפת קובצי GIF מונפשים בסרטונים.
2. האם צריך לשמור על פרטים מדויקים ברזולוציה הגבוהה ביותר? שימוש בפורמט PNG או WebP ללא אובדן מידע.
   • קובץ PNG לא מפעיל אלגוריתמים של דחיסת נתונים מסוג Lossing מעבר לבחירת הגודל של לוח הצבעים. כתוצאה מכך, הוא יפיק תמונה באיכות הגבוהה ביותר, אבל במחיר של קובץ גדול יותר באופן משמעותי מפורמטים אחרים. חשוב להשתמש בזהירות.
   • ל-WebP יש מצב קידוד ללא אובדן מידע שעשוי להיות יעיל יותר מ-PNG.
   • אם נכס התמונות מכיל תמונות שמורכבות מצורות גאומטריות, כדאי להמיר אותו לפורמט וקטורי (SVG).
   • אם נכס התמונות מכיל טקסט, צריך לעצור את הצילום ולבחון מחדש. טקסט בתמונות לא ניתן לבחירה, לחיפוש או לשינוי מרחק התצוגה. אם אתם צריכים ליצור מראה מותאם אישית (לצורכי מיתוג או מסיבות אחרות), השתמשו במקום זאת בגופן אינטרנט.
3. אתם מבצעים אופטימיזציה של תמונה, צילום מסך או נכס תמונות דומה? צריך להשתמש בפורמט JPEG, Lossy WebP או AVIF.
   • קובץ JPEG משתמש בשילוב של אופטימיזציה עם אובדן נתונים ( Lossless) ואופטימיזציה ללא אובדן נתונים כדי להקטין את גודל הקובץ של נכס התמונות. כדאי לנסות כמה רמות איכות JPEG כדי למצוא את האיזון בין האיכות הטובה ביותר לבין גודל הקובץ של הנכס.
   • קובץ AVIF עם איבוד נתונים (VP) או אובדן נתונים הוא חלופות טובות ל-JPEG לתמונות באיכות אינטרנט, אבל חשוב לזכור שמצב איבוד נתונים מוחק חלק מהמידע כדי ליצור תמונות קטנות יותר. המשמעות היא שיכול להיות שצבעים נבחרים לא יהיו זהים לפורמט JPEG מקביל.

לסיום, שימו לב שאם אתם משתמשים ב-WebView כדי לעבד תוכן באפליקציה הספציפית לפלטפורמה שלכם, יש לכם שליטה מלאה על הלקוח ותוכלו להשתמש ב-WebP באופן בלעדי! פייסבוק ורבים אחרים משתמשים ב-WebP כדי להציג את כל התמונות שלהם בתוך האפליקציות שלהם – החיסכון שווה מאוד.

ההשפעה על Largest Contentful Paint (LCP)

התמונות יכולות להיות מועמדות ל-LCP. המשמעות היא שגודל התמונה משפיע על זמן הטעינה שלה. אם תמונה היא מועמדים ל-LCP, חשוב מאוד לקודד את התמונה בצורה יעילה כדי לשפר את ה-LCP.

עליך לנסות ליישם את העצות שמתוארות במדריך זה, כדי שהביצועים התפיסתיים של הדף יהיו מהירים ככל האפשר עבור כל המשתמשים. מדד ה-LCP הוא חלק מביצועי התפיסה, מכיוון שהוא מודד את המהירות שבה מוצג הרכיב הגדול ביותר (וכתוצאה מכך הבולט ביותר) בדף.