tRikSonic

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
HTML picture
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
img {
  max-width :100%
}
</style>
</head>
<body>

<picture>
  <source  media="(min-width: 350px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRARs1wOnDpQLFj_VLECQkmDCTY0IS3VsXDjrElcCWoXyYEijr1By0ZicKUW1VdeJLstSrbitDwFIFdphkPlGQn1svNdrCE8OP-o7elGdupPrQpZr6uXBHOx4M6xR4nJLRRZbhzoCXeqcf/s640/background-html.png"/>  
  <img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png"/>
</picture>

<p>
 Perlebar dan perkecil area preview untuk melihat fungsinya.
</p>

</body>
</html>

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
img {
  width :100%
}
</style>
</head>
<body>

<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRARs1wOnDpQLFj_VLECQkmDCTY0IS3VsXDjrElcCWoXyYEijr1By0ZicKUW1VdeJLstSrbitDwFIFdphkPlGQn1svNdrCE8OP-o7elGdupPrQpZr6uXBHOx4M6xR4nJLRRZbhzoCXeqcf/s72/background-html.png"/>

<hr>

<picture>
  <source  media="(min-width: 100px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRARs1wOnDpQLFj_VLECQkmDCTY0IS3VsXDjrElcCWoXyYEijr1By0ZicKUW1VdeJLstSrbitDwFIFdphkPlGQn1svNdrCE8OP-o7elGdupPrQpZr6uXBHOx4M6xR4nJLRRZbhzoCXeqcf/s1600/background-html.png"/>
  <img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRARs1wOnDpQLFj_VLECQkmDCTY0IS3VsXDjrElcCWoXyYEijr1By0ZicKUW1VdeJLstSrbitDwFIFdphkPlGQn1svNdrCE8OP-o7elGdupPrQpZr6uXBHOx4M6xR4nJLRRZbhzoCXeqcf/s72/background-html.png"/> 
</picture>


<p>Perlebar dan perkecil area preview</p>
<p>gambar 1 blur dimedia screen ukuran besar</p>
<p>Sedangkan pada gambar 2 gambar terlihat stabil</p>

</body>
</html>

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 */
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.