Image Optimization for Web

Images typically account for 50–70% of a web page’s total size. Optimizing them is one of the most impactful things you can do to improve site speed without sacrificing visual quality.

Image Formats

Format	Best For	Transparency	Animation
JPEG	Photographs, complex images	No	No
PNG	Graphics with transparency, screenshots	Yes	No
WebP	General web use (superior compression)	Yes	Yes
AVIF	Next-gen format, best compression	Yes	Yes
SVG	Logos, icons, illustrations	Yes	Yes (CSS/JS)
GIF	Simple animations	Yes (1-bit)	Yes

WebP is the recommended default format for most web images — it offers 25–35% smaller file sizes than JPEG at equivalent quality and is supported by all modern browsers.

Compression Techniques

Lossy Compression: Removes some data to reduce file size. Ideal for photographs. A quality level of 80–85% is generally imperceptible to viewers.

Lossless Compression: Reduces file size without losing any data. Best for graphics, logos, and screenshots.

Optimization Tools

Online Tools:

TinyPNG / TinyJPG: Drag-and-drop compression.
Squoosh (squoosh.app): Google’s image optimizer with format conversion.
Compressor.io: Supports multiple formats.

Desktop Applications:

ImageOptim (Mac): Batch compression for multiple images.
FileOptimizer (Windows): Supports dozens of file types.

WordPress Plugins:

ShortPixel: Automatic compression on upload with WebP conversion.
Imagify: Bulk optimization with three compression levels.
Smush: Free compression with lazy loading support.

Command Line:

# Convert to WebP using cwebp
cwebp -q 80 input.jpg -o output.webp

# Optimize JPEG with jpegoptim
jpegoptim --max=85 *.jpg

# Optimize PNG with pngquant
pngquant --quality=65-80 *.png

Responsive Images

Serve different image sizes for different screen sizes using the srcset attribute:

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1024px) 800px,
            1200px"
     alt="Description of image">

Lazy Loading

Defer loading images until they’re about to enter the viewport:

<img src="photo.jpg" loading="lazy" alt="Description">

The loading="lazy" attribute is supported natively in modern browsers and requires no JavaScript.

Best Practices

Resize images to the maximum display size before uploading — don’t rely on CSS to scale down a 4000px image.
Use descriptive file names (blue-running-shoes.jpg not IMG_4532.jpg).
Always include alt attributes for accessibility and SEO.
Set explicit width and height attributes to prevent layout shifts.
Consider using an image CDN (Cloudinary, imgix) for automatic optimization and responsive delivery.

Image Optimization for Web