Compress images correctly
Most people start with compression, but the biggest win is in front of it: the size of the image itself.
1 The Measures
Measure the width at which the image appears on the page and double it for high-resolution screens. A 4,000-pixel-wide photo in a 600-pixel-wide frame transfers roughly forty times the necessary data. Compression alone cannot fix this.
2 The format
| Content | Format |
|---|---|
| Photos | WebP, JPEG if necessary |
| Graphics with few colors | PNG or SVG |
| Logos, symbols, diagrams | SVG – stays sharp at any size |
| Animations | Video instead of GIF, saves many times over |
3.The quality
WebP and JPEG are 85 % Under 70, edges and even surfaces become visibly restless -- especially in the sky and on skin areas. Over 90, the file grows significantly without anyone seeing the difference.
Deliver different sizes
With srcset If you create multiple versions, and the browser chooses the one for screen and resolution, then on a phone it loads the 600 version instead of the 1600.
Suitable tools
Further in Performance
- Make your website faster – The measures in the order of their effect – not in that of their effort.
- WebP or AVIF? – Two modern image formats – one is the safe choice, the other the smaller one.