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

Katie Hempenius

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

תמונות רספונסיביות ומדדי ליבה לבדיקת חוויית המשתמש באתר

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

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

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

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

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

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

חד

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

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 מטפלת עבורכם בפרטים ולא צריך להגדיר שרת.

הצגת מספר גרסאות של תמונה

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

המאפיינים src, srcset ו-sizes של התג <img> מקיימים אינטראקציה על מנת להשיג את התוצאה הסופית הזו.

המאפיין "src"

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

המאפיין "srcset"

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

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

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

המאפיין 'מידות'

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

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

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

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

(עוד יותר) קרדיט נוסף

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

אימות

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