Web

Pengiriman Gambar Era Edge — Desain CDN 2025

Diterbitkan: 22 Sep 2025 · Waktu baca: 4 mnt · Redaksi Unified Image Tools

Untuk menumbuhkan trafik pencarian, pengiriman gambar yang cepat tidak bisa ditawar. Panduan ini menyusun poin desain edge/CDN menurut use case dan menyajikan checklist untuk menghindari jebakan produksi.

Dasar‑dasar Image CDN

  1. Definisikan unit transformasi (origin vs varian transform)
  2. Definisikan cache key (URL, Accept, Accept-Encoding, DPR, dsb.)
  3. Kadaluarsa dan invalidasi (fingerprint, Cache-Control, stale-while-revalidate)
  4. Koordinasi dengan gambar responsif (ketepatan srcset/sizes)

Tautan internal: Dasar desain srcset, Pengiriman fokus INP, Priority hints & preload

Header HTTP dalam praktik

Cache-Control: public, max-age=86400, stale-while-revalidate=259200
Vary: Accept, DPR
Accept-Ranges: bytes
Timing-Allow-Origin: *
  • Gunakan Vary: Accept untuk beralih AVIF/WebP/JPEG
  • Jika menambah Vary: DPR, hasilkan/cache varian per DPR di server
  • Untuk SSG/ISR, versioning URL eksplisit paling aman (mis. hero-640.avif?v=20250922)

Priority Hints / Early Hints

<!-- Untuk kandidat LCP -->
<link rel="preload" as="image" href="/images/hero-1200.avif" imagesrcset="..." imagesizes="(min-width: 1024px) 1200px, 90vw" fetchpriority="high" />
  • Jangan menandai semuanya high priority (bisa bentrok dengan anggaran CLS)
  • Jika tersedia, kirim 103 Early Hints untuk preconnect/preload lebih dini

Memisahkan transform edge vs origin

  • Edge: frekuensi tinggi, negosiasi lebar/kualitas/format (AVIF/WebP)
  • Origin: langkah mahal, kritis untuk fidelitas (metadata, ICC, alpha compositing)

Alat: Konverter format, Kompresi massal, Generator placeholder

Jebakan klasik

  • Vary diset tapi CDN tidak cache (konfigurasi ganda)
  • Mengirim AVIF ke klien lama tanpa Accept: image/avif → indeks rusak
  • Transform ganda oleh layanan optimizer dan CDN aplikasi → kehilangan kualitas

Checklist (persisten)

  • [ ] Gambar LCP: fetchpriority dan sizes benar
  • [ ] Cache key via versioning URL atau Vary
  • [ ] Fallback aman (JPEG) saat transform error
  • [ ] alt gambar + data terstruktur untuk SEO gambar

Rincian cache key

  • Key yang disarankan: URL + Accept + DPR + Width + Quality
  • Normalisasi w/q di fungsi edge (mis. 320/480/640/…)
  • Contoh header respons:
Cache-Control: public, max-age=604800, stale-while-revalidate=2592000
Vary: Accept, DPR
CDN-Cache-Status: HIT

Strategi fallback AVIF/WebP

  1. Pilih AVIF dahulu berdasar Accept, lalu WebP, fallback ke JPEG
  2. Fallback sisi server saat timeout/error → JPEG
  3. Di klien, <picture> dengan type membantu browser memilih (gunakan srcset type untuk memperjelas)
<picture>
  <source type="image/avif" srcset="hero.avif 1x, hero@2x.avif 2x" />
  <source type="image/webp" srcset="hero.webp 1x, hero@2x.webp 2x" />
  <img src="hero.jpg" alt="..." width="1200" height="630" />
</picture>

Menormalkan resize on‑the‑fly

  • Set lebar tetap: 320/480/640/768/960/1200/1600/2000, terkait sizes
  • Bulatkan w masuk untuk hindari fragmentasi cache
  • Preset q per guna: thumbnail 60/foto 70/UI 80

Keamanan dan kontrol penyalahgunaan

  • URL bertanda tangan untuk mencegah transform tak terbatas (w/h/q/fmt bertanda tangan)
  • Rate limit dan circuit breaker saat gagal
  • Larang filter berat yang bisa membebani CPU

Observabilitas / kontrol biaya

  • Log: URL, fmt, w, q, dpr, cacheStatus, genTime, size
  • Dashboard: hit rate format, ukuran median, p95 waktu generasi
  • Biaya: pra‑hasilkan ukuran panas; TTL panjang untuk kurangi beban origin

Fungsi edge (pseudo)

export default async function handle(req) {
  const u = new URL(req.url)
  const w = normalizeWidth(u.searchParams.get('w'))
  const q = normalizeQuality(u.searchParams.get('q'))
  const fmt = negotiate(req.headers.get('Accept'))
  const key = `${u.pathname}?w=${w}&q=${q}&fmt=${fmt}`
  const cached = await caches.default.match(key)
  if (cached) return cached
  const out = await transform(u.pathname, { w, q, fmt })
  return new Response(out.body, { headers: responseHeaders({ fmt, w, q }) })
}

Troubleshooting

  • Tidak ada gambar di browser lama → perbaiki negosiasi Accept atau gunakan <source type>
  • Generasi lambat → kurangi set lebar, preset kualitas, hindari re‑encode ganda
  • Kualitas tidak konsisten → tetapkan q per guna; gunakan AVIF effort moderat

FAQ

T. Haruskah selalu memilih WebP/AVIF?

J. Seimbangkan kompatibilitas dan biaya generasi. Untuk permukaan yang kritis brand, JPEG masih bisa unggul.

T. Lebih banyak sumbu Vary menurunkan hit rate cache?

J. Normalisasi lebar/kualitas untuk mengendalikan fragmentasi. Batasi DPR di tempat penting saja.

Ringkasan

“Cache key yang benar” dan “optimasi terbatas untuk kandidat LCP” adalah jalan tercepat meningkatkan kecepatan persepsi dan trafik pencarian. Mulai dari gambar hero dan uji A/B kecil.

Bagikan di XKembali ke daftar