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

Katie Hempenius
Katie Hempenius

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

  1. כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen מסך מלא (מסך מלא).
  2. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
  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. לוחצים על 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). התמונה הזו קטנה בהרבה מהתמונה ששינינו את הגודל שלה.

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

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

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