Progressive Image Loading dengan BlurHash

BlurHash adalah sebuah representasi dari placeholder gambar dalam bentuk string singkat (sekitar 20-30an karakter per gambar).

Kebanyakan dari website yang biasa kita akses biasanya menggunakan background dengan warna tertentu sebagai placeholder hingga image selesai di-load, dan biasanya juga menggunakan placeholder yang sama untuk semua image. Paling sering biasanya yang digunakan adalah background dengan warna abu-abu.

Dengan menggunakan BlurHash, kamu bisa membuat placeholder yang unik untuk setiap image. Karena BlurHash sendiri adalah dalam bentuk string singkat seperti ini LEHV6nWB2yk8pyo0adR*.7kCMdnj, jadi bisa ditempelkan langsung ke file html jika menggunakan static html atau bisa dikirim dengan API bersamaan dengan link gambar aslinya jika gambar yang ingin di-load bersifat dinamis.

Dari hash tersebut kemudian di-decode menjadi gambar blur yang merepresentasikan aslinya

Di akun github resminya, terdapat berbagai implementasi untuk berbagai platform. Saya sendiri membuat implementasi yang bisa digunakan pada file html biasa tanpa harus ada javascript sama sekali.

Cara menggunakannya sangat simpel, cukup dengan memasang script berikut di html

<script src="https://unpkg.com/rescript-blurhash@0.3.2/dist/production.min.js"></script>

kemudian di setiap image tambahkan attribute data-blurhash seperti ini

<img
   src="https://blurha.sh/assets/images/img1.jpg"
   data-blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
   style="width: 269px; height: 173px"
/>

Maka otomatis gambar akan menampilkan placeholder berupa versi blurnya terlebih dahulu hingga gambar tersebut selesai di-load.

Oh iya, untuk melakukan encoding kamu bisa menggunakan website resmi blurhash atau menggunakan salah satu dari berbagai implementasinya tadi.

Sebagai demo saya menggunakan gambar kategori produk dari tokopedia dimana aslinya tokopedia menggunakan placeholder background berwarna abu-abu. Demo bisa kamu lihat dengan klik link ini. Untuk melihat bagaimana blurhash diload mungkin kamu perlu mensimulasikan slow network pada devtools di browser terlebih dahulu dan kemudian lakukan hard reload.

Kodenya bisa kamu liat disini