תמונות רספונסיביות וכיוון האומנות

ההטמעה של תמונות רספונסיביות מתבצעת בדרך כלל באמצעות המאפיין srcset. המאפיין srcset הוא רשימה של שמות קובצי תמונות שמופרדים בפסיקים ואת מתארי הרוחב או הצפיפות שלהם. כדי למנוע שינויי פריסה, צריך להגדיר את המאפיינים width ו-height בתגים <img> ו-<source> שנעשה בהם שימוש ב-srcset.

לתמונות רספונסיביות שנעשה בהן שימוש במתארי צפיפות:

• לכל התמונות המפורטות ב-src וב-srcset צריך להיות אותו יחס גובה-רוחב.
• מגדירים את המאפיינים width ו-height כך שיתאימו למידות של התמונה 1x.
• המאפיין src צריך להתייחס לתמונה 1x.

בתמונות רספונסיביות שנעשה בהן שימוש במתארי רוחב:

• לכל התמונות המפורטות ב-src וב-srcset צריך להיות יחס גובה-רוחב זהה.
• מגדירים את המאפיינים width ו-height כך שיתאימו למידות של התמונה החלופית.
• שינוי של עיצוב התמונה לפי הצורך: אם לא בוחרים עיצוב CSS, אם מגדירים את הערכים width ו-height בתמונה רספונסיבית עם תיאורי רוחב, התמונה תמיד תעובד באותו גודל – גם אם לתמונות שמופיעות ב-srcset יש מימדים שונים. יכול להיות שהתנהגות כזו אינה מה שאתם רוצים. הוספה של width: 100%; height: auto; או width: 100vw; height: auto; לעיצוב התמונה עשויה לספק את המראה הוויזואלי הרצוי.

לתגי <picture>:

• מגדירים את המאפיינים width ו-height לכל התגים של <source>: הערכים המתאימים ל-width ול-height תלויים באופן שבו התג <source> ישתמש ב-srcset. (מידע נוסף על עבודה עם srcset מופיע למעלה).
• שינוי של עיצוב התמונות: אם צריך להתאים את עיצוב התמונות, חשוב לזכור שלהוספת סגנון לתג <source> לא תהיה השפעה – תג <source> הוא רכיב ריק. במקום זאת, צריך לסגנן את תג <img> המתאים.
• מגדירים את המאפיינים width ו-height בתג <img>: הערכים האלה צריכים להתאים לגודל הפנימי של תמונת הגיבוי.

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>