Penggunaan elemen <picture> pada html berfungsi untuk menampilkan beberapa gambar yang berbeda berdasarkan lebar viewport atau layar. Elemen <picture> menyimpan dua tag berbeda yaitu satu atau lebih tag <source> dan satu tag <img>. Disini akan saya bahas elemen tag picture pada artikel tentang Cara Mengubah Gambar Dengan Tag Picture HTML.

Untuk dapat mengetahui Cara Mengubah Gambar Dengan Tag Picture HTML kita kenali terlebih dahulu fungsi dan cara penggunaannya.

Elemen <source> memiliki atribut yaitu:

  • srcset – mendefinisikan URL gambar untuk ditampilkan di halaman browser
  • media – menerima permintaan media apa pun yang valid yang biasanya akan ditentukan dalam CSS

Elemen <img> digunakan untuk menyediakan kompatibilitas untuk browser yang tidak mendukung elemen <picture>, atau jika tidak ada tag <source> yang cocok agar gambar tetap tampil di halaman browser.

Di bawah ini saya memiliki struktur html yang berisi elemen tag picture dengan 2 tag source dan satu tag img.

Jika teman-teman perhatikan script di atas maka ketika kita lihat di halaman browser akan tampil 3 gambar yang berbeda berdasarkan lebar layar devicenya. Seperti pada gambar di bawah ini.

Berikut ini tampilan gambar pada ukuran layar di bawah 465px.

Cara Mengubah Gambar Dengan Tag Picture HTML

Dan gambar selanjutnya adalah gambar yang akan tampil pada ukuran layar minimal lebar 465px sampai 649px.

Cara Mengubah Gambar Dengan Tag Picture HTML

Dan terakhir adalah gambar yang tampil pada ukuran layar minimal lebar 650px dan lebih dari 650px.

Cara Mengubah Gambar Dengan Tag Picture HTML

Untuk width semua gambar saya atur dengan lebar 200px.

Demikian artikel tentang Cara Mengubah Gambar Dengan Tag Picture HTML. Teman-teman bebas memberikan tag source lebih banyak lagi, tai yang harus di ingat disini tag img harus satu saja di dalam elemen picture. Semoga artikel ini dapat bermanfaat buat teman-teman dan selamat mencoba.