Elemen HTML <picture> memungkinkan kita menampilkan gambar yang berbeda untuk perangkat atau ukuran layar yang berbeda.
Elemen HTML <picture>
Elemen HTML memberi pengembang web lebih banyak fleksibilitas dalam menentukan sumber daya gambar.
Elemen berisi satu atau beberapa elemen , masing-masing mengacu pada gambar yang berbeda melalui atribut srcset. Dengan cara ini browser dapat memilih gambar yang paling sesuai dengan tampilan dan / atau perangkat saat ini.
Setiap elemen memiliki atribut media yang menentukan kapan gambar paling cocok.
Contoh :
Tampilkan gambar yang berbeda untuk ukuran layar yang berbeda:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>The picture Element</h2> <picture> <source media="(min-width: 650px)" srcset="https://dosenit.com/wp-content/uploads/2020/10/img_food.jpg"> <source media="(min-width: 465px)" srcset="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg"> <img src="https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" style="width:auto;"> </picture> <p>Ubah ukuran browser untuk melihat versi yang berbeda dari pemuatan gambar pada ukuran viewport yang berbeda. Browser mencari elemen sumber pertama tempat kueri media cocok dengan lebar viewport pengguna saat ini, dan mengambil gambar yang ditentukan dalam atribut srcset.</p> <p>Elemen img diperlukan sebagai tag anak terakhir dari blok deklarasi gambar. Elemen img digunakan untuk menyediakan kompatibilitas mundur untuk browser yang tidak mendukung elemen gambar, atau jika tidak ada tag sumber yang cocok. </p> <p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p> </body> </html>
Kapan menggunakan Elemen Picture
Ada dua tujuan utama elemen <picture> :
- Bandwidth
Jika kita memiliki layar atau perangkat kecil, tidak perlu memuat file gambar besar. Browser akan menggunakan elemen pertama dengan nilai atribut yang cocok dan mengabaikan salah satu elemen berikut. - Dukungan Format
Beberapa browser atau perangkat mungkin tidak mendukung semua format gambar. Dengan menggunakan elemen<picture>, kita bisa menambahkan gambar dari semua format dan browser akan menggunakan format pertama yang dikenali dan mengabaikan salah satu elemen berikut.
Contoh
Browser akan menggunakan format gambar pertama yang dikenali:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>The picture Element</h2> <picture> <source srcset="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg"> <source srcset="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg"> <img src="https://dosenit.com/wp-content/uploads/2020/10/Tugas-dan-Fungsi-Komputer-Server-dan-Penjelasannya-1280x720-1.jpg" alt="Komputer" style="width:auto;"> </picture> <p>Elemen gambar dapat digunakan jika format gambar tidak didukung oleh semua perangkat.</p> <p>Perangkat tersebut akan menggunakan format gambar pertama yang didukungnya, dan mengabaikan gambar lainnya.</p> </body> </html>
Catatan: Browser akan menggunakan elemen <source> pertama dengan nilai atribut yang cocok dan mengabaikan elemen <source> berikut.
Tag Image HTML
| Tag | Deskripsi |
|---|---|
| <img> | Mendefinisikan gambar(image) |
| <map> | Mendefinisikan peta gambar(image map) |
| <area> | Mendefinisikan area yang dapat diklik di dalam peta gambar(image map) |
| <picture> | Mendefinisikan tempat untuk beberapa sumber gambar |
