tRikSonic
Informasi : saat ini anda mengakses blog ini untuk halaman yang di percepat penggunaannya untuk mobile/handphone (AMP) atau akses mobile dengan kecepatan internet yang rendah, mungkin beberapa fitur diblog ini belum tersedia, silahkan ganti Thema untuk mengaktifkan beberapa fitur lainnya. Terimakasih

HTML picture Tag

Terakhir diperbarui : 22 Mei 2018 - 06.51
HTML picture, Referensi belajar HTML <picture>, Tutorial html picture, Penjelasan html <picture>

Tutorial HTML <picture>

Element HTML picture mendefinisikan sebagai element gambar pada HTML dan sebagai wadah dari element <img> dan element <source>
1234<picture>
  <source  media="(min-width: 350px)" srcset="/background-html.png"/>  
  <img alt="demo" src="/html-tutorial.png"/>
</picture>
Dalam penerapannya pada HTML, jika element <picture> didalamnya terdapat element <source>, maka element <source> tersebut wajib mempunyai attribute srcset sebagai sumber media yang akan dimuat
Penggunaan element <source> didalam element html <picture> memungkinkan penulis mendeklarasikan atau memberi petunjuk kepada user dan browser tentang sumber gambar yang akan digunakan baik itu berdasarkan kepadatan piksel layar, ukuran viewport, format gambar, dan faktor lainnya, (penggunaan attribute media pada element <source> diperlukan).
Tips : Tambahkan element HTML <img>, didalam element <picture>, sebagai back-Up jika browser yang digunakan oleh user tidak mendukung element <picture> dan <source>

Contoh HTML <picture>

<picture>
  <source  media="(min-width: 350px)" srcset="/background-html.png"/>  
  <img alt="demo" src="/html-tutorial.png"/>
</picture>

Contoh HTML <picture>

<img alt="demo" src="/s72/background-html.png"/>

<picture>
  <source  media="(min-width: 100px)" srcset="/s1600/background-html.png"/>
  <img alt="demo" src="/s72/background-html.png"/>
</picture>

Global Attributes:

Element <picture> mencakup Global Attributes HTML.

Event Attributes:

Element <picture> mencakup Event Attributes HTML.
Desktop
ElementChromeSafariFirefoxOperaIEEdge
<picture>389.13825-13
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<picture>3838Ya38Ya259.3

Default CSS :

Browser yang support dengan element <picture>, mempunyai nilai default :
/* tidak ada */