Elemen <gambar> HTML
Elemen HTML <picture>memungkinkan Anda untuk menampilkan gambar yang berbeda untuk perangkat atau ukuran layar yang berbeda.
Elemen HTML <gambar>
Elemen HTML <picture>memberi pengembang web lebih banyak fleksibilitas dalam menentukan sumber daya gambar.
Elemen <picture>berisi satu atau lebih <source>elemen, masing-masing mengacu pada gambar yang berbeda melalui srcset
atribut. Dengan cara ini browser dapat memilih gambar yang paling sesuai dengan tampilan dan/atau perangkat saat ini.
Setiap <source>elemen memiliki
mediaatribut yang menentukan kapan gambar paling cocok.
Contoh
Tampilkan gambar yang berbeda untuk ukuran layar yang berbeda:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Catatan: Selalu tentukan <img>elemen sebagai elemen anak terakhir dari <picture>elemen. Elemen <img>digunakan oleh browser yang tidak mendukung <picture>elemen, atau jika tidak ada <source>tag yang cocok.
Kapan menggunakan Elemen Gambar
Ada dua tujuan utama untuk <picture>elemen:
1. Bandwidth
Jika Anda memiliki layar atau perangkat kecil, tidak perlu memuat file gambar besar. Browser akan menggunakan <source>
elemen pertama dengan nilai atribut yang cocok, dan mengabaikan salah satu elemen berikut.
2. Dukungan Format
Beberapa browser atau perangkat mungkin tidak mendukung semua format gambar. Dengan menggunakan
<picture>elemen tersebut, Anda dapat menambahkan gambar dari semua format, dan browser akan menggunakan format pertama yang dikenalinya, dan mengabaikan salah satu elemen berikut.
Contoh
Browser akan menggunakan format gambar pertama yang dikenalinya:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Catatan: Browser akan menggunakan <source>elemen pertama dengan nilai atribut yang cocok, dan mengabaikan <source>elemen berikut.
Tag Gambar HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .