Gambar Responsif yang Lebih Baik dengan Elemen picture

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Artikel ini akan memperkenalkan Anda kepada <picture>, sebuah elemen baru yang diajukan yang dibuat untuk mencoba dan memecahkan masalah dalam menyajikan versi gambar konten yang lebih sesuai dengan perangkat yang saat ini mengunjungi halaman web.

Mengapa Kita Membutuhkan Elemen Baru?

Responsive Web Design (RWD) telah menerpa pengembang dan desainer web dengan badai, mengubah cara mereka dalam mendekati pengembangan situs web. Saat membicarakan RWD, saya suka membuat analogi. Kita, sebagai orang-orang yang terlibat dalam pengembangan perangkat lunak, selalu bersemangat dengan alat-alat baru dengan cara yang sama seperti seorang anak senang dengan mainan baru (Anda pernah mendengar tentang cacian baru-baru ini tentang alat otomasi front-end, bukan?). Kita sangat tertarik dengan mainan baru yang terkadang kita gunakan, dan bahkan kita kembangkan, alat yang tidak menyelesaikan masalah nyata. Nah, RWD tidak seperti mainan baru yang disukai semua orang, tanpa alasan bagus. Ini adalah metodologi yang membantu kita memecahkan masalah nyata: mengadaptasi situs web untuk berbagai macam layar. Namun, sebanyak (semua?) hal dalam hidup, itu tidak sempurna dan memiliki beberapa keterbatasan.

Salah satu masalah utama yang paling penting adalah menyajikan gambar konten untuk rangkaian perangkat yang hampir tak terbatas, mencoba menyajikan versi yang lebih sesuai dengan perangkat tertentu yang saat ini mengunjungi situs web kita. Bagi Anda yang tidak tahu apa itu konten gambar, mereka adalah bagian gambar dari konten. Oleh karena itu, mereka harus ditunjukkan menggunakan tag <img> dan bukan aturan CSS seperti background-image. Sejauh ini, tiga proposal utama dibuat, dibahas, ditolak, dan bahkan dibangkitkan (sebagai elemen picture). Usulannya adalah: atribut srcset, elemen picture, dan atribut src-n. Semua dari mereka mencoba untuk menutupi rentang kasus penggunaan yang lebih luas, namun sayangnya bagi kita, tidak satupun dari mereka disambut sepenuhnya oleh semua aktor yang terlibat. Pada saat penulisan ini, nampaknya <picture> akan menjadi caranya karena komentar positif pada usulan yang dirubah oleh perwakilan browser utama. Yang saya maksud dengan dirubah, adalah bahwa proposal asli telah diperbarui dengan menggabungkan beberapa fitur dari proposal atribut src-n.

Menimbang bahwa berdasarkan data terbaru dari HTTPArchive.org, gambar terdiri dari 62% dari total berat sebuah halaman web, Anda dapat dengan mudah memahami bahwa memecahkan masalah gambar konten adalah masalah utama, dan semakin cepat kita sampai pada solusinya, lebih baik. Kenyataannya, peningkatan bagaimana dan gambar apa yang disajikan akan menyebabkan pemuatan situs web yang lebih cepat, yang pada gilirannya akan mengarah pada peningkatan pengalaman pengguna dari situs web.

Catatan Penting

Sebelum pergi ke depan, saya ingin menekankan bahwa ini masih sebuah proposal, oleh karena itu, spesifikasinya dalam kondisi fluks, dan tidak ada yang dapat meyakinkan Anda bahwa <picture> akan mencapai tahap akhir. Sebagai tambahan, sebagai proposal pada tahap awal, tidak ada browser yang menawarkan dukungan untuknya. Untuk alasan ini, saya sangat menyarankan Anda untuk mengikuti diskusi ini, membaca spesifikasinya dari waktu ke waktu, dan menunggu sampai proposal ini mencapai keadaan yang lebih stabil.

Apa Itu Elemen `<picture>`?

Mengutip spesifikasinya, "elemen picture dimaksudkan untuk memberi penulis cara untuk mengendalikan sumber gambar mana yang diberikan user agent kepada pengguna, berdasarkan media query dan/atau dukungan untuk format gambar tertentu". Ini, "harus digunakan saat sumber gambar ada dalam banyak kepadatan, atau bila desain responsif menentukan gambar yang agak berbeda pada beberapa jenis layar ("art direction)".

Elemen yang diusulkan dibuat dari beberapa bagian yang akan kita analisa secara rinci. Fakta pertama yang perlu Anda ketahui adalah bahwa itu hanyalah sebuah kontainer untuk elemen lain dimana kita benar-benar menentukan versi versi gambar yang ingin kita tampilkan. Di dalam elemen picture Anda dapat menemukan dua tag: <source> dan <img>. Yang terakhir ini digunakan untuk memberikan kompatibilitas ke belakang untuk browser lawas atau, secara umum, untuk browser yang tidak mendukungnya. Elemen source memiliki tiga atribut yang tersedia:

srcset: Di sinilah kita menentukan URL gambar yang ingin kita tampilkan. Atribut yang memungkinkan banyak URL dipisahkan dengan koma. Selain itu, mengambil isyarat dari usulan atribut srcset, kita dapat memasangkan masing-masing URL dengan spesifikasi resolusi layar atau lebar (dianggap sebagai aturan min-width). Yang terakhir dipisahkan dari URL oleh spasi.
media: Di sini kita menulis sebuah media query yang, jika dievaluasi secara benar, akan menyarankan kepada UA untuk menunjukkan gambar yang ditentukan dalam atribut srcset.
sizes: Atribut dimana kita menentukan sekumpulan ukuran intrinsik untuk sumber-sumber yang dijelaskan dalam atribut srcset. Ini menerima banyak ukuran yang dipisahkan oleh tanda koma.

Sampai sekarang, kita telah menghabiskan terlalu banyak waktu untuk berbicara dan melihat tidak ada yang konkret. Mari kita perbaiki ini dengan melihat beberapa kode!

`<picture>` dalam Aksi

Sebagai contoh pertama, katakanlah kita mengembangkan sebuah situs web dengan pendekatan mobile-first. Sekarang, kita ingin menampilkan gambar konten dan me-render gambar "mobile.png" secara default, gambar "tablet.png" jika layar pengguna minimal 480px, dan "desktop.png" jika layar pengguna setidaknya 1024px. Karena kita adalah pengembang yang cerdas, kita juga ingin me-render gambar "tablet.png" bagi browser yang tidak mengerti elemen picture. Untuk mencapai tujuan ini, kita harus menulis kode berikut ini:

<picture>
   <source srcset="mobile.png">
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source media="(min-width: 1024px)" srcset="desktop.png">
   <img src="tablet.png" alt="A photo of London by night">
</picture>

Pada kode di atas, kita telah mengadopsi piksel sebagai unit untuk media queries, namun Anda dapat menggunakan em jika Anda mau.

Contoh pertama yang ditunjukkan cukup mudah. Mari kita lihat bagaimana kita bisa membuatnya lebih canggih dengan menggunakan kekuatan ekspresif dari atribut srcset. Demi contohnya, bayangkan bahwa selain persyaratan sebelumnya kita ingin membedakan gambarnya berdasarkan resolusi layar. Kode yang dihasilkan tercantum di bawah ini:

<picture>
   <source srcset="mobile.png, mobile-hd.png 2x">
   <source media="(min-width: 480px)" srcset="tablet.png, tablet-hd.png 2x">
   <source media="(min-width: 1024px)" srcset="desktop.png, desktop-hd.png 2x">
   <img src="tablet.png" alt="A photo of London by night">
</picture>

Seperti yang dapat Anda lihat, untuk setiap <source> dalam kode, kita telah menetapkan lebih dari satu URL ke dalam atribut srcset. URL kedua dipasangkan dengan string 2x, dipisahkan oleh spasi, yang menargetkan pengguna dengan layar beresolusi tinggi (kepadatan piksel 2x, seperti Retina). Dalam kasus ini, browser akan terlebih dahulu mencari elemen source yang paling mengakomodasi layar pengguna berdasarkan media query yang ditentukan (jika ada). Kemudian, itu akan melihat pada resolusi layar dan memilih yang terbaik di antara gambar yang ditentukan dalam atribut srcset.

Sebagai contoh terakhir, kita akan melihat bagaimana kita bisa menggunakan atribut sizes. Katakanlah kita ingin gambar kita menutupi semua lebar dari perangkat (100% dari lebar), terlepas dari ukuran dan kerapatan pixelnya yang sebenarnya. Untuk mencapai tujuan ini, kita dapat menentukan ukuran yang ingin kita tutupi dan ukuran setiap gambar dalam atribut srcset seperti gambar di bawah ini:

1	<picture>
2	<source sizes="100%" srcset="mobile.png 480w, small-tablet.png 768w, tablet.png 968w, desktop.png 1024w">
3	<img src="tablet.png" alt="A photo of London by night">
4	</picture>

Dalam kasus ini, User Agent secara otomatis menghitung kerapatan piksel gambar yang efektif dan memilih yang mana yang akan diunduh sesuai dengannya.

Kompatibilitas Browser

Tidak ada. "Hei Aurelio, apa yang Anda maksud dengan tidak ada? Saya sudah mulai memperbarui situs web saya! Jika Anda mengenali diri Anda dalam kalimat ini, saya minta maaf mengecewakan Anda. Seperti yang saya katakan beberapa kali di artikel ini, elemen picture masih merupakan usulan dan pada tahap awal. Jadi, Anda harus menunggu beberapa lama sebelum memiliki kesempatan untuk menggunakannya. Tidak semuanya yang hilang, sungguh. Scott Jehl menciptakan sebuah polyfill untuk usulan ini yang disebut picturefill. Yang terakhir ini dikembangkan beberapa bulan yang lalu namun telah diperbarui beberapa kali untuk mengakomodasi spesifikasinya. Saat ini, tidak diperbarui dengan spesifikasi terbaru, jadi sintaksnya berbeda dari yang dijelaskan pada artikel ini. Namun, Anda masih bisa melihatnya dan mungkin membuat Pull Request untuk membantu proyek ini.

Kesimpulan

Pada artikel ini kita membahas masalah penyajian gambar konten yang sesuai untuk perangkat yang saat ini mengunjungi situs web. Kemudian, kita menyelidiki spesifikasi elemen picture, usulan yang tampaknya telah berhasil mendamaikan vendor browser, pengembang, dan semua aktor yang terlibat dalam proses tersebut. Sayangnya bagi kita, ini pada tahap awal, jadi kita tidak bisa menggunakannya di proyek kita selanjutnya. Meskipun demikian, saya yakin bahwa vendor browser akan mulai menerapkannya segera. Sebagai catatan terakhir, saya sangat menganjurkan Anda untuk membaca dan mengikuti spesifikasinya.