Saat kita membuat web berisi gambar, seringkali kita menggunakan satu file gambar saja yang dimuat di web desktop maupun web mobile. Simple sih, tapi itu dapat menimbulkan masalah. Kalau memuat image dengan ukuran HD menggunakan web desktop tentu ga masalah. Tapi misalkan image HD tersebut juga dimuat pada web mobile atau tablet tentu ga efisien. Resolusi layar di desktop, tablet, dan mobile itu berbeda. Image ukuran besar belum tentu cocok digunakan pada device dengan layar kecil. Selain itu, Image dengan resolusi tinggi ukuran filenya pasti besar. Memuat image dengan resolusi tinggi pada tablet atau mobile akan memakan bandwidth user secara berlebihan. Hal itu j uga beresiko menurunkan performa web saat akses dari mobile karena orang yang menggunakan jaringan internet pada mobile biasanya menggunakan paket data dari operator seluler. Untungnya pada HTML ada triknya agar kita bisa memuat gambar pada halaman web dengan efisien sehingga pada web desktop, mobile, maupun tablet akan memuat image yang optimal pada masing-masing device.
Memuat Image Responsive
Untuk memuat image pada web, kita bisa menggunakan tag img. Agar website responsive, pastikan ada tag meta dengan name viewport dan content width=device-width, initial-scale=1.0 di bagian head. Lengkapnya seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<img style="max-width: 100%;" src="https://images.ctfassets.net/7wjlcr9d5ii8/1mCiTWtrpEvKLOgZJD4K9l/304fafb18bc8be11b238e9a6ff93f390/puasa.png" alt="anak bayi"/>
</body>
</html>Gw menggunakan foto anak bayi dari aset yang ada di web ini aja. Pada code di atas, kita masih menggunakan satu jenis foto. Foto yang sama di tahap ini masih dimuat pada semua device seperti desktop, mobile, maupun tablet.
Siapkan Foto Berbeda
Untuk memuat image yang responsive pada device berbeda, kita perlu bedakan juga file foto yang ingin dimuat di desktop, mobile, dan tablet. Berhubung gw menggunakan image dari Contentful Assets, gw bisa mengakalinya menggunakan parameter pada url image. Kalau mau menggunakan tools lain ataupun edit foto manual juga bisa. Intinya nanti akan ada 3 file foto berbeda yang akan digunakan. Pada contoh ini, gw menggunakan file dengan ukuran 417x300 untuk mobile, ukuran 815x586 untuk tablet, dan ukuran default untuk desktop. Ukurannya disesuaikan aja berdasarkan selera masing-masing. Pada kasus ini kebetulan itu yang menurut gw cocok. Oh ya, agar objek pada fotonya terlihat jelas dan ga kekecilan pada device mobile, bisa di-crop juga fotonya untuk ukuran mobile. Pada kasus gw, untuk tampilan mobile gw akan crop bagian sisi background yang ga diperlukan agar objek wajah bayinya nanti terlihat jelas. Jadi gw ga cuma ganti resolusinya, tapi juga akan crop fotonya✂️.
Art Direction
Agar image yang dimuat berbeda sesuai ukuran resolusi layar, kita bisa menggunakan Art Direction dengan menambahkan tag picture dan source. Codenya jadi seperti ini:
<picture style="display: block; text-align: center;">
<source media="(max-width: 430px)"
srcset="https://images.ctfassets.net/7wjlcr9d5ii8/1mCiTWtrpEvKLOgZJD4K9l/304fafb18bc8be11b238e9a6ff93f390/puasa.png?w=417&h=300&q=100&fit=thumb&f=faces" />
<source media="(max-width: 1024px)"
srcset="https://images.ctfassets.net/7wjlcr9d5ii8/1mCiTWtrpEvKLOgZJD4K9l/304fafb18bc8be11b238e9a6ff93f390/puasa.png?w=815&h=586&q=100&fit=thumb&f=faces" />
<img style="max-width: 100%;"
src="https://images.ctfassets.net/7wjlcr9d5ii8/1mCiTWtrpEvKLOgZJD4K9l/304fafb18bc8be11b238e9a6ff93f390/puasa.png"
alt="Bayi" />
</picture>Kita menggunakan media query pada tag source seperti pada css untuk menentukan gambar mana yang ditampilkan sesuai ukuran viewport layar. Viewport adalah area halaman yang ditampilkan di browser. Tag source dengan (max-width: 430px) artinya adalah untuk web dengan lebar viewport di bawah 430px akan memuat foto sesuai srcset pada tag tersebut. Ini adalah tag untuk load foto pada viewport mobile. Ukuran 430px ini adalah lebar maksimal untuk device mobile. Sebenarnya ga harus segini juga sih, viewport hp itu bermacam-macam kisaran 300an hingga 400an pixels. Berdasarkan riset kecil-kecilan gw, lebar viewport hp maksimal itu sejauh ini adalah 430px seperti pada Iphone 14 Pro Max. Jika lebar viewportnya di atas 430px, maka browser akan mencari tag source lain yang sesuai. Tag source dengan (max-width: 1024px) artinya jika lebar viewport device di bawah 1024px, maka dia akan memuat foto sesuai srcset pada tag ini. Ini adalah tag untuk load foto pada device tablet. Angka 1024px ini gw ambil dari lebar viewport iPad Pro 12. Jika tidak ada satupun media query yang cocok, maka foto yang dimuat adalah yang ada pada attribute src pada tag img sebagai fallback. Oh ya, pastikan juga urutan tag source ini terurut dari yang terkecil hingga terbesar untuk mencegah anomali💡. Sekarang, browser pada mobile akan mendownload foto dengan resolusi kecil, browser pada tablet akan mendownload foto dengan resolusi medium, dan browser desktop akan mendownload foto dengan resolusi tinggi. Tampilan foto pada masing-masing device jadi lebih optimal secara tampilan maupun performa😎. Repository contoh code ini ada di github gw.
Alternatif Lain
Mungkin ada yang berpikiran, kenapa ga pake css aja buat ngebedain ukuran antar device? Menggunakan css itu hanya memberikan solusi dengan memotong foto yang ditampilkan. User tetap akan mendownload gambar HD berukuran puluhan MegaBytes pada semua device. Itu bisa bikin kuota user yang menggunakan mobile terbuang mubazir😅. Selain itu, css ga bisa mendeteksi apakah objek yang ada di foto itu masih terlihat jelas atau tidak setelah ukurannya disesuaikan pada device. Bisa jadi gepeng, bisa jadi juga objeknya malah jadi ga terfokus. Dengan menggunakan Art Direction kita bisa potong foto sendiri, ganti resolusi, dan tentukan foto mana yang ingin dimuat khusus viewport tertentu. Selain itu, ada juga cara lain menggunakan attribute srcset dan sizes pada tag img. Tapi menurut gw ini cenderung ribet dan dapat terjadi anomali karena attribute tersebut ga hanya mendeteksi ukuran saja, tapi juga rasio layar. Bisa jadi lebar viewport layarnya 400px tapi rasio layarnya 3, sehingga justru foto yang lebih besar yang akan dimuat🤯. Art Direction ini yang menurut gw yang lebih konsisten rulesnya dan dapat dimengerti dengan mudah.
Verdict
Dengan Art Direction, browser akan otomatis memilih foto yang akan ditampilkan sesuai ukuran viewport. Ini dapat menghemat penggunaan bandwidth user. Masa user dengan layar kecil harus mendownload foto HD berukuran puluhan MegaBytes? Bisa cepat abis dong kuota paket datanya😅. Lagian ga maksimal juga tampilannya di hp. Apalagi misalkan fotonya memiliki objek di tengah dengan background gede di bagian sisinya. Untuk desktop mungkin masih bagus, tapi untuk mobile tentu ukuran objeknya jadi kekecilan dan malah ga kelihatan jelas. Berkat tag picture dan source kita bisa membedakan foto apa yang ingin ditampilkan untuk device tertentu. Pada kasus ini gw hanya menggunakan 3 tipe foto, untuk mobile, tablet, dan desktop. Untuk kasus spesifik, bisa juga menggunakan lebih dari 3 tipe foto. Misalnya saat ingin develop web untuk ditampilkan pada monitor gede atau TV ukuran lebar, tinggal tambah aja tag source dan jenis fotonya. Untuk batas maksimalnya sih ga ada, tapi best practice yang gw ketahui sih maksimal 5 tipe foto saja. Thumbnail di homepage blog ini juga menggunakan Art Direction. Bisa cek sendiri ukuran dan tampilan thumbnail fotonya menggunakan berbagai device, pasti berbeda😎.