Gambar Responsif era DPR tinggi & pemanfaatan image-set 2025

“Tajam” dan “hemat” diputuskan oleh srcset/sizes dan CSS image-set().

TL;DR

• Elemen lebar tetap → notasi x (1x/2x) sudah cukup. Elemen lebar fleksibel → notasi w + sizes
• Background teks/hero → CSS image-set() untuk mengganti DPR
• Tetapkan batas bit‑rate; cegah transfer berlebih walau pixel density tinggi
• Kandidat LCP → berikan fetchpriority="high"

Tautan internal: Pengiriman Gambar berfokus INP 2025 — Menjaga performa terasa lewat koordinasi decode/priority/script, Prioritas Gambar & Preload yang Tepat (2025)

Tabel cepat pemilihan

• Kartu/komponen tetap: srcset="... 1x, ... 2x"
• Hero/lebar variabel: srcset="... 800w, ... 1200w" + sizes
• Background CSS: background-image: image-set(url(...@1x.avif) 1x, url(...@2x.avif) 2x)

Contoh implementasi

<img
  src="/imgs/card@1x.avif"
  srcset="/imgs/card@1x.avif 1x, /imgs/card@2x.avif 2x"
  width="320" height="200" alt="Kartu"
  decoding="async" loading="lazy"
/>

<!-- Lebar fleksibel: w + sizes -->
<img
  src="/imgs/hero-1200.avif"
  srcset="/imgs/hero-800.avif 800w, /imgs/hero-1200.avif 1200w, /imgs/hero-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630" fetchpriority="high"
  alt="Hero"
/>

.hero {
  background-image: image-set(
    url('/imgs/cover@1x.avif') 1x,
    url('/imgs/cover@2x.avif') 2x
  );
  background-size: cover;
}

Titik gagal umum

• sizes selalu 100vw → gambar terlalu besar terpilih; bandwidth boros
• Bitrate 2x sama dengan 1x → file membengkak; kelola kualitas dengan PSNR/SSIM
• Background CSS tanpa 1x/2x → teks tampak fuzzy/berat

Operasional

• Otomatiskan generasi varian @1x/@2x dan w via CI
• Buat template image-set() agar dapat dipakai ulang
• Kandidat LCP diatur terpisah (prioritas/preload)

Checklist

• [ ] Tetap = x, Fleksibel = w+sizes
• [ ] image-set() untuk menangani DPR di CSS
• [ ] Kandidat LCP diberi fetchpriority
• [ ] Ukur bytes dan ketajaman untuk mencegah boros/buram

Ringkasan

Kepuasan visual di berbagai perangkat dicapai dengan kombinasi yang tepat dari srcset/sizes/image-set().