Jebakan CDN Edge Resizing 2025 — Segitiga Upscaling/Cache/Kualitas

Pengantar

Resizing gambar dan konversi format di edge sangat powerful, tetapi desain yang buruk mengarah pada mimpi buruk tiga kali lipat berupa "varian tak terbatas," "fragmentasi cache," dan "degradasi kualitas." Artikel ini mensistematisasi jebakan umum dari lingkungan produksi dan menyediakan pagar pengaman untuk operasi yang aman.

TL;DR

• Default ke penekanan upscaling dan larang ukuran melampaui dimensi asli
• Auto-branching DPR/format harus datang dengan desain cache key
• Monitoring kualitas memerlukan pengecekan 3-titik: diff/metrik/inspeksi visual

Link internal: Optimasi Delivery Gambar Era Edge CDN Desain 2025, Strategi Resizing 2025 — Reverse Engineering Layout untuk Mengurangi 30–70% Pemborosan

Mengapa Jebakan Muncul

• API berbasis query (w, h, q, fmt, bg, fit...) terlalu fleksibel, menyebabkan varian tumbuh secara eksponensial
• Negosiasi via Accept/DPR/bahasa/wilayah menyebabkan ledakan cache key
• Variasi resolusi gambar asli dan color space memperkenalkan kerusakan kualitas/warna selama konversi

Pencegahan memerlukan standardisasi "input (gambar asli) dan output (varian) sambil membatasi ukuran/format yang dapat dibuat."

Anti-pattern Tipikal dan Countermeasure

• Izinkan w/h/q/fmt tak terbatas via input bebas → Ubah ke pendekatan allowlist (mis., WIDTHS=[320,480,720,960,1280,1536])
• Output tak terbatas lebar×3 untuk perangkat DPR=3 → Cap pada lebar tampilan efektif×DPR (dan larang melampaui ukuran asli)
• Ekstensi gaya Vary: * memfragmentasi cache → Batasi hanya ke Vary: Accept, kelola DPR via query/path
• Over-prioritas auto-format (AVIF/WebP/JP2) → Jaga batas bawah kualitas (q/psy/sharpness), gunakan preset terpisah untuk still/line art
• Tidak ada kebijakan retensi metadata → Kehilangan copyright/color space/profil ICC. Kontrol retensi/penghapusan EXIF/ICC dengan switch

Desain Cache Key (Partisi Aman)

Contoh struktur key:

<origin-path>?w=<width>&fmt=<format>&dpr=<dpr>

• Wajib: w dibulatkan ke allowlist, dpr salah satu dari {1,2,3}
• fmt set terbatas seperti avif/webp/jpeg/png
• q menerima nama preset server-side (soft, photo, line, ui), bukan nilai numerik

Contoh HTTP header:

Cache-Control: public, max-age=31536000, immutable
Vary: Accept
Content-Type: image/avif

Sementara branching berbasis Accept memungkinkan menggantung multiple format pada URL yang sama, ini membuat debugging dengan curl dll tidak jelas. Untuk observabilitas, output info keputusan di response header (X-Format, X-Width, X-DPR).

Implementasi Edge (Pseudocode)

Pseudo implementasi gaya Cloudflare Workers:

const WIDTHS = [320, 480, 720, 960, 1280, 1536];

function clampWidth(w) {
  const n = Math.max(...WIDTHS.filter((x) => x <= w));
  return n ?? WIDTHS[0];
}

export default {
  async fetch(req) {
    const url = new URL(req.url);
    const accept = req.headers.get('Accept') || '';
    const dpr = Math.min(3, Math.max(1, Number(url.searchParams.get('dpr') || 1)));
    const desired = Number(url.searchParams.get('w') || 0);
    const width = clampWidth(desired);

    // Larang melampaui ukuran asli (mis., originWidth dari metadata)
    const originWidth = await getOriginWidth(url.pathname);
    const target = Math.min(width * dpr, originWidth);

    const fmt = accept.includes('image/avif') ? 'avif'
              : accept.includes('image/webp') ? 'webp'
              : 'jpeg';

    const res = await transformAtEdge({
      path: url.pathname,
      width: target,
      format: fmt,
      preset: choosePreset(url),
      noUpscale: true,
    });

    return new Response(res.body, {
      headers: {
        'Content-Type': `image/${fmt}`,
        'Cache-Control': 'public, max-age=31536000, immutable',
        Vary: 'Accept',
        'X-Width': String(target),
        'X-Format': fmt,
        'X-DPR': String(dpr),
      },
    });
  },
};

Guardrail (Kebijakan Operasional)

• Selalu aktifkan larangan melampaui-asli (withoutEnlargement). Bulatkan request ke lebar yang diizinkan terdekat
• Batasi lebar representatif ke 4-6 level, sejajarkan dengan desain sizes (hindari dimensi berlebihan)
• Fallback format dalam urutan avif→webp→jpeg, konversi ke color space konsisten (sRGB)
• Larang spesifikasi q langsung. Gunakan preset (photo/line/ui) untuk pengaturan kualitas/sharpness komprehensif
• Static fail-open pada kegagalan/timeout konversi, kembalikan gambar asli dan alert monitoring

Monitoring Kualitas (Diff + Metrik + Visual)

• Diff: Perbandingan bitmap (SSIM/LPIPS) pada golden set 30 gambar representatif
• Metrik: Monitor transfer size/decode time/LCP p75 dengan RUM
• Visual: QC di 4 kategori: line art/text/gradients/skin (sesuaikan q dan sharpness)

Sampel (Node, sharp):

import sharp from 'sharp';

async function ssimLike(a, b) {
  const [A, B] = await Promise.all([
    sharp(a).resize(800).raw().toBuffer(),
    sharp(b).resize(800).raw().toBuffer(),
  ]);
  // Implementasikan logika aproksimasi SSIM di sini (dihilangkan). Set threshold ke 0.95 dll.
}

Studi Kasus (Singkat)

Kasus 1: Query tak terbatas menghancurkan cache

• Gejala: Hampir selalu MISS. Load origin melonjak
• Solusi: Bulatkan ke allowlist, batasi DPR hanya ke {1,2}, preset-kan q
• Hasil: Hit rate 20%→75%, LCP membaik 6%

Kasus 2: Degradasi upscaling perangkat high-density

• Gejala: DPR=3 diminta melampaui ukuran asli, teks menjadi blur
• Solusi: Larang melampaui asli + cap pada lebar tampilan×DPR
• Hasil: Blur teks teratasi, reduced INP long tasks

FAQ

T. Apakah auto-format selalu diaktifkan?

J. Sebagian besar efektif, tetapi untuk line art/text dengan posterisasi yang terlihat, branch dengan preset seperti JPEG (q tinggi + sharpness).

T. Haruskah kita menambahkan Vary: DPR?

J. Tidak disarankan. Membuat eksplisit di URL (w, dpr) dan membatasi ke Vary: Accept meningkatkan prediktabilitas cache.

T. Berapa banyak level lebar representatif yang baik?

J. Terlalu banyak menyebabkan fragmentasi. 4-6 level praktis. Sejajarkan dengan sizes untuk optimisasi keseluruhan.

Checklist (Untuk Deployment)

• [ ] Bulatkan w ke allowlist, larang melampaui ukuran asli
• [ ] dpr dibatasi ke {1,2,(3)}, implementasikan cap lebar tampilan×DPR
• [ ] fmt set terbatas, hanya Vary: Accept
• [ ] q tidak menerima nilai numerik, map ke nama preset
• [ ] Pastikan konsistensi konversi sRGB/pemrosesan ICC
• [ ] Operasi rutin diff/visual QC dengan golden set