Cara menggunakan Generator BlurHash & LQIP
- Pilih foto (atau coba contoh gambarnya). Semua proses berjalan di browser kamu.
- Atur detail BlurHash: 4 × 3 cocok untuk sebagian besar foto lanskap; jumlah komponen yang lebih banyak mempertahankan lebih banyak bentuk, tapi string-nya jadi lebih panjang.
- Pilih lebar dan format LQIP — WebP 16 px biasanya di bawah 1 KB.
- Salin string BlurHash, data URI, atau kode siap pakai untuk HTML/CSS, Next.js, atau React.
Tiga jenis placeholder
| Placeholder | Ukuran | Paling cocok untuk |
|---|---|---|
| Warna dominan | 7 karakter | Grid thumbnail; pilihan paling sederhana |
| BlurHash | 20–30 karakter | Disimpan di database atau respons API bersama URL gambar; di-decode menjadi piksel di aplikasi |
| LQIP (gambar base64) | Di bawah 1 KB | Disisipkan langsung di HTML atau CSS, blurDataURL di Next.js; tetap berfungsi tanpa JavaScript |
Cara kerja BlurHash
BlurHash mendeskripsikan gambar dengan beberapa gelombang kosinus, mirip JPEG beresolusi sangat rendah. Gambar diubah ke linear light, dikalikan dengan pola kosinus di tiap arah, lalu faktor yang dihasilkan dikuantisasi dan ditulis dengan alfabet 83 karakter. Proses decode menggambar ulang gelombang tersebut sehingga menghasilkan blur yang halus dengan warna dan tata letak kasar dari gambar asli. Decode-lah pada sekitar 32 × 32 piksel lalu regangkan dengan CSS. Memang dibuat agar tampak buram.
Selalu atur width dan height (atau aspect-ratio) pada gambar agar placeholder sudah memesan ruangnya dan tidak ada yang bergeser saat foto muncul. Kompres juga gambar aslinya dengan Kompresor Gambar.
Juga dicari sebagai: generator blurhash, generator lqip, placeholder gambar blur, blur placeholder, nextjs blurdataurl, blurhash online, lqip gambar kecil, loading gambar progresif.
Tool yang cocok dipakai bersama Generator BlurHash & LQIP
- Pengubah Ukuran Gambar — Ubah ukuran foto ke dimensi piksel atau persentase tertentu, crop agar pas dengan ukuran media sosial, atau muatkan gambar ke dalam bingkai dengan warna latar — semuanya diproses langsung di browser kamu.
- Gambar ke Base64 — Ubah PNG, JPEG, SVG, WebP atau GIF menjadi data URI Base64 dengan CSS dan HTML yang siap disalin, atau tempel string Base64 untuk melihat pratinjau dan mengunduh gambarnya.
- Konverter Gambar — Ubah gambar apa pun yang bisa dibuka browser kamu — PNG, JPG, WebP, AVIF, GIF, BMP atau SVG — menjadi PNG, JPG, WebP atau AVIF, satu file atau ratusan sekaligus.
- Uji Kecepatan Halaman — Jalankan Google Lighthouse pada URL apa pun untuk tampilan mobile atau desktop.