Responsive Images

Responsive images memungkinkan browser memilih gambar terbaik berdasarkan ukuran layar, resolusi, dan format yang didukung.

srcset dan sizes

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Responsive photo"
>

srcset memberikan daftar gambar dengan lebarnya. sizes memberitahu browser berapa lebar gambar akan ditampilkan di berbagai viewport. Browser kemudian memilih gambar terkecil yang cukup.

Picture Element

Untuk art direction (gambar berbeda untuk mobile vs desktop) atau format fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo with fallback">
</picture>

Browser akan menggunakan format pertama yang didukung. AVIF → WebP → JPEG.