Contoh Placeholder Gambar

Semua di bawah ini 0 request gambar (kecuali #5 pakai base64 kecil). Buka DevTools → Network buat lihat gak ada file gambar yang di-load.

1. Solid Color Block

Paling ringan. Cuma background-color CSS.

background-color: #d8dce3;

2. CSS Gradient

Masih 0 request, tapi lebih hidup dari solid.

linear-gradient(135deg, ...)

3. Inline SVG Shape

Bikin bentuk/icon pakai SVG inline, bisa custom sesuai konten.

<svg> icon gambar, inline di HTML

4. Skeleton Shimmer

Umum dipakai buat loading state sebelum konten asli muncul.

gradient animation via ::after

5. LQIP (Low Quality Image Placeholder)

Versi blur dari warna dominan gambar. Biasanya base64 super kecil (~200-500 byte).

filter: blur(14px) + scale biar tepi ga transparan

6. BlurHash-style (simulasi tanpa library)

Nyerupain BlurHash pake radial-gradient campuran, tanpa JS decode.

multiple radial-gradient + linear-gradient

7. Pattern Generator (dot grid)

Pattern berulang pake radial-gradient sebagai background-image, cocok buat placeholder galeri/kosong state.

radial-gradient dot + background-size repeat