אם יחס הגובה-רוחב של תמונה מעובדת השונה באופן משמעותי מיחס הגובה-רוחב בקובץ המקור (יחס הגובה-רוחב הטבעי), התמונה המעובדת עשויה להיראות מעוותת שעלולה ליצור חוויית משתמש לא נעימה.
איך נכשלת הבדיקה של יחס הגובה-רוחב של תמונות ב-Lighthouse
האפשרות Lighthouse מסמנת כל תמונה בעלת מימד מרונדר של יותר מכמה פיקסלים, בהשוואה לממדים הצפויים כאשר היא מעובדת ביחס הטבעי שלה:
יש שתי סיבות נפוצות ליחס גובה-רוחב שגוי בתמונה:
- לתמונה יש ערכים מפורשים של רוחב וגובה, השונים מהמידות של תמונת המקור.
- תמונה מוגדרת לרוחב ולגובה כאחוז מתוך מאגר בגודל משתנה.
חשוב לוודא שהתמונות מוצגות ביחס הגובה-רוחב הנכון
שימוש ב-CDN של תמונה
בעזרת CDN של תמונה, קל יותר להפוך את התהליך של יצירת גרסאות של התמונות בגדלים שונים לאוטומטי. תוכלו לקרוא את המאמר שימוש ברשתות CDN של תמונות לאופטימיזציה של תמונות כדי לקבל סקירה כללית ומידע בנושא איך להתקין את CDN של תמונות Thumbor ל-Codelab מעשי.
בדיקת ה-CSS שמשפיע על יחס הגובה-רוחב של התמונה
אם אתם לא מצליחים למצוא את ה-CSS שגורם ליחס הגובה-רוחב שגוי, כלי הפיתוח של Chrome יכולים להציג את ההצהרות CSS שמשפיעות על תמונה נתונה. למידע נוסף, עיינו בדף הצגה רק של ה-CSS שמוחל בפועל על רכיב מסוים.
צריך לבדוק את מאפייני התמונה width ו-height ב-HTML
כשניתן, מומלץ לציין ב-HTML את מאפייני width ו-height של כל תמונה כדי שהדפדפן יוכל להקצות מקום לתמונה.
הגישה הזו עוזרת להבטיח שהתוכן שמתחת לתמונה לא יזז אחרי שהתמונה נטענת.
עם זאת, לפעמים קשה לציין מידות ב-HTML כשעובדים עם תמונות רספונסיביות, כי אין דרך לדעת את הרוחב והגובה עד שמכירים את המידות של אזור התצוגה. כדאי להשתמש בספריית יחס גובה-רוחב של CSS או בתיבות של יחס גובה-רוחב כדי לשמר יחסי גובה-רוחב בתמונות רספונסיביות.
לסיום, קראו את הפוסט הצגת תמונות במידות הנכונות כדי ללמוד איך להציג תמונות בגודל המתאים למכשיר של כל משתמש.