Gambar responsif memungkinkan browser memilih gambar terbaik untuk perangkat — menghemat bandwidth di ponsel dan menyajikan gambar tajam di layar high-DPI.
srcset + sizes — gambar sama, resolusi berbeda
html
srcset mencantumkan gambar kandidat dengan lebar intrinsik mereka (400w = 400px lebar).sizes memberi tahu browser seberapa lebar gambar akan ditampilkan di berbagai breakpoint (di sini: lebar viewport penuh di bawah 600px, jika tidak setengah).sizes + kepadatan piksel perangkat untuk memilih gambar terkecil yang masih terlihat tajam — sebelum mengunduh apa pun.Telepon mungkin memilih small.jpg; laptop Retina yang menampilkannya pada 50% lebar mungkin memilih large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Browser menggunakan pertama <source> yang didukung/cocok. Gunakan <picture> ketika Anda memerlukan format berbeda (sajikan AVIF/WebP dengan fallback JPEG) atau potongan berbeda per ukuran layar (arahan seni) — hal-hal yang tidak dapat dilakukan srcset saja.
srcset + sizes.<picture>.Menyajikan gambar dengan ukuran yang tepat dan format modern adalah salah satu kemenangan kinerja terbesar untuk web — ini secara drastis mengurangi penggunaan data seluler dan meningkatkan Largest Contentful Paint.
Alat asli ini memungkinkan browser membuat pilihan optimal secara otomatis, dengan fallback yang elegan untuk browser yang lebih lama.