Desain gambar responsif 2025 — Panduan praktis srcset/sizes

Diterbitkan: 18 Sep 2025 · Waktu baca: 3 mnt · Redaksi Unified Image Tools

translated: true Pendahuluan

Gambar responsif bukan sekadar “menyediakan beberapa ukuran”. Intinya adalah menyelaraskan sizes dengan layout agar browser mendapat petunjuk yang benar dalam algoritme pemilihannya. Ini adalah panduan operasional yang praktis.

Tentukan sizes terlebih dahulu (inti)

Atribut sizes menyatakan: “dalam kondisi ini, lebar tampil X.” Jika benar, browser akan memilih kandidat terbaik dari srcset.

// Layout artikel satu kolom (maks. 768px)
// ≤768px gunakan 100vw; di atas itu tetap 768px
sizes="(max-width: 768px) 100vw, 768px"

// Kartu 2→3 kolom (efektif ≈46vw/31vw termasuk jarak)
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 46vw, 31vw"

Lebar representatif dengan langkah 1,5–2× mudah dikelola. Contoh: 480/720/960/1280/1536.

Build pendukung srcset

Otomatiskan pembuatan srcset untuk mengeliminasi error manusia. Contoh Sharp:

import sharp from 'sharp'
const WIDTHS = [480, 720, 960, 1280, 1536]
async function buildSet(input: string, base: string) {
  for (const w of WIDTHS) {
    await sharp(input).resize({ width: w, withoutEnlargement: true })
      .webp({ quality: 78 })
      .toFile(`${base}-${w}.webp`)
  }
}

Dengan Next.js Image, cukup tulis sizes dengan benar; variasi keluaran otomatis. Detail: Workflow pengubahan ukuran 2025 — Pangkas 30–70% bytes dengan berpikir mundur dari layout.

LCP dan preload

Untuk kandidat LCP seperti gambar hero, selain sizes yang tepat pertimbangkan:

• priority / fetchPriority="high"
• Preload: <link rel="preload" as="image" imagesrcset="..." imagesizes="...">
• Hindari resolusi berlebihan (patuhi aturan lebar-batas × DPR)

Dasar kompresi: Strategi Kompresi Gambar Ultimat 2025 – Panduan praktis menjaga kualitas sambil memaksimalkan kecepatan.

Arah artistik dengan picture

Jika ingin mengubah aspek/komposisi per ukuran, gunakan picture:

<picture>
  <source media="(min-width: 1024px)" srcset="/hero-wide-1280.webp 1280w, /hero-wide-960.webp 960w" sizes="(min-width:1024px) 960px">
  <source media="(max-width: 1023px)" srcset="/hero-tall-720.webp 720w, /hero-tall-480.webp 480w" sizes="(max-width:1023px) 92vw">
  <img src="/hero-tall-720.webp" alt="...">
</picture>

Catatan: bahkan dengan picture, filosofi sizes tetap sama. Deklarasikan lebar tampil (px/vw) per kondisi media.

Ikon dan SVG

• Untuk logo/ikon sederhana, prioritaskan SVG. Warna CSS dan media query fleksibel.
• Jika butuh PNG, nyatakan 1x/2x dan pisahkan srcset untuk ukuran kecil, meningkatkan efisiensi distribusi.

<img src="/icons/icon-32.png" srcset="/icons/icon-32.png 1x, /icons/icon-64.png 2x" width="32" height="32" alt="">

Untuk ikon dan manifest PWA: Paket Favicon + Manifest dan Generator favicon.

Kesalahan umum

• Menetapkan sizes = 100vw secara tetap → di grid kartu nyata (≈33vw) terjadi over‑fetch.
• Tidak mengikuti perubahan breakpoint/jumlah kolom → pasca redesign tiba‑tiba menjadi berat.
• Terlalu banyak lebar representatif → efisiensi cache turun, manfaat menipis.

Checklist (operasional)

• [ ] Definisikan lebar maksimum dan DPR per template
• [ ] sizes konsisten dengan layout (ukur di Storybook/peramban)
• [ ] Terapkan priority untuk gambar LCP bila perlu
• [ ] 3–5 lebar representatif sudah cukup
• [ ] Benarkah perlu picture (coba selesaikan dengan sizes dulu)?

Terakhir: optimasi global desain resize di Workflow pengubahan ukuran 2025 — Pangkas 30–70% bytes dengan berpikir mundur dari layout; pemilihan format di Strategi Konversi Format 2025 — Panduan WebP/AVIF/JPEG/PNG.

Diagnostik dan debugging

• Di Network (DevTools), verifikasi dimensi/transfer aktual (sesuai ekspektasi?).
• Di Elements, periksa computed size dan currentSrc pada img (apakah sizes efektif?).
• Ubah DPR di mobile/desktop dan validasi ulang (deteksi over‑fetch pada 2x/3x).
• Identifikasi LCP di panel Performance dan profil efek preload.

Pola terapan (komponen)

• Terima jumlah kolom grid via props dan hasilkan sizes otomatis.
• picture + media untuk art direction; sinkron dengan breakpoint CSS di satu tempat.
• Kombinasikan loading="lazy" dengan timing intersection viewport yang optimal untuk menjaga CLS = 0.

Hands‑on: inventaris halaman yang ada

1. Petakan lebar maksimum (konten, sidebar, grid kartu)
2. Untuk tiap gambar, tetapkan batas piksel dan 3–5 lebar representatif
3. Prioritaskan kandidat LCP (dengan preload/priority)
4. Ukur transfer dan LCP, lalu haluskan kondisi sizes

FAQ

• T: Seberapa rinci sizes harus ditulis?
  • J: Batasi pada ambang perubahan lebar tampil nyata (breakpoint). 2–4 kondisi biasanya mudah dirawat.
• T: Prioritaskan picture atau sizes?
  • J: Coba selesaikan dulu dengan sizes. Gunakan picture hanya bila perlu art direction.
• T: Apa yang perlu pada Next.js <Image>?
  • J: Deklarasi sizes yang benar dan, bila perlu, priority/fetchPriority. srcset dibuat otomatis.