Image Optimization
Optimasi Gambar (Performa Web)
Teknik dan proses untuk mengurangi ukuran file gambar sambil mempertahankan kualitas visual yang dapat diterima, meningkatkan kecepatan muat halaman web dan mengurangi penggunaan bandwidth.
Detail Teknis
Pipeline optimasi gambar melibatkan: pemilihan format (AVIF > WebP > JPEG untuk foto, SVG > PNG untuk grafis), kompresi dengan target kualitas (JPEG q80-85, WebP q75-80, AVIF q60-70), resize responsif (generasi srcset pada breakpoint: 320w, 640w, 1024w, 1920w), dan metadata stripping. Alat meliputi: mozjpeg (optimasi Huffman trellis), oxipng (kompresi PNG brute-force), cwebp/cavif (encoder), sharp/libvips (pipeline resize cepat). Metrik web: LCP (Largest Contentful Paint) dipengaruhi langsung oleh ukuran gambar. Teknik lanjutan: LQIP (Low Quality Image Placeholder), decoding asinkron (decoding="async"), prioritas pengambilan (fetchpriority="high"), dan CDN gambar (transformasi on-the-fly).
Contoh
```javascript
// Image compression via Canvas
canvas.toBlob(
blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
'image/jpeg',
0.8 // quality: 0.0 (smallest) to 1.0 (best)
);
// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```