הצגת תמונות במידות הנכונות

קייטי המפניוס
קייטי המפניוס
X

הפעלת Lighthouse

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

  1. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  2. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  3. לוחצים על הכרטיסייה Lighthouse.
  4. מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
  5. לוחצים על הלחצן יצירת דוח.
  6. מחפשים את תוצאות הבדיקה של גודל תקין של תמונות.

בדיקת התמונות בגודל תקין נכשלה ב-Lighthouse.

הביקורת של Lighthouse מראה שצריך לשנות את הגודל של שתי התמונות בדף הזה.

תיקון פרטי המוצר flower_logo.png

מתחילים בחלק העליון של הדף ומתקנים את תמונת הלוגו.

  • בודקים את flower_logo.png בחלונית הרכיבים של כלי הפיתוח.

חלונית הרכיבים של כלי הפיתוח

זה שירות ה-CSS של flower_logo.png:

.logo {
  width: 50px;
  height: 50px;
}

רוחב ה-CSS של התמונה הזו הוא 50 פיקסלים, ולכן צריך לשנות את הגודל של flower_logo.png בהתאם. אפשר להשתמש ב-ImageMagick כדי לשנות את הגודל של התמונה בהתאם. ImageMagick הוא כלי של CLI לעריכת תמונות שמותקן מראש בסביבת Codelab.

  1. לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
  2. לוחצים על טרמינל (הערה: אם הלחצן 'מסוף' לא מוצג, ייתכן שתצטרכו להשתמש באפשרות 'מסך מלא').
  3. במסוף, מקלידים:
convert flower_logo.png -resize 50x50 flower_logo.png

תיקון flower_photo.jpg

לאחר מכן, מתקנים את התמונה של הפרחים הסגולים.

  • בודקים את flower_photo.jpg בחלונית הרכיבים של כלי הפיתוח.

חלונית הרכיבים של כלי הפיתוח

זה שירות ה-CSS של flower_photo.jpg:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw מגדיר את רוחב ה-CSS של flower_photo.jpg כ "חצי מרוחב הדפדפן". (1vw שווה ל-1% מרוחב הדפדפן).

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

Google Analytics של רזולוציות מסך.

הנתונים האלה מראים שיותר מ-95%מהמבקרים באתר משתמשים ברזולוציות מסך ברוחב של 1,920 פיקסלים או פחות.

על סמך המידע הזה אנחנו יכולים לחשב את הרוחב של התמונה: (רוחב של 1,920 פיקסלים) * (50% מרוחב הדפדפן) = 960 פיקסלים

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

  • אפשר להשתמש ב-ImageMagick כדי לשנות את הגודל של התמונה לרוחב של 960 פיקסלים. בסוג הטרמינל:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

הפעלה מחדש של מגדלור

  • כדי לוודא שגודל התמונות השתנה, מריצים מחדש את הבדיקה של ביצועי Lighthouse.

בדיקת התמונות ב-Lighthouse שגודלן תקין.

... וזה נכשל! למה זה קורה?

חברת Lighthouse מריצה בדיקות ב-Nexus 5x. ל-Nexus 5x יש מסך בגודל 1080 x 1920. עבור Nexus 5x, הגודל האופטימלי של flower_photo.jpg יהיה ברוחב 540 פיקסלים (1,080 פיקסלים * . 5). זו תמונה הרבה יותר קטנה מהתמונה שגודלה שונה.

האם כדאי לשנות את גודל התמונה כדי שהיא תהיה קטנה יותר? כנראה. עם זאת, התשובה לכך לא תמיד ברורה.

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

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