מסכים עם צפיפות פיקסלים גבוהה הופכים במהירות לנורמה. יוצרי התוכן צריכים להתאים לעובדה הזו. זהו מדריך קצר שמסביר איך להציג כיום תמונות באיכות גבוהה באינטרנט, בלי להשתמש ב-polyfills, ב-JavaScript, בפריצות ל-CSS ובתכונות דפדפן שעדיין לא יושמו. במילה אחת: ללא שינויים מהותיים בתהליך העבודה שלכם.
כיום יש הרבה הצעות לתמונות רספונסיביות, שרבות מהן כרוכות שינויים משמעותיים מבחינת מפתח האתרים. קשה ליישם את המאפיין של מעקב סטנדרטי srcset
<img>, במיוחד בזכות המורכבות של הבחירה הנוספת של srcset שמבוססת על אזור התצוגה:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
למרות שמאפיין ה-CSS image-set משתמש רק ב-devicePixelRatio כדי להחליט איזו תמונה לטעון, הוא עדיין מאלץ את המפתחים לכתוב הרבה תגי עיצוב נוספים לכל תמונה.
הצעות אחרות, כמו האלמנט <picture>, ארוכות עוד יותר.
בנוסף, הם לא מעקב אחר תקנים, ולכן הזמינות שלהם בכל מקום רחוקה יותר ממאפיין srcset. פתרונות JavaScript ופתרונות בצד השרת הם החלופה היחידה, אבל לגישות האלה יש חסרונות משלהן, כמו במאמרים אחרים.
במאמר הזה נפרט כמה שימושים בתמונות שבדרך כלל אפשר למצוא באינטרנט, ונציע פתרונות פשוטים שפועלים במסכים עם צפיפות פיקסלים גבוהה וגם במסכים רגילים. לצורך דיון זה, כל מכשיר שמדווח על window.devicePixelRatio גדול מ-1 יכול להיחשב כ-DPI גבוה, כי המשמעות היא שהפיקסלים ב-CSS לא זהים לפיקסלים במכשיר, ושהמערכת מתאימה את גודל התמונות.
סיכום הקווים המנחים:
- אם אפשר, השתמשו ב-CSS/SVG במקום בתמונות בפורמט רסטר.
- כברירת מחדל, כדאי להשתמש בתמונות שמותאמות למסכים בצפיפות גבוהה.
- כדאי להשתמש בקובצי PNG לשרטוטים פשוטים ולפיקסלים ארט (למשל, סמלי לוגו).
- צריך להשתמש בקובצי JPEG דחוסים בתמונות במגוון צבעים (כגון תמונות).
- יש להגדיר תמיד גדלים מפורשים (באמצעות CSS או HTML) בכל רכיבי התמונה.
ציורים פשוטים ופיקסל ארט
לעיתים קרובות אפשר להימנע לחלוטין משימוש בתמונות קטנות באמצעות תכונות CSS או SVG.
לדוגמה, אין צורך להשתמש בתמונות בפינות מעוגלות, כי יש תמיכה רחבה במאפיין CSS border-radius. באופן דומה, יש תמיכה בגופנים מותאמים אישית, ולכן לא מומלץ להשתמש בטקסט "תמונה".
עם זאת, במקרים מסוימים, כמו סמלי לוגו, יכול להיות שתמונה היא הדרך היחידה להעביר. לדוגמה, ללוגו של Chrome יש גודל טבעי של 256x256. בצג Retina, ניתן לראות את קווי המתאר של הקו באלכסונים ובעקומות, שנראה קטוע וגרוע, במיוחד בהשוואה לטקסט שעבר רינדור פריים:
מידות טבעיות: 256x256px, גודל הנכס: 31 kB, פורמט: PNG
משוכנע? טוב. עכשיו נשתמש בתמונה בצפיפות גבוהה. יכול להיות שתתפתו לחסוך במקום על ידי אחסון הלוגו כקובץ JPEG, אבל לא כדאי לעשות זאת, כי שמירת סמלי לוגו וגרפיקה אחרת בפורמט אבדן בדרך כלל גורמת ליצירת ארטיפקטים. במקרה הזה הגזמתי את הבעיה על ידי שימוש בדחיסה גבוהה מאוד, אבל שמתי לב לפסים בהדרגה, לכתמים על רקעים לבנים ולקווים המלוכלכים:
מידות טבעיות: 512x512px, גודל הנכס: 13 kB, פורמט: JPEG
כשמדובר בתמונות קטנות יחסית, מומלץ להשתמש בתמונות בפורמט PNG פי 2. שימו לב שההבדל בגודל בין קובץ PNG של 1x ל-2x הוא בדרך כלל די גבוה (52KB במקרה הזה). עם זאת, במקרה של לוגו, מדובר בפנים של האתר שלך, והוא הדבר הראשון שהמבקרים יראו. אם תדלגו יותר מדי על איכות בתמורה לגודל, זה יהיה גם הדבר האחרון שהמבקרים יראו!
זהו הלוגו של Chrome במלואו
מידות טבעיות: 512x512px, גודל הנכס: 83 kB, פורמט: PNG
תגי העיצוב הנדרשים לעיבוד שלמעלה הם:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
הערה: ציינתי רוחב וגובה על התמונה. זה הכרחי כי הגודל הטבעי של התמונה הוא 512 פיקסלים. הוא מתאים גם לביצועים כי למנוע העיבוד יש הבנה טובה של גודל האלמנט, ולא צריך להתאמץ לחשב אותו.
אפשרות אופטימיזציה אפשרית אחת היא להקטין את התמונה של 24 סיביות ל-PNG של 8 ביט. זה עובד בתמונות במספר קטן של צבעים, כולל הלוגו של Chrome. תוכלו להשתמש בכלי כמו http://pngquant.org/ כדי לבצע את האופטימיזציה הזו. כאן אפשר לראות קצת פסים, אבל הקובץ הוא רק 13kB, חיסכון עצום פי 6 בהשוואה לקובץ PNG המקורי בגודל 512x512.
מידות טבעיות: 512x512px, גודל הנכס: 13 kB, פורמט: PNG,
8-bit palette
תמונות במגוון צבעים
כתבתי מאמר ב-HTML5Rocks שסקרתי כמה טכניקות שונות של תמונות רספונסיביות, וחקרתי את הנושא של דחיסת תמונות JPEG ביחס של 1x ו-2x ולהשוות בין הגדלים שמתקבלים לבין האיכות החזותית. הנה משבצת אחת כזו מהמאמר שלמעלה:
תייגתי את התמונות לפי רמת הדחיסה שלהן (מצוינת על ידי איכות JPEG), הגודל שלהן (בבייטים) ודעה הסובייקטיבית שלי על הדיוק החזותי ההשוואה (דירוג לפי מספרים). הקטע המעניין כאן הוא שהתמונה בגודל 2x דחוסה מאוד (תווית 3) קטנה יותר בגודל ונראית יותר טוב יותר מתמונה לא דחוסה בגודל 1x (תווית 4). במילים אחרות, בין תמונות 4 ל-3 הצלחנו לשפר את איכות התמונה על ידי הכפלה של כל מימד והגדלת הדחיסה באופן משמעותי, ובמקביל הקטנת הגודל ב-2KB.
דחיסה, מידות ואיכות ויזואלית
רציתי לקבל קצת יותר תובנות לגבי ההבדלים בין רמת הדחיסה, מידות התמונה, איכות חזותית וגודל תמונה. הרצתי מחקר עם ההשערה הבאה, על סמך המחקר שלמעלה:
השערה
אם יש מספיק דחיסה, תמונה בגודל 2x תיראה שווה-ערך לאותה תמונה בגודל 1x בדחיסה אחרת (נמוכה יותר). עם זאת, במקרה כזה, גודל התמונה הדחוסה מאוד של 2x יהיה קטן יותר מתמונה בגודל 1x.
התהליך
- בהינתן תמונה שגדולה פי 2, יוצרים תמונה שגודלה 1x.
- אפשר לדחוס את שתי התמונות ברמות שונות.
- יצירת דף בדיקה שמציג את שתי קבוצות התמונות זו לצד זו.
- מוצאים את המקום בשתי הקבוצות שבו התמונות מקבילות.
- חשוב לשים לב לגדלים מקבילים של תמונות ולרמות הדחיסה שלהם.
- נסה אותו גם במסך 1x וגם במסך 2x.
בניתי אפליקציה להשוואת תמונות זו לצד זו, שדומה לתצוגת ההשוואה של Lightroom. הכוונה היא להציג תמונה שגודלה 1x ו-2x זו לצד זו, אבל גם לאפשר לך להגדיל כל קטע בתמונה כדי לקבל פרטים נוספים. אפשר גם לבחור בין פורמטים JPEG ו-WebP ולשנות את איכות הדחיסה כדי לראות השוואות בין גודל הקובץ ואיכות התמונה. הרעיון הוא לשנות את ההגדרות בכמה תמונות, להבין מהי איכות הדחיסה, שינוי קנה המידה והפורמט לעומת איכות התמונה שאתם מעדיפים, ולהשתמש בהגדרה הזו בכל התמונות.
הכלי עצמו זמין לך לשחק איתו. אפשר להתקרב לתמונה על ידי בחירת אזור משנה להגדלת התצוגה.
ניתוח
אני יכול לומר מראש שאיכות התמונה היא עניין סובייקטיבי. בנוסף, סביר להניח שתרחיש השימוש הספציפי שלכם יקבע איפה סדרי העדיפויות שלכם נמצאים מבחינת האיכות החזותית לעומת הספקטרום של גודל הקבצים. בנוסף, סוגים שונים של תכונות תמונה מגיבים באופן שונה לקנה המידה ולאיכות הדחיסה, ולכן יכול להיות שפתרון אחד שמתאים לכולם לא בהכרח יעבוד כאן. מטרת הכלי היא לעזור לכם ליצור אינטואיציה לגבי דחיסות, קנה מידה ופורמטים של איכות תמונות.
מהר מאוד הבנתי כמה דברים שגיליתי אחרי ששיחקתי עם זכוכית המגדלת של התמונות. קודם כול, אני רוצה quality=30 dpr=2x תמונות על quality=90
dpr=1x תמונות כדי לראות את פירוט ההגדלה. התמונות האלה גם דומות מבחינת גודל הקובץ (במקרה של מישור, התמונה הדחוסה בגודל 2x היא 76kB ואילו התמונה הלא דחוסה 1x היא 80kB).
חריגים לכלל הזה הם תמונות דחוסות מאוד (quality<30) עם הדרגות. הן בדרך כלל סובלות מפסי צבעים, שזה מצב גרוע באותה מידה בלי קשר לקנה המידה של התמונה. דגימות הציפורים והמכוניות שנמצאות בכלי הן
דוגמאות לכך.
תמונות WebP נראות נקיות יותר מקובצי JPEG, במיוחד ברמות דחיסה נמוכות. נראה שגלים בצבע הזה הם הרבה פחות בעיה. לבסוף, תמונות WebP קומפקטיות הרבה יותר.
אזהרות וסנפ
שיפור המראה של תמונות במסכים בצפיפות גבוהה הוא רק חצי מהבעיות שקשורות לתמונות, שנובעות מהבדלים משמעותיים בין המסכים. במקרים מסוימים, יכול להיות שתרצו להציג תמונות שונות לגמרי, בהתאם לגודל של אזור התצוגה. לדוגמה, צילום הפנים של אובמה עשוי להתאים למסך בגודל של טלפון, אבל העמדה מולו והדגל מאחוריו ואולי תתאים יותר למסך של מחשב נייד.
התחמקתי מהנושא הזה של 'כיוון אומנות' כדי להתמקד בתמונות עם DPI גבוה בלבד. אפשר לפתור את הבעיה הזו באמצעות מספר גישות שונות: באמצעות שאילתות מדיה ותמונות רקע, באמצעות JavaScript, באמצעות כמה תכונות חדשות כמו image-set, או בשרת. הנושא הזה מתואר בתמונות עם DPI גבוה לדחיסות פיקסלים משתנה.
אסיים עם כמה בעיות שלא טופלו:
- איך דחיסה גבוהה משפיעה על הביצועים. מהם העונשים בפענוח של תמונות דחוסות מאוד?
- מהם העונשים בביצועים שנובעים מהצורך להקטין את גודל התמונה כשתמונה פי 2 נטענת במסך בגודל 1x?
לסיכום, כדאי לבחור ב-CSS וב-SVG במקום להשתמש בתמונות רשת. אם יש צורך אך ורק בתמונות רשת, אפשר להשתמש בפורמט PNG לתמונות עם מספר מוגבל של צבעים והרבה צבעים אחידים, ולהשתמש בפורמט JPEG לתמונות עם מספר צבעים והדרגתיות. היתרון הנהדר של הגישה הזו הוא שתגי העיצוב שלכם כמעט ללא שינוי. כל מה שנדרש ממפתח האתר הוא ליצור נכסים פי 2 ולהתאים את התמונות לגודל ה-DOM.
לקריאה נוספת, קראו את המאמר של סקוט ג'ל בנושא דומה. התמונות עשויות להיראות חדות והשימוש בחבילת הגלישה יהיה נמוך.