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

Katie Hempenius
Katie Hempenius

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

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

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

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

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

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

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

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

זהו הקוד של קובץ ה-CSS של flower_logo.png:

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

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

  1. לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
  2. לוחצים על Terminal (הערה: אם הלחצן Terminal לא מופיע, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').
  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 פיקסלים

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

  • משתמשים ב-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 לגבי גודל התמונות.

… והיא נכשלת! למה זה קורה?

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

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

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

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