HTML tag Picture

Tag Picture

<picture>

Cara alternatif menambahkan gambar dihalaman web selain menggunakan tag <img>.

Penggunaan tag <picture>

Tag <picture>, tujuan penggunaannya adalah untuk membantu mempercepat pemuatan halaman web pada saat halaman tersebut dibuka oleh pengguna.

Penggunaan tag <picture> ini sebenarnya adalah pilihan bagi developer pada saat merancang website.
Sebuah website yang ditargetkan secara luas harus mempersiapkan kemungkinan akses yang mempermudah pengguna, terutama pada sisi kecepatan jaringan internet. Dimana tidak semua wilayah memiliki kecepatan internet yang stabil.

Karena pemuatan halaman web yang terkendala jaringan internet yang lambat akan berpotensi ditinggalkan oleh pengguna. Terlebih lagi konten yang dimuat juga membutuhkan kecepatan akses data agar bisa tampil dihalaman.

Oleh karena itu penempatan konten di halaman web diusahakan se-efisien mungkin. Dan bisa menyesuaikan ukuran perangkat yang beraneka macam.

Tag <picture> ini merupakan salah satu metode untuk menyediakan konten terutama konten gambar, yang dapat menyesuaikan ukuran layar perangkat untuk memperkecil penggunaan data serta mempercepat konten ditampilkan dihalaman.

Contoh kode :

<picture>
  <source media="(min-width: 650px)" srcset="gambar1.jpg">
  <source media="(min-width: 465px)" srcset="gambar2.jpg">
  <img src="gambar3.jpg">
</picture>

Atribut srcset dan src memiliki fungsi yang sama, yaitu memanggil file image sesuai URL yang ditetapkan pada nilainya masing-masing.

Perhatikan bahwa, kedua atribut srcset dan atribut src menunjukkan nilai yang berbeda. Sehingga tag <picture> tersebut akan menampilkan 3 file image yang berbeda dengan aturan yang ditetapkan sesuai atribut media

Tag <picture> membawa pilhan beberapa file gambar yang akan ditampilkan sesuai ukuran layar.
File yang kecil untuk layar kecil, file besar untuk layar yang lebih lebar, dengan metode ini maka beban penggunaan data dapat disesuaikan dan dampaknya pada pemuatan halaman menjadi lebih cepat.
Dibandingkan hanya menyediakan 1 file gambar dengan ukuran besar, maka pada saat diakses dengan perangkat kecil, maka perangkat tersebut akan membutuhkan akses data yang sama dengan perangkat yang lebih besar.

Sebaliknya jika menyediakan 1 file gambar ukuran kecil, mungkin sesuai untuk perangkat kecil misal ponsel, akan tetapi pada saat diakses melalui laptop / komputer berlayar besar mungkin saja tampilan file tersebut tidak sesuai dengan ukuran layar.

Penerapan :

Untuk menguji langsung secara live, penampilan file image pada tag <picture>, perhatikan 3 tombol kecil dibagian bawah sematan kode ini.

See the Pen Tag picture by Handy Eko Cahyono (@handyeko) on CodePen.

Petunjuk uji tampilan gambar :

Jika gambar pada sematan diatas menampilkan kode HTML, tekan tombol Result untuk berpindah ke tampilan gambar.

Tekan masing-masing tombol pada sematan diatas, (tombol 1x,0.5x dan 0.25x) satu persatu sambil perhatikan kolom gambar.
Tombol tersebut adalah tombol skala layar, masing-masing tombol menampilkan skala layar berbeda.
Tombol 1x = skala layar saat ini.
Tombol 0.5x = skala layar lebih lebar 1/2 kali layar saat ini.
Tombol 0.25 = skala layar paling lebar.
Setiap kali skala layar (ukuran layar) berubah maka gambar yang ditampilkan akan berubah.