CSS Trick : Cara Optimalisasi Loading Gambar pada Website

Last Updated on November 1, 2023 by

CSS Trick : Cara Optimalisasi Loading Gambar pada Website – Gambar merupakan salah satu elemen penting dalam web maupun aplikasi. Gambar berguna untuk  menjadi visualisasi dari konten-konten yang ditampilkan dalam web, disamping untuk menarik pengunjung terhadap konten yang ada pada website Anda.

Di era yang serba cepat ini, loading yang cepat juga sangat dibutuhkan. Untuk itu loading gambar yang cepat pada web menjadi salah satu hal yang harus diperhatikan oleh developer.

Pada artikel kali ini, kami menyajikan trik optimalisasi pemuatan (loading) gambar di web menggunakan CSS. CSS atau Cascading Style Sheets adalah bahasa pemrograman yang populer digunakan sebagai halaman depan atau tampilan dari website.

CSS banyak disukai oleh developer untuk mendesain front-end web karena beberapa alasan seperti, halaman menjadi lebih cepat dimuat, style yang lebih beragam dibanding HTML, dan kompatibel dengan berbagai macam perangkat. Berikut adalah CSS trick yang dapat Anda gunakan untuk optimalisasi loading gambar pada website Anda.

CSS Trick untuk Optimalisasi Loading Gambar pada Web

1. Membuat Layout yang Responsif

Membuat layout responsive adalah teknik yang dipahami dengan baik untuk membuat gambar menggunakan ruang horizontal yang tersedia hingga ukuran maksimumnya dengan tetap mempertahankan rasio aspek.

Kabarnya, browser web akan memesan ruang vertikal yang benar untuk gambar sebelum dimuat jika atribut ‘width’ dan ‘height’ disediakan untuk elemen ‘img’ di tahun 2020 kemarin. Teknik ini bertujuan untuk menghindari CLS atau Cumulative Layout Shift (Pergeseran Tata Letak Kumulatif). Contoh kode yang dapat Anda lakukan untuk menerapkan teknik ini:

<style>
img {
max-width: 100%;
height: auto;
}</
</style>
<!-- Memberikan lebar dan tinggi lebih penting dari sebelumnya. -->
<img height="1053" width="1480" … />

2. Tidak lagi membutuhkan Intrinsic Size

Sejak adanya Chromium 88 ini tidak lagi diperlukan untuk gambar yang memberikan lebar dan tinggi seperti yang dijelaskan di atas. Mesin browser lain belum menerapkan visibilitas konten: otomatis dan mungkin akan mengikuti petunjuk Chromium dalam kasus khusus ini. Jadi, pemuatan gambar jauh lebih sederhana sekarang. Contoh kode:

<style>
/* Hal ini mungkin hanya masuk akal untuk gambar di dalam area utama halaman yang dapat digulir. */
main img {
/* Hanya merender pada viewport */
content-visibility: auto;
}
</style>

3. Menggunakan format AVIF

AVIF adalah format gambar terbaru yang telah diadopsi di browser web. Saat ini format AVIF didukung di browser Chromium dan tersedia juga di Firefox. AVIF terkenal karena secara konsisten mengungguli JPEG dalam cara yang sangat signifikan. Ini berbeda dengan WebP yang tidak selalu menghasilkan gambar yang lebih kecil dari JPEG.

Untuk mengimplementasikan peningkatan progresif untuk AVIF, Anda dapat menggunakan elemen gambar. Elemen ‘img’ yang sebenarnya ada di dalam gambar. Hal ini dapat sangat membingungkan, karena ‘img’ terkadang dideskripsikan sebagai fallback untuk browser tanpa dukungan gambar tetapi pada dasarnya elemen gambar hanya membantu pemilihan ‘src’ tetapi tidak memiliki layout itu sendiri. Elemen yang digambar maupun yang telah Anda lakukan styling adalah elemen img.

Sampai saat ini relatif sulit untuk benar-benar menyandikan gambar AVIF di sisi server, tetapi dengan versi terbaru pustaka seperti Sharp, sekarang hal itu pun dapat dengan mudah dilakukan. Contoh kode dengan menggunakan format AVIF.

<picture>
<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/P1s5TKZ-1920w.avif 1920w,
/img/P1s5TKZ-1280w.avif 1280w,
/img/P1s5TKZ-640w.avif   640w,
/img/P1s5TKZ-320w.avif   320w
"
type="image/avif"
/>
<!-- memotong banyak hal lainnya -->
<img />
</picture>

4. Memuat jumlah piksel yang benar

Coba perhatikan atribut ‘srcset’ dan ‘size’ pada kode sebelumnya. Menggunakan selector w bertujuan untuk memberitahu browser URL mana yang akan digunakan berdasarkan piksel fisik yang akan digunakan jika gambar tersebut ditampilkan ke perangkat pengguna dengan mempertimbangkan lebar yang dihitung dari atribut ukuran.

Dengan demikian browser akan selalu mengunduh gambar sekecil mungkin namun memberikan kualitas gambar terbaik kepada pengguna.

5. Melakukan Fallback

Sediakan lebih banyak elemen sumber dengan ‘srcset’ untuk browser yang hanya mendukung format gambar lama. Contoh kode yang bisa Anda gunakan:

<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/P1s5TKZ-1920w.webp 1920w,
/img/P1s5TKZ-1280w.webp 1280w,
/img/P1s5TKZ-640w.webp   640w,
/img/P1s5TKZ-320w.webp   320w
"
type="image/webp"
/>
<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/P1s5TKZ-1920w.jpg 1920w,
/img/P1s5TKZ-1280w.jpg 1280w,
/img/P1s5TKZ-640w.jpg   640w,
/img/P1s5TKZ-320w.jpg   320w
"
type="image/jpeg"
/>

6. Caching atau Buat URL yang Tidak Dapat Diubah

Anda dapat menyematkan hash byte pada gambar yang terdapat di URL gambar. Dalam contoh sebelumnya menggunakan P1s5TKZ di URL gambar. Dengan demikian, URL akan berubah jika gambar berubah dan Anda masing-masing dapat menerapkan masa berlaku cache tak terbatas untuk gambar Anda. Anda ingin header caching Anda terlihat seperti ini: ‘cache-control: public. max-age = 31536000, immutable’.

‘immutable’ adalah nilai ‘cache-control’ yang benar secara semantik, tetapi sayangnya nilai ini tidak didukung secara luas di berbagai browser yang ada saat ini. ‘max-age = 31536000 ‘ adalah fallback ke cache selama satu tahun. ‘public’ adalah elemen penting untuk mengizinkan CDN Anda menyimpan gambar dan mengirimkannya dari edge. Tetapi hanya gunakan itu jika sesuai dari perspektif privasi.

7. Menambahkan Lazy Loading

Mungkin istilah Lazy Loading terkesan aneh. Namun teknik ini memberi dampak signifikan untuk optimalisasi pemuatan gambar pada website Anda.

Tambahkan ‘loading=”lazy” pada instruksi ‘img’ browser hanya untuk mulai mengambil gambar saat gambar semakin dekat ke layar dan kemungkinan besar akan ditampilkan. Contoh kode:

<img loading="lazy" … />

8. Dekoding Asinkron

Menambahkan ‘decoding = “async”’ ke ‘img’ berfungsi untuk memberikan izin kepada browser untuk mendekode gambar dari utas utama untuk menghindari dampak pengguna dari CPU yang digunakan untuk mendekode gambar. Contoh kode:

<img decoding="async" … />

9. Membuat Blurry Placeholder

Blurry Placeholder adalah gambar sebaris yang memberi pengguna beberapa gagasan tentang gambar yang pada akhirnya akan dimuat tanpa memerlukan pengambilan byte dari jaringan. Contoh kode:

&lt;img
style="
…
background-size: cover;
background-image:
url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http%3A//www.w3.org/2000/svg\'
xmlns%3Axlink=\'http%3A//www.w3.org/1999/xlink\' viewBox=\'0 0 1280 853\'%3E%3Cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3E%3CfeGaussianBlur stdDeviation=\'.5\'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type=\'discrete\' tableValues=\'1 1\'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=\'url(%23b)\' x=\'0\' y=\'0\' height=\'100%25\' width=\'100%25\'
xlink%3Ahref=\'data%3Aimage/png;base64);
"
…
/>

Selain dengan cara-cara di atas, Anda juga dapat mengoptimalisasi loading gambar dengan mengoptimalisasi loading web secara keseluruhan. Anda dapat mengikuti tips-tips optimalisasi website agar loading website Anda lebih cepat dan efektif.

CSS Trick untuk Optimalisasi Website agar Website menjadi lebih smooth

1. Jangan kelompokan Selector dengan Common Declarations (deklarasi umum)

CSS dapat melakukan optimalisasi secara signifikan dengan menggabungkan Common Declaration ke dalam kelas-kelas terpisah. Hal ini menjadi mungkin untuk dilakukan karena kemampuan menetapkan beberapa kelas ke dalam satu elemen didukung oleh banyak browser.

Anda dapat mereferensikan beberapa kelas dengan memberikan opsi yang lebih baik untuk menata konten dan memungkinkan elemen dengan gaya yang sama untuk dikelompokan ke dalam satu kelas bersama.

2. Mengelompokan File CSS Eksternal

Guna meminimalkan permintaan HTTP, mengelompokkan file CSS eksternal dapat berdampak drastis pada kecepatan muat situs. Ada beberapa metode untuk melakukannya, tetapi lebih baik menyertakannya secara langsung di halaman HTML.

3. Pengelompokan Selector

Cara terbaik untuk menerapkan beberapa deklarasi ke beberapa selector dilakukan dengan menggabungkan pengelompokan selector yang berbagi deklarasi. Kemudian, menggabungkan pengelompokan deklarasi yang menggunakan selector yang sama. Hasilnya adalah seperangkat aturan CSS yang ringkas dan lebih kuat.

4. Menggunakan Descendant Selector tanpa Selector Kelas

Selector turunan digunakan untuk mencocokkan semua elemen yang merupakan turunan dari elemen yang ditentukan sehingga penggunaan turunan menjadi lebih efisien untuk mendapatkan yang lebih spesifik tanpa menggunakan selector kelas atau ID.

Selector kelas hanya akan lebih efisien jika ada persyaratan untuk melakukan encode style ke dalam nama dan menggunakannya dalam aturan.

5. Menggunakan elemen Inherit

Elemen inherit adalah elemen yang berfungsi agar suatu elemen dapat mewarisi elemen properti dari elemen induknya. Elemen turunan ini pun akan mewarisi keluarga yang sama dari aturan tersebut. Menentukan nilai inherit akan menyebabkan suatu elemen mendapatkan nilai yang dihitung dari induknya untuk properti yang dimaksud.

6. Praktek Penggunaan Value Replication (Replikasi Nilai)

Anda dapat menggunakan Value Replication untuk batas, warna batas, dan grafik lainnya sehingga Anda dapat menghemat ruang yang diperlukan untuk situs. Penggunaan satu nilai dapat diterapkan ke keempat sisi, yang memungkinkan replikasi menjadi lebih efisien.

7. Menggunakan Kelas Lebih Pendek dan Nama ID

Memanfaatkan nama kelas yang panjang dapat menambah byte tambahan ke situs sehingga memperlambat proses loading. Oleh karena itu dianjurkan untuk menggunakan kelas yang lebih pendek dari nama ID bisa lebih bermanfaat dalam jangka panjang.

8. Komentar CSS Harus Dihapus

Cara terbaik untuk mengurangi ukuran keseluruhan situs adalah dengan menggunakan komentar PHP di CSS. Apabila sudah diuraikan dengan benar secara otomatis akan menghapus komentar. Selain itu, setelah Anda terbiasa dengan tata letak situs, Anda tidak perlu menambahkan komentar.

9. Singkatan Warna atau Nama Heksadesimal

Singkatan warna heksadesimal didukung oleh sebagian besar browser, dan dapat menjadi metode paling efisien untuk menentukan warna dalam situs. Hal ini berguna untuk memastikan ukurannya seminimal mungkin.

Kecuali jika nama warna Anda lebih pendek dari warna hex yang diberi nama singkatan (navy, ungu, dll.), Lebih baik menggunakan yang terakhir.

Jika Anda tertarik untuk tahu lebih banyak seputar web design, jangan lupa kunjungi Web App di https://appkey.id/ dan nyalakan notifikasi dari website kami agar Anda tidak ketinggalan artikel terbaru.