Assalamualaikum sobat, pada artikel kali ini kami akan membagikan tutorial
mengenai elemen HTML <picture>, berikut adalah tutorialnya.
mengenai elemen HTML <picture>, berikut adalah tutorialnya.
Elemen HTML <picture>
Kita bisa menampilkan gambar yang berbeda pada perangkat ataupun ukuran layar
yang berbeda dengan menggunakan elemen HTML <picture>.
yang berbeda dengan menggunakan elemen HTML <picture>.
Elemen HTML <picture>
Dalam menentukan sumber daya gambar kita memiliki lebih banyak fleksibilitas
ketika menggunakan elemen HTML <picture>.
ketika menggunakan elemen HTML <picture>.
Elemen <picture> dapat berisi satu atau lebih elemen <source> dan
memiliki atribut srcset yang merujuk ke gambar yang berbeda. Dengan
menggunakan cara ini browser akan memilih gambar yang sesuai dengan perangkat
atau ukuran layar yang sedang digunakan.
memiliki atribut srcset yang merujuk ke gambar yang berbeda. Dengan
menggunakan cara ini browser akan memilih gambar yang sesuai dengan perangkat
atau ukuran layar yang sedang digunakan.
Di elemen <source> terdapat atribut media yang akan menentukan kapan
waktu yang tepat gambar itu ditampilkan.
waktu yang tepat gambar itu ditampilkan.
Di contoh di bawah kita menampilkan gambar yang berbeda pada perangkat yang
berbeda.
berbeda.
Contoh Program 1 : Menampilkan Gambar Berbeda pada Perangkat yang Berbeda
<!DOCTYPE html>
<html>
<head>
<meta name=“viewport”
content=“width=device-width,initial-scale=1.0”>
</head>
<body>
<h2>Elemen picture</h2>
<picture>
<source media=“(min-width:650px)” srcset=“bunga.png”>
<source media=“(min-width:465px)” srcset=“mobil.png”>
<img src=“pesawat.png” style=“width:auto;”>
</picture>
<p>Ubah ukuran browser untuk melihat gambar yang berbeda sesuai
dengan ukuran layar pada browser</p>
<p>tag img diperlukan jika tidak ada gambar yang sesuai dengan
ukuran layar yang kita setting</p>
</body>
</html>
Hasil Program 1
Penjelasan Program 1
- Di baris 8 kita membuat sebuah judul.
- Di baris 10 sampai baris 14 kita menampilkan gambar yang mana jika ukuran
browser 650 piksel maka akan tampil gambar bunga, jika ukuran layar 465 piksel
akan tampil gambar mobil dan jika tidak ada ukuran layar yang sesuai akan
tampil gambar bunga. - Di baris 16 kita membuat sebuah paragraf.
- Di baris 18 kita membuat sebuah paragraf.
Catatan : Kita harus selalu menggunakan elemen <img> sebagai elemen
terakhir dari <picture>. Jika browser tidak mendukung elemen
<picture> atau tidak terdapat tag <source> yang cocok maka gambar
pada tag <img> yang akan ditampilkan.
Kapan Menggunakan Elemen <picture> ?
Ada 2 tujuan utama menggunakan elemen <picture>
1. Bandwidth
Jika pengguna hanya menggunakan perangkat atau layar yang kecil dan tidak
perlu memuat file gambar berukuran besar. Browser akan menggunakan elemen
<source> pertama dengan nilai atribut yang cocok dan mengabaikan elemen
berikutnya.
perlu memuat file gambar berukuran besar. Browser akan menggunakan elemen
<source> pertama dengan nilai atribut yang cocok dan mengabaikan elemen
berikutnya.
2. Dukungan Format
Mungkin terdapat beberapa perangkat ataupun browser yang tidak mendukung semua
format gambar. Dengan menggunakan elemen <picture> kita bisa menambahkan
gambar dari berbagai format yang nantinya browser akan memilih format mana
yang dikenalinya dan mengabaikan elemen lainnya.
format gambar. Dengan menggunakan elemen <picture> kita bisa menambahkan
gambar dari berbagai format yang nantinya browser akan memilih format mana
yang dikenalinya dan mengabaikan elemen lainnya.
Contoh Program 2 : Uji Coba Format Gambar Elemen <picture>
<!DOCTYPE html>
<html>
<head>
<meta name=“viewport”
content=“width=device-width,initial-scale=1.0”>
</head>
<body>
<h2>Elemen picture</h2>
<picture>
<source srcset=“mobil.png”>
<source srcset=“gedung sate.jpg”>
<img src=“persib.gif” alt=“bunga” style=“width:auto;”>
</picture>
<p>Elemen picture dapat digunakan ketika tidak semua perangkat
mendukung semua format gambar</p>
<p>Perangkat akan memilih format gambar pertama yang didukung dan
akan mengabaikan format gambar lainnya</p>
</body>
</html>
Hasil Program 2
Penjelasan Program 2
- Di baris 8 kita membuat sebuah judul.
- Di baris 10 sampai baris 14 kita menampilkan gambar yang mana format gambar
pertama yang didukung oleh browser akan ditampilkan dan mengabaikan
format gambar lainnya. - Di baris 16 kita membuat sebuah paragraf.
- Di baris 18 kita membuat sebuah paragraf.
Catatan : Browser akan memilih elemen <source> pertama dengan nilai
atribut yang cocok dan mengabaikan elemen <source> lainnya.
Itulah Tutorial HTML tentang elemen <picture>, sampai jumpa di tutorial
selanjutnya, semoga artikel ini bermanfaat untuk kita semua, happy a nice day.
selanjutnya, semoga artikel ini bermanfaat untuk kita semua, happy a nice day.
Komentar