Tips Responsive Image Dengan CSS

Zainal Hasan |

Beberapa minggu ini saya menjalani kegiatan KKN mandiri dan mendapat tugas untuk membuat berita desa. Jadi, saya coba buka website Sekolah Desa Unej untuk mencari referensi berita desa. Eh pas dibuka beginilah kira-kira tampilan web yang saya lihat:

https://media.giphy.com/media/gjBH7ukVdS4eRGgg3U/giphy.gif

Auto sedih, kenapa malah terkesan vendor nya belum profesional yaa. Padahal dalam dunia web apps, manajemen asset harus diperhatikan betul bagaimana kontrolnya. Apalagi kalau asset nya dinamis seperti featured image tersebut. Nah, biar artikel tidak berkesan hanya sebuah judgement untuk vendor, maka saya akan coba paparkan beberapa solusi.

📏 Validasi Dimensi Gambar

Solusi pertama dan paling hemat sumber daya adalah memberi validasi dimensi gambar saat di-upload. Sebagai contoh, di Laravel ada yang namanya validasi dimensi gambar. Namun, kekurangannya adalah UX dari web tidak lagi baik karena ketika user akan upload gambar maka harus menyesuaikan dimensi gambar terlebih dahulu.

✅ CSS Background Image

Solusi ini merupakan salah satu opsi yang cukup populer untuk digunakan saat memulai project. Namun akan sedikit sulit diimplementasikan jika pada existing project. Hal ini dikarenakan kita akan menggunakan tag div sebagai wadah untuk gambarnya. Nantinya, tag div ini akan diberi CSS property background-image. Contoh:

Tapi, opsi ini memiliki kekurangan pada sisi SEO. Selain itu, ini juga tidak memenuhi standar HTML. Hal ini dikarenakan kita tidak menggunakan tag img secara langsung.

✨ CSS Object Fit

Solusi ini merupakan favorit saya karena sangat mudah diimplementasikan. Sederhananya, object fit ini mirip dengan background-image namun dapat diterapkan pada tag img secara langsung. Seperti ini implementasinya:

Dari snippet result diatas sudah terlihat kalau gambar sudah lebih baik bukan? Dan itu semua tidak merubah html sedikitpun. Hanya menambah beberapa baris kode css.

Oke, mungkin itu saja yang bisa saya bagikan saat ini. Semoga bermanfaat.

Related post