Fitur Lazy load Image otomatis pada browser

Gambar merupakan salah faktor yang bisa membebani kecepatan pemuatan blog. Apalagi jika dalam blog tersebut terdapat banyak gambar dengan resolusi yang terbilang besar dan tidak dikompres terlebih dahulu.

Salah satu solusi dalam yang paling umum digunakan untuk mengatasi permasalahan ini yaitu dengan menambahkan script lazy load untuk gambar. Cara kerja script ini cukup sederhana, yaitu setiap tag img yang terdapat dalam postingan akan dieksekusi dengan cara memuat sebuah file gambar berukuran kecil terlebih dahulu dan setelah halaman termuat barulah gambar asli dimuat dan menggantikan gambar berukuran kecil tadi.


Fitur Lazy load Image otomatis pada browser



Salah satu downside dengan menggunakan metode ini adalah karena menggunakan javascript maka bisa dipastikan gambar tidak akan termuat jika pengakses mematikan javascript di browser mereka. Tapi ini bukanlah masalah serius, toh sangat sedikit pengguna yang mematikan javascript di browser mereka.

Sekarang ada berita baik mengenai permasalahan pemuatan gambar ini. Beberapa browser seperti Chrome sudah memiliki fitur lazy load gambar dan iframe otomatis. Para pengembang memasukkan fitur ini ke dalam api browser mereka. Artinya kita tidak lagi harus menggunakan javascript eksternal.

Namun untuk fitur baru didukung beberapa browser saja dan Mozilla firefox belum termasuk diantaranya. Tapi pasti developer browser mozilla akan menambahkan fitur lazy load ini dalam api mereka.

Cara penggunaan
Untuk cara pengimplementasiannya cukup sederhana yaitu dengan menambahkan atribut loading="lazy" pada semua tag gambar yang kalian gunakan. Contoh:

<img alt="Fitur Lazy load Image otomatis pada browser"  loading="lazy" src="https://1.bp.blogspot.com/-O43fwtFXgQ8/XjZZy2xf1zI/AAAAAAAAA5g/NMrQK66eaaIFmYtSleZ3kW_nA0F3warDgCLcBGAsYHQ/s1600/lazy-load-min.png" title="Fitur Lazy load Image otomatis pada browser" />

Untuk browser yang sudah mendukung fitu lazy load sejauh ini adalah Chrome 76 - 82, edge 79, opera 64, android browser 76, Chrome android 79. Untuk selengkapnya bisa dilihat di https://caniuse.com/#search=loading.

Batalkan

Iklan di atas postingan

Iklan di tengah postingan 1

Iklan di tengah postingan 2

Iklan di bawah postingan