CSS<picture> cho phép browser chọn giữa các nguồn ảnh khác nhau về định dạng hoặc bố cục, với <img> là phương án cuối.
html
<!-- chọn theo ĐỊNH DẠNG: trình duyệt nào hiểu AVIF thì lấy AVIF -->
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="..." width="1200" height="630">
</picture>
<!-- chọn theo BỐ CỤC (art direction): mobile dùng ảnh cắt dọc -->
<picture>
<source media="(max-width: 640px)" srcset="/hero-portrait.jpg">
<img src="/hero-wide.jpg" alt="..." width="1200" height="630">
</picture>Browser duyệt các <source> theo thứ tự và dừng ở cái đầu tiên khớp — nên định dạng mới nhất phải đứng trước.
Khi nào dùng <picture>, khi nào srcset:
| Nhu cầu | Dùng |
|---|---|
| Cùng một ảnh, nhiều kích thước | <img srcset sizes> |
| Đổi định dạng (AVIF/WebP + dự phòng) | <picture> |
| Đổi khung hình / tỉ lệ theo màn hình | <picture> |
Lưu ý 1: alt đặt trên <img>, không phải trên <source>. Thiếu <img> bên trong thì <picture> không hiển thị gì.
Lưu ý 2: dùng <picture> chỉ để đổi kích thước là thừa — srcset + sizes làm việc đó gọn hơn và để browser tự quyết theo cả DPR lẫn mạng.