כשמציגים תמונות בגודל של מחשב שולחני למכשירים ניידים, כמות הנתונים הדרושה גדולה פי 2 עד 4. כדי לשפר את חוויית המשתמש, מומלץ לפעול לפי ההנחיות שבדף הזה ולהציג תמונות בגדלים שונים למכשירים שונים.
תמונות רספונסיביות ו-Core Web Vitals
כשמציגים תמונות רספונסיביות, הדף מעריך את יכולות התצוגה של המכשיר של המשתמש ובוחר אחת מתוך קבוצה של תמונות מועמדות שמתאימות בצורה אופטימלית לתצוגה על סמך הקריטריונים האלה. כך המשתמשים חוסכים נתונים, בעיקר על ידי הצגת תמונות קטנות יותר במכשירים עם מסכים קטנים יותר.
הטעינה של תמונות מהירה יותר יכולה להשפיע גם על מדד המהירות שבה נטען רכיב התוכן הכי גדול (LCP) של הדף. לדוגמה, אם רכיב ה-LCP של הדף הוא תמונה, הצגה רספונסיבית שלה יכולה לצמצם את משך הטעינה של המשאב.
ככל שמשך הטעינה של המשאבים קצר יותר, כך זמן הטעינה של התמונה של ה-LCP קצר יותר, וכך ציון ה-LCP של הדף משתפר. ככל שה-LCP נמוך יותר, המשתמשים יראו שהאתר נטען מהר יותר, ובמיוחד כשהתוכן החשוב ביותר (רכיב ה-LCP) נטען מהר יותר. הצגת תמונות רספונסיביות יכולה גם לצמצם את התחרות על רוחב הפס של משאבים אחרים בדף, וכך לשפר את מהירות הטעינה של הדף באופן כללי.
שינוי הגודל של תמונות
שניים מהכלים הפופולריים ביותר לשינוי גודל התמונות הם חבילת ה-npm של sharp והכלי CLI של ImageMagick.
החבילה החדה היא בחירה טובה לאוטומציה של שינוי הגודל של תמונות (לדוגמה, יצירת תמונות ממוזערות במספר גדלים לכל הסרטונים באתר שלכם). הוא מהיר ומשולב היטב עם סקריפטים וכלים ל-build. קל יותר להשתמש ב-ImageMagick כדי לשנות את הגודל של תמונה באופן חד-פעמי, כי התוכנה פועלת לגמרי משורת הפקודה.
חדה
כדי להשתמש ב-sharp כסקריפט של Node, שומרים את הקוד הזה כסקריפט נפרד בפרויקט ומריצים אותו כדי להמיר את התמונות:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
כדי לשנות את גודל התמונה ל-33% מהגודל המקורי שלה, מריצים את הפקודה הבאה במסוף:
convert -resize 33% flower.jpg flower-small.jpg
כדי לשנות את גודל התמונה כך שתתאים למרחב ברוחב 300 פיקסלים ובגובה 200 פיקסלים, מריצים את הפקודה הבאה:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
כמה גרסאות של תמונות כדאי ליצור?
אין תשובה 'נכונה' אחת לשאלה הזו. עם זאת, מקובל להציג תמונה בין 3 ל-5 גדלים שונים. הצגת תמונות בגדלים שונים משפרת את הביצועים, אבל תופסת יותר מקום בשרתים וצריך לכתוב קצת יותר HTML.
אפשרויות אחרות
כדאי גם לבדוק שירותי תמונות כמו Thumbor (קוד פתוח) ו-Cloudinary. שתיהן דרכים פשוטות ליצור תמונות רספונסיביות, שמאפשרות גם לבצע מניפולציות על התמונות על פי דרישה. כדי להגדיר את Thumbor, צריך להתקין אותו בשרת. Cloudinary מטפלת בפרטים בשבילכם, ואין צורך בהגדרת שרת.
הצגה של כמה גרסאות של תמונות
כשמציינים כמה גרסאות של תמונה, הדפדפן בוחר את הגרסה הטובה ביותר לשימוש:
| לפני | אחרי |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, Flower-large.jpg 1080w" מספרים="50vw"> |
המאפיינים src, srcset ו-sizes של התג <img> פועלים יחד כדי להשיג את התוצאה הסופית הזו.
המאפיין 'src'
המאפיין src גורם לקוד הזה לעבוד בדפדפנים שלא תומכים במאפיינים srcset ו-sizes. הדפדפנים האלה יחזרו לטעינת המשאב שצוין במאפיין src.
המאפיין 'srcset'
המאפיין srcset הוא רשימה מופרדת בפסיקים של שמות קובצי תמונות ותיאורי רוחב או צפיפות שלהם.
בדוגמה הזו נעשה שימוש בתיאורי רוחב, שאומרים לדפדפן עד כמה התמונה רחבה כדי שלא תצטרך להוריד את התמונה כדי לברר זאת. 480w הוא מאפיין רוחב שמציין לדפדפן ש-flower-small.jpg הוא ברוחב 480 פיקסלים. 1080w הוא מאפיין רוחב שמציין לדפדפן ש-flower-large.jpg הוא ברוחב 1,080 פיקסלים.
בונוס: לא צריך לדעת על מתארי צפיפות כדי להציג תמונות בגדלים שונים. עם זאת, אם מעניין אתכם איך פועלים תיאוריי צפיפות, כדאי לעיין בשיעור ה-Lab של קוד החלפת רזולוציה. מתארי הצפיפות משמשים להצגת תמונות שונות על סמך דחיסות הפיקסלים של המכשיר.
המאפיין 'גדלים'
מאפיין הגדלים מציין לדפדפן את הרוחב של התמונה כשהיא מוצגת, אבל הוא לא משפיע על גודל התצוגה של התמונה ולכן עדיין צריך CSS לשם כך.
כדי לקבוע איזו תמונה לטעון, הדפדפן ישתמש במידע הזה ובמידע שיש לו על המכשיר של המשתמש (כולל המידות שלו ודחיסות הפיקסלים).
אם הדפדפן לא מזהה את המאפיין sizes, הוא יטען את התמונה שצוינה במאפיין src. (sizes ו-srcset הוצגו בו-זמנית, כך שכל דפדפן תומך בשני המאפיינים או בשום אחד מהם).
בונוס: אם אתם רוצים להשתולל, תוכלו גם להשתמש במאפיין sizes כדי לציין כמה גדלים של משבצות. כך אפשר להתאים את האתרים לפריסות שונות בגדלים שונים של אזור תצוגה. דוגמת קוד עם מספר משבצות שמראה איך לעשות זאת.
(עוד יותר) נקודות בונוס
בנוסף לכל הנקודות הנוספות שכבר צויינו (תמונות מורכבות!), אפשר להשתמש באותם מושגים גם לניהול קריאייטיב. ניהול קריאייטיב הוא תהליך שבו מוצגות תמונות שונות לגמרי (במקום גרסאות שונות של אותה תמונה) למסכים שונים. מידע נוסף זמין בסדנת הקוד בנושא ניהול קריאייטיב.
אימות
אחרי שמטמיעים תמונות רספונסיביות, אפשר להשתמש ב-Lighthouse כדי לוודא שלא תפספסו אף תמונה. מריצים את ביקורת הביצועים של Lighthouse (Lighthouse > Options > Performance) ומחפשים את התוצאות של הביקורת תמונות בגודל מתאים. בתוצאות האלה יופיעו התמונות שעדיין צריך לשנות את הגודל שלהן.