Tanda <picture> HTML

Definisi dan penggunaan

<picture> Tag memungkinkan para pengembang web lebih fleksibel dalam menentukan sumber gambar.

<picture> Penggunaan yang paling sering elemen ini adalah dalam desain responsif untuk arah gambar. Dapat disajikan beberapa gambar untuk memenuhi viewport browser dengan baik, bukannya memperbesar atau memperkecil gambar berdasarkan lebar viewport.

<picture> Elemen yang mengandung 2 tag: satu atau beberapa <source> tag dan <img> tag.

Peramban akan mencari media query yang cocok dengan lebar viewport saat ini dan menampilkan elemen <source> pertama yang cocok, lalu ia akan menampilkan gambar yang benar (yang ditentukan di atribut srcset). Elemen <img> digunakan sebagai <picture> Elemen anak terakhir dari elemen wajib digunakan sebagai pilihan cadangan saat tidak ada tag <source> yang cocok.

Tips:<picture> Cara kerja elemen <video> dan <audio> Sejenis. Anda dapat menetapkan sumber yang berbeda, sumber pertama yang disukai akan digunakan.

Lihat pula:

Panduan HTML:Elemen <picture> HTML

Panduan CSS:Rancang Responsif CSS - Gambar

Contoh

<picture> Cara penggunaan tanda:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Coba Sendiri

Atribut Global

<picture> Tanda juga mendukung Atribut Global di HTML.

Atribut Peristiwa

<picture> Tanda juga mendukung Atribut Peristiwa di HTML.

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung tanda ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0