הפעלת Lighthouse
הבאג הזה קטן מספיק כדי שאפשר יהיה לבדוק את התמונות שלו באופן ידני. עם זאת, ברוב האתרים חובה להשתמש בכלי כמו Lighthouse כדי לבצע את הפעולה הזו באופן אוטומטי.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא).
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה 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.
- לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
- לוחצים על Terminal (הערה: אם הלחצן Terminal לא מופיע, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').
- במסוף, מקלידים:
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% מהרוחב של הדפדפן).
הגודל האידיאלי של התמונה הזו תלוי במכשיר שבו היא מוצגת, ולכן כדאי לשנות את הגודל שלה לגודל שמתאים לרוב המשתמשים. אתם יכולים לבדוק את נתוני הניתוח כדי לראות אילו רזולוציות מסך נפוצות בקרב המשתמשים שלכם:
הנתונים האלה מצביעים על כך ש-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 מתבצעות במכשיר Nexus 5x. מכשיר Nexus 5x כולל מסך בגודל 1080 x 1920.
ב-Nexus 5x, הגודל האופטימלי של flower_photo.jpg
הוא 540 פיקסלים רוחב (1080 pixels * . 5). התמונה הזו קטנה בהרבה מהתמונה ששינינו את הגודל שלה.
האם לשנות את גודל התמונה כך שתקטן עוד יותר? כנראה. עם זאת, התשובה לא תמיד ברורה.
הבחירה כאן היא בין איכות התמונה במכשירים ברזולוציה גבוהה לבין הביצועים. קל להעריך יתר על המידה את מידת הבדיקה של המשתמשים בתמונות, ולכן מומלץ להקטין אותן. עם זאת, יש בהחלט תרחישים לדוגמה שבהם איכות התמונה חשובה יותר.
החדשות הטובות הן שאפשר לעקוף את הבעיה הזו לגמרי על ידי שימוש בתמונות רספונסיביות כדי להציג כמה גדלים של תמונות. אפשר לקרוא מידע נוסף על כך במדריך לתמונות רספונסיביות.