یک تصویر برای همهٔ صفحه‌ها کافی نیست
با srcset چند نسخهٔ یک تصویر را معرفی می‌کنی؛ مرورگر با توجه به اندازهٔ نمایش و تراکم صفحه نسخهٔ مناسب را انتخاب می‌کند. در توصیفگر w عدد باید عرض واقعی فایل باشد. sizes عرض مورد انتظارِ نمایش تصویر را به مرورگر اعلام می‌کند؛ خودش CSS ایجاد نمی‌کند.
<img src="images/photo-800.jpg"
srcset="images/photo-400.jpg 400w, images/photo-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 600px"
width="800" height="600"
alt="نمای کارگاه از روبه‌رو">
برای تصویر با اندازهٔ نمایشی ثابت می‌توان نسخه‌های 1x و 2x داد؛ توصیفگرهای w و x را در یک srcset مخلوط نکن.
picture زمانی مناسب است که برش تصویر یا فرمت منبع باید عوض شود. sourceها پیش از img قرار می‌گیرند؛ img همواره جایگزین نهایی و محل alt است.
<picture>
<source media="(max-width: 600px)" srcset="images/portrait.jpg">
<source type="image/avif" srcset="images/wide.avif">
<img src="images/wide.jpg" alt="گروه در پایان کارگاه" width="1200" height="800">
</picture>
تمرین دستی: فایل‌های واقعی را در پوشهٔ images بگذار و با تغییر عرض پنجره و بخش Network ابزار توسعه، انتخاب منبع را بررسی کن. مرورگر ممکن است منبع بزرگ‌ترِ ذخیره‌شده در حافظه را دوباره به‌کار ببرد.