הצגת תמונות רספונסיביות

Katie Hempenius
Katie Hempenius

הצגת תמונות בגודל של מסך מחשב במכשירים ניידים עלולה להגדיל את השימוש בחבילת הגלישה פי 2-4 מהנדרש. כדי לשפר את חוויית המשתמש, מומלץ לפעול לפי ההנחיות שבדף הזה ולהציג תמונות בגדלים שונים למכשירים שונים.

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

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

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

שינוי הגודל של תמונות

שניים מהכלים הפופולריים ביותר לשינוי גודל התמונות הם חבילת ה-npm של sharp והכלי CLI של ImageMagick.

חבילת sharp היא בחירה טובה לשימוש באוטומציה של שינוי גודל התמונות (לדוגמה, יצירת תמונות ממוזערות בכמה גדלים לכל הסרטונים באתר). הוא מהיר ומשולב היטב עם סקריפטים וכלים ל-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" sizes="50vw">

המאפיינים src,‏ srcset ו-sizes של התג <img> פועלים יחד כדי להשיג את התוצאה הסופית הזו.

המאפיין 'src'

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

המאפיין 'srcset'

המאפיין srcset הוא רשימה מופרדת בפסיקים של שמות קובצי תמונות ותיאורי רוחב או צפיפות שלהם.

בדוגמה הזו נעשה שימוש בתיאורי רוחב, שמספרים לדפדפן מה רוחב התמונה כדי שהוא לא יצטרך להוריד את התמונה כדי לברר זאת. 480w הוא מאפיין רוחב שמציין לדפדפן ש-flower-small.jpg הוא ברוחב 480 פיקסלים. 1080w הוא מאפיין רוחב שמציין לדפדפן ש-flower-large.jpg הוא ברוחב 1,080 פיקסלים.

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

המאפיין 'sizes'

המאפיין sizes מאפשר לדפדפן לדעת מה רוחב התמונה כשהיא מוצגת, אבל הוא לא משפיע על גודל התצוגה של התמונה, ולכן עדיין צריך להשתמש ב-CSS.

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

אם הדפדפן לא מזהה את המאפיין sizes, הוא יטען את התמונה שצוינה במאפיין src. (sizes ו-srcset הוצגו באותו זמן, כך שכל דפדפן תומך בשני המאפיינים או בשום אחד מהם).

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

(עוד יותר) נקודות בונוס

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

אימות

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