Images account for 50–70% of average webpage weight. Optimizing them is the single highest-ROI performance improvement for most websites.
Choose the Right Format First
- Photos: WebP (smallest) → JPG (widely supported) → PNG (avoid for photos)
- Graphics/logos: SVG (vector) → WebP → PNG
- Icons: SVG → ICO/PNG sprite
- Animations: WebP → optimized GIF (GIF is large, avoid if possible)
WebP: The Modern Standard
WebP images are 25–35% smaller than JPG at equivalent visual quality and 26% smaller than PNG. Now supported by all major browsers. Convert to WebP using ZeroPhantom converter or:
from PIL import Image
img = Image.open('photo.jpg')
img.save('photo.webp', 'WEBP', quality=85)JPG Compression
Quality 75–85 is the sweet spot — barely visible difference from 100 but 50–70% smaller files:
img.save('photo.jpg', 'JPEG', quality=80, optimize=True)PNG Optimization
PNG is lossless — but you can reduce file size by reducing color depth (256 colors instead of 16M for simple graphics):
img = img.convert('P', palette=Image.ADAPTIVE, colors=256)
img.save('graphic.png', optimize=True)Serving Responsive Images
Don't serve 2000px images to mobile devices. Use HTML srcset to serve appropriately-sized images:
<img src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero.webp 1200w"
sizes="(max-width: 600px) 400px, 800px">Convert and optimize images free →