HTML5 <picture>Tag akan membantu Anda untuk menyelesaikan sumber gambar yang tepat tergantung pada lebar layar
Tampaknya perilaku browser tidak banyak berubah selama 5 tahun terakhir dan banyak yang masih akan mengunduh gambar tersembunyi, bahkan jika ada display: noneproperti yang ditetapkan pada mereka.
Meskipun ada solusi media query , itu hanya bisa berguna ketika gambar ditetapkan sebagai latar belakang di CSS.
Sementara saya berpikir bahwa hanya ada solusi JS untuk masalah ini ( lazy load , picturefill , dll.), Ternyata ada solusi HTML murni yang bagus yang keluar dari kotak dengan HTML5.
Dan itu adalah <picture>tag.
Begini cara MDN menjelaskannya:
The HTML <picture>elemen adalah wadah yang digunakan untuk menentukan beberapa <source>elemen untuk spesifik<img> yang terkandung di dalamnya. Browser akan memilih sumber yang paling sesuai dengan tata letak halaman saat ini (batasan kotak gambar akan muncul) dan perangkat itu akan ditampilkan (misalnya perangkat normal atau hiDPI.)
Dan inilah cara menggunakannya:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Logika di belakang
Browser akan memuat sumber imgtag, hanya jika tidak ada aturan media yang berlaku. Ketika <picture>elemen tidak didukung oleh browser, itu lagi akan mundur untuk menunjukkanimg tag.
Biasanya Anda akan menempatkan gambar terkecil sebagai sumber <img>dan karenanya tidak memuat gambar berat untuk layar yang lebih besar. Begitu juga sebaliknya, jika aturan media berlaku, sumbernya <img>tidak akan diunduh, melainkan akan mengunduh konten url yang sesuai.<source> tag yang .
Satu-satunya kekurangan di sini adalah bahwa jika elemen tidak didukung oleh browser, itu hanya akan memuat gambar kecil. Di sisi lain pada 2017 kita harus berpikir dan kode di ponsel terlebih dahulu pendekatan .
Dan sebelum seseorang terlalu keluar, inilah dukungan browser saat ini untuk <picture>:
Browser desktop
Browser seluler
Lebih lanjut tentang dukungan browser yang dapat Anda temukan di Dapatkah saya menggunakan .
Yang menyenangkan adalah kalimat html5please adalah menggunakannya dengan fallback . Dan saya pribadi berniat untuk mengambil saran mereka.
Lebih lanjut tentang tag Anda dapat menemukan dalam spesifikasi W3C . Ada penafian di sana, yang menurut saya penting untuk disebutkan:
The pictureelemen agak berbeda dari yang tampak serupa videodan audioelemen. Sementara semuanya mengandung sourceelemen, srcatribut elemen sumber tidak memiliki arti ketika elemen bersarang di dalam pictureelemen, dan algoritma pemilihan sumber daya berbeda. Selain itu, pictureelemen itu sendiri tidak menampilkan apa pun; itu hanya menyediakan konteks untuk imgelemen yang terkandung yang memungkinkannya memilih dari beberapa URL.
Jadi yang dikatakannya adalah itu hanya membantu Anda meningkatkan kinerja saat memuat gambar, dengan memberikan konteks tertentu.
Dan Anda masih dapat menggunakan beberapa sihir CSS untuk menyembunyikan gambar di perangkat kecil:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Dengan demikian browser tidak akan menampilkan gambar aktual dan hanya akan mengunduh 1x1gambar piksel (yang dapat di-cache jika Anda menggunakannya lebih dari sekali). Perlu diketahui, bahwa jika <picture>tag tidak didukung oleh browser, bahkan pada layar descktop gambar yang sebenarnya tidak akan ditampilkan (jadi Anda pasti akan memerlukan cadangan polyfill di sana).
