Gambar responsif dan pengaturan gambar

Gambar responsif sering diimplementasikan menggunakan atribut srcset. Atribut srcset adalah daftar nama file gambar yang dipisahkan koma serta deskripsi lebar atau kepadatannya. Untuk mencegah pergeseran tata letak, tetapkan atribut width dan height pada tag <img> dan <source> yang menggunakan srcset.

Untuk gambar responsif yang menggunakan deskripsi kepadatan:

  • Semua gambar yang tercantum dalam src dan srcset harus memiliki rasio aspek yang sama.
  • Setel atribut width dan height agar cocok dengan dimensi gambar 1x.
  • Atribut src harus merujuk pada gambar 1x.

Untuk gambar responsif yang menggunakan deskripsi lebar:

  • Semua gambar yang tercantum dalam src dan srcset harus memiliki rasio aspek yang sama.
  • Setel atribut width dan height agar cocok dengan dimensi gambar penggantian.
  • Sesuaikan gaya visual gambar sesuai kebutuhan: Jika tidak ada gaya CSS, menetapkan width dan height pada gambar responsif yang menggunakan deskripsi lebar akan menyebabkan gambar selalu dirender dengan ukuran yang sama, meskipun gambar yang tercantum dalam srcset memiliki berbagai dimensi. Perilaku ini mungkin bukan yang Anda inginkan. Menambahkan width: 100%; height: auto; atau width: 100vw; height: auto; ke gaya visual gambar dapat memberi Anda tampilan visual yang diinginkan.

Untuk tag <picture>:

  • Tetapkan atribut width dan height untuk semua tag <source>: Nilai yang sesuai untuk width dan height akan bergantung pada cara tag <source> menggunakan srcset. (Lihat informasi di atas tentang cara menggunakan srcset.)
  • Menyesuaikan gaya visual gambar: Jika Anda perlu menyesuaikan gaya visual gambar, perhatikan bahwa menambahkan gaya visual ke tag <source> tidak akan berpengaruh - tag <source> adalah elemen kosong. Sebagai gantinya, Anda harus menata gaya tag <img> yang sesuai.
  • Tetapkan atribut width dan height pada tag <img>: Nilai ini harus cocok dengan ukuran intrinsik gambar penggantian.

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>