Cara Mempercepat Loading Image Pada Website

Hai. kali ini saya akan membagikan tips keren tentang cara mempercepat atau memperbaiki loading image pada website. Tips kali ini tidak menggunakan js atau plugin lain.

Cara meningkatkan pemuatan gambar pada website, bisa dilakukan dengan menggunakan atribut lebar dan tinggi. Saya sering melihat banyak situs website besar yang tidak menggunakan atribut lebar dan tinggi, contohnya kompasdotkom, 

Masalahnya adalah ada banyak jank ketika gambar pertama kali dimuat, karena image secara alami akan memiliki tinggi 0 sebelum aset gambar berhasil diunduh oleh browser. Jadi kita harus menambahkan atribut tinggi dan lebar ke gambar seperti contoh berikut:

<img src="gambar.jpg" height="300" width="300" alt="gambar mohsai"/>

Ini karena Firefox & Chrome sekarang akan mempertimbangkan nilai-nilai itu dan menghapus semua jank sebelum gambar dimuat, bahkan ketika kalian mengganti nilai-nilai itu dalam CSS dengan lebar yang berubah-ubah dan dengan demikian ketinggian tidak diketahui.

Itu berarti konten akan selalu tetap di posisi yang sama, bahkan jika gambar belum dimuat. Saya rasa cara ini dapat memperbaiki loading image dengan cukup baik.

Semoga artikel saya tentang Cara Mempercepat Loading Image Pada Website kali ini bermanfaat dan menambah informasi baru untuk kalian. Jika kalian menyukai posting ini, kalian bisa membagikan artikel ini.

Sumber : https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/