הפעלת Lighthouse
הבאג הזה קטן מספיק כדי שאפשר יהיה לבדוק את התמונות שלו באופן ידני. עם זאת, ברוב האתרים חובה להשתמש בכלי כמו Lighthouse כדי לבצע את הפעולה הזו באופן אוטומטי.
- כדי לראות תצוגה מקדימה של האתר, מקישים על הצגת האפליקציה. לאחר מכן מקישים על מסך מלא .
- מקישים על 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). התמונה הזו קטנה בהרבה מהתמונה ששינינו את הגודל שלה.
האם כדאי להקטין את התמונה עוד יותר? כנראה. עם זאת, התשובה לא תמיד ברורה.
הבחירה כאן היא בין איכות התמונה במכשירים ברזולוציה גבוהה לבין הביצועים. קל להעריך יתר על המידה את מידת הבדיקה של המשתמשים בתמונות, ולכן מומלץ להקטין אותן. עם זאת, יש בהחלט תרחישים לדוגמה שבהם איכות התמונה חשובה יותר.
החדשות הטובות הן שאפשר לעקוף את הפשרה הזו לגמרי באמצעות שימוש בתמונות רספונסיביות להצגת כמה גדלים של תמונות. מידע נוסף על כך זמין במדריך בנושא תמונות רספונסיביות.