{# canonical_base is the OWNING tenant's origin: all 16 Peasy domains serve the same catalogue, so a page rendered by a non-owner points its canonical at the owner instead of competing with it. Falls back to this site for static/self-owned pages. #}
✓ 🍋
peasy / doc
Menu
Semua Alat Panduan 117 Glosarium 34 Format File 131 Studi Kasus 302 API

Categories

P pdf I image D document T text D developer C css D design V video A audio Q qr S seo S security S social M math G generator
🍋 peasytools.com
Image

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);
```

Alat Terkait

C Compress Image R Resize Image C Crop Image R Rotate Image F Flip Image C Convert Image W Watermark Image S SVG to PNG I Image to Base64 R Round Corners A Add Border I Image Filters A Adjust Image B Blur Image S Sharpen Image M Make Square G Grayscale Image S Sepia Image P Pixelate Image S Strip Image Metadata

Istilah Terkait

Alpha Channel Bit Depth Chroma Subsampling AVIF Image Histogram Noise Reduction (Image) Image Segmentation Image Interpolation Dithering (Image) Alpha Compositing Image Pyramid Image Registration Color Grading (Image) Batch Resize Aspect Ratio Canvas