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><!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
| Element | Chrome | Safari | Firefox | Opera | IE | Edge |
<picture> | 38 | 9.1 | 38 | 25 | - | 13 |
Mobile
| Element | Android webview | Chrome Android | Edge mobile | Firefox Android | IE mobile | Opera Android | iOS Safari |
<picture> | 38 | 38 | Ya | 38 | Ya | 25 | 9.3 |
Default CSS :
Browser yang support dengan element
<picture>, mempunyai nilai default :/* tidak ada */