יש תמונות עם יחס גובה-רוחב שגוי

אם יחס הגובה-רוחב של תמונה מעובדת השונה באופן משמעותי מיחס הגובה-רוחב בקובץ המקור (יחס הגובה-רוחב הטבעי), התמונה המעובדת עשויה להיראות מעוותת שעלולה ליצור חוויית משתמש לא נעימה.

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

בבדיקה של Lighthouse מוצגות תמונות עם יחס גובה-רוחב שגוי

יש שתי סיבות נפוצות ליחס גובה-רוחב שגוי בתמונה:

  • לתמונה יש ערכים מפורשים של רוחב וגובה, השונים מהמידות של תמונת המקור.
  • תמונה מוגדרת לרוחב ולגובה כאחוז מתוך מאגר בגודל משתנה.

חשוב לוודא שהתמונות מוצגות ביחס הגובה-רוחב הנכון

שימוש ב-CDN של תמונה

בעזרת CDN של תמונה, קל יותר להפוך את התהליך של יצירת גרסאות של התמונות בגדלים שונים לאוטומטי. תוכלו לקרוא את המאמר שימוש ברשתות CDN של תמונות לאופטימיזציה של תמונות כדי לקבל סקירה כללית ומידע בנושא איך להתקין את CDN של תמונות Thumbor ל-Codelab מעשי.

בדיקת ה-CSS שמשפיע על יחס הגובה-רוחב של התמונה

אם אתם לא מצליחים למצוא את ה-CSS שגורם ליחס הגובה-רוחב שגוי, כלי הפיתוח של Chrome יכולים להציג את ההצהרות CSS שמשפיעות על תמונה נתונה. למידע נוסף, עיינו בדף הצגה רק של ה-CSS שמוחל בפועל על רכיב מסוים.

צריך לבדוק את מאפייני התמונה width ו-height ב-HTML

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

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

לסיום, קראו את הפוסט הצגת תמונות במידות הנכונות כדי ללמוד איך להציג תמונות בגודל המתאים למכשיר של כל משתמש.

מקורות מידע