Ringkas: placeholder blur bukan dekorasi — ini adalah perbaikan Cumulative Layout Shift yang menyamar sebagai efek pemuatan, karena placeholder yang berukuran benar mencadangkan ruang persis gambar sebelum gambar sebenarnya selesai dimuat. Padukan panduan ini dengan Character Counter, Encoding Converter, Text Difference, dan AI Hidden Characters.

LQIP (Low Quality Image Placeholder) adalah versi sangat kecil dan sangat terkompresi dari gambar sebenarnya — sering 20×20 piksel atau lebih kecil, beberapa ratus byte — ditampilkan buram dan diperbesar selagi file resolusi penuh dimuat.

Masalah sebenarnya yang dipecahkan LQIP: pergeseran tata letak, bukan estetika

Tanpa placeholder yang mencadangkan dimensi akhir gambar, halaman merender tanpa ruang untuk gambar itu, lalu mendorong segala sesuatu di bawahnya ke bawah pada saat file tiba — Cumulative Layout Shift (CLS), salah satu Core Web Vitals Google, memberi penilaian buruk pada kondisi ini. Placeholder dengan rasio aspek yang sama (buram atau tidak) menempati ruang yang benar sejak render pertama, jadi tidak ada yang bergerak saat gambar sebenarnya dimuat — blur adalah nilai tambah yang menyenangkan di atas perbaikan sebenarnya, yaitu mencadangkan ruang.

Bagaimana gambar kecil disematkan secara instan

Placeholder LQIP biasanya disematkan sebagai data URI berkode Base64 langsung di HTML — <img src="data:image/jpeg;base64,..."> — jadi placeholder merender dengan nol permintaan jaringan tambahan, yang penting karena seluruh maksudnya adalah menunjukkan sesuatu sebelum permintaan gambar sebenarnya selesai. Karena gambar sumbernya sangat kecil (sering kurang dari 1KB sebelum encoding), overhead base64 — kira-kira 33% lebih besar dari byte mentah — dapat diabaikan untuk placeholder meskipun ini boros untuk gambar berukuran penuh.

LQIP vs. placeholder warna dominan solid

Miniatur mikro yang buram membawa lebih banyak informasi visual (bentuk kasar, distribusi warna) daripada persegi panjang warna dominan tunggal, tapi juga berarti lebih banyak pekerjaan konfigurasi — menghasilkan dan menyimpan gambar kecil per foto, versus menghitung satu warna rata-rata. Untuk galeri berat foto di mana gambar itu sendiri adalah intinya, fidelitas ekstra LQIP biasanya sepadan; untuk gambar UI yang lebih kecil atau ikon, placeholder warna datar melakukan pekerjaan pencegahan CLS dengan overhead lebih sedikit.

Alur kerja untuk menambahkan placeholder dengan benar

  1. Tetapkan width dan height eksplisit (atau aspect-ratio CSS) pada setiap tag gambar — ini yang sebenarnya mencadangkan ruang; gambar placeholder itu sendiri tidak melakukannya sendiri.
  2. Hasilkan placeholder kecil pada rasio aspek sebenarnya gambar, bukan ukuran tetap yang tidak cocok — rasio yang tidak cocok menghasilkan pergeseran ketika gambar sebenarnya menggantikannya.
  3. Sematkan placeholder sebagai data URI base64 untuk pemuatan tanpa permintaan, dan gunakan cara ini hanya untuk gambar placeholder yang benar-benar kecil.
  4. Uji dengan pembatasan jaringan browser — nilai placeholder hanya terlihat ketika gambar sebenarnya lambat tiba.

Kesalahan umum yang harus dihindari

  • Menambahkan efek blur tanpa juga menetapkan dimensi eksplisit — blur saja tidak melakukan apa pun untuk pergeseran tata letak.
  • Menggunakan placeholder dengan rasio aspek berbeda dari gambar sebenarnya, yang tetap menyebabkan pergeseran saat digantikan.
  • Menyematkan gambar berukuran penuh dalam base64 "demi konsistensi", menggembungkan bobot halaman tanpa manfaat placeholder apa pun.
  • Memperlakukan LQIP semata sebagai efek visual dan melewatkan bahwa pekerjaan sebenarnya adalah mencadangkan ruang tata letak.

Blur adalah yang diperhatikan pengguna; ruang yang dicadangkan melalui dimensinya adalah yang sebenarnya melindungi skor Core Web Vitals Anda.