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

Katie Hempenius

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

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

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

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

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

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

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

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

חד

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

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

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

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

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

העמודה 'src' שיוך

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

העמודה 'srcset' שיוך

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

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

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

"גדלים" שיוך

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

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

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

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

(אפילו יותר) תוספת קרדיט

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

אימות

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