✓ 🍋
peasy / safe
Menu
All Tools Guides 33 Glossary 45 File Formats 131 Use Cases 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

The process of reducing image file size while maintaining acceptable visual quality for web delivery.

Technical Detail

Image Optimization works by exploiting limitations in human visual perception. The Discrete Cosine Transform (DCT) used in JPEG breaks images into 8x8 pixel blocks and converts spatial data to frequency coefficients. High-frequency details (fine textures, sharp edges) are quantized more aggressively than low-frequency information (smooth gradients). Each additional compression pass (re-saving) compounds quality loss — a phenomenon called generation loss — making lossy formats unsuitable for iterative editing workflows.

Example

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

Related Tools

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

Related Terms

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