Gin

an average
frontend developer

Website Lemot, Mungkin Ini Bisa Membantu: Image-set

Salah satu penyebab web lemot yang paling umum: besarnya ukuran file gambar yang harus dimuat ketika website tersebut diakses.

By: Gin|11/07/2021|Web Development

Ada kalanya website yang sudah kita bikin dengan susah payah, berakhir dengan lemot ketika diakses. Penyebabnya bisa bermacam-macam, bisa diaudit dengan lighthouse dan semacamnya.

 

Salah satu yang paling umum, besarnya ukuran file gambar yang harus dimuat ketika website tersebut diakses.

 

Pertolongan pertama, tentu dengan mereduksi ukuran asset gambar. Gambar yang hanya akan muncul sebagai thumbnail misalnya, pastinya tidak perlu besar-besar amat ukurannya.

 

Pertolongan berikutnya, bisa mencoba optimasi dari segi HTML ataupun CSS.

 

CSS image-set()

 

Strategi optimasi dengan CSS ini bisa dilakukan apabila gambar yang dimaksud merupakan gambar background. Sederhananya begini: image-set() memungkinkan kita untuk memberi opsi kepada client untuk memuat gambar yang sudah di-optimasi sedemikian rupa dan disimpan dalam format next-gen image.

 

Apa itu next-gen image?

 

Next-gen images use formats with superior compression and quality characteristics compared to their GIF, JPEG, and PNG ancestors. These image formats support advanced features designed to take up less data while maintaining a high quality level, making them perfect for web use.

 

Jadi format gambar yang kita sediakan untuk client perlu diformat ulang sebagai next-gen image. Bisa sebagai file WEBP, ataupun AVIF.

 

Converter untuk kedua format tersebut bisa diakses disini:

 

Tapi pekerjaan kita belum selesai disitu.

 

Next-gen image adalah teknologi yang masih terhitung baru, sehingga besar sekali kemungkinan peramban yang digunakan untuk mengakses website belum mengenali format gambar generasi baru tersebut.

 

Di titik ini lah kita butuh css image-set().

 

Syntax nya seperti ini:

 

 

Contoh pemakaiannya:

 

 

 

Bisa dilihat dari contoh diatas, kita tetap memerlukan 'background-image' dengan syntax standar url(), karena sepertinya memang belum ada fallback yang bisa dipakai untuk sintaks image-set() ini.

 

Pemakaian -webkit-image-set() juga tetap kita perlukan untuk mengantisipasi peramban yang belum kompatibel.

 

Sintaks diatas akan dibaca oleh peramban, kira-kira seperti ini: jika peramban bisa memuat generasi terbaru, dia akan memuatnya. Jika tidak, dia akan memuat versi .jpg. Atau jika peramban sama sekali tidak mengenal sintaks image-set(), dia akan membaca sintaks url(), yang sudah pasti dia kenali.

 

HTML <picture> tag

 

Bagaimana jika gambar tersebut bukan gambar background, melainkan yang biasanya kita tampilkan dengan tag <img> ?

 

Di HTML, sudah ada tag <picture> yang tampaknya sudah disupport oleh banyak browser.

Contoh pemakaiannya seperti ini:

 

 

 

Dengan penulisan tag tersebut, browser pertama-tama akan mencoba membuka file 'balloon.avif'. Jika format tersebut tidak dikenali, browser akan memuat 'balloon.jpg', yang pastinya dia kenali.

 

Penutup

 

Saya pribadi jarang sekali memakai gambar sebagai background. Otomatis, saya jarang sekali menggunakan css image-set().

 

Saya jauh lebih sering menggunakan tag <picture> dalam hal ini. Pun, ketika dari segi desain kita membutuhkan gambar sebagai background, saya tetap memakai <picture> tag.

 

Bukan apa-apa, seringnya kasus yang terjadi adalah kita sebagai frontend hanya menerima data entah dari fetch API ataupun render views PHP. Jadi strategi yang paling sering saya gunakan adalah membungkus <picture> dalam sebuah parent element.

 

Parent element tersebut diberi position: relative, dengan dimensi width dan height yang konsisten (misalnya dengan memberi padding-top: 56.75% untuk mendapatkan aspect-ratio 16:9). Kemudian tag <img> tersebut kita beri position: absolute dengan width dan height sebesar 100%, serta tidak lupa memberinya object-fit: cover. Strategi ini akan memaksa gambar yang bersangkutan untuk mengisi seluruh space parent element, efeknya sama saja seperti layaknya gambar background.

 

Kira-kira demikian. Selamat mencoba.