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
dansrcset
harus memiliki rasio aspek yang sama. - Setel atribut
width
danheight
agar cocok dengan dimensi gambar1x
. - Atribut
src
harus merujuk pada gambar1x
.
Untuk gambar responsif yang menggunakan deskripsi lebar:
- Semua gambar yang tercantum dalam
src
dansrcset
harus memiliki rasio aspek yang sama. - Setel atribut
width
danheight
agar cocok dengan dimensi gambar penggantian. - Sesuaikan gaya visual gambar sesuai kebutuhan: Jika tidak ada gaya CSS, menetapkan
width
danheight
pada gambar responsif yang menggunakan deskripsi lebar akan menyebabkan gambar selalu dirender dengan ukuran yang sama, meskipun gambar yang tercantum dalamsrcset
memiliki berbagai dimensi. Perilaku ini mungkin bukan yang Anda inginkan. Menambahkanwidth: 100%; height: auto;
atauwidth: 100vw; height: auto;
ke gaya visual gambar dapat memberi Anda tampilan visual yang diinginkan.
Untuk tag <picture>:
- Tetapkan atribut
width
danheight
untuk semua tag<source>
: Nilai yang sesuai untukwidth
danheight
akan bergantung pada cara tag<source>
menggunakansrcset
. (Lihat informasi di atas tentang cara menggunakansrcset
.) - 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
danheight
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>