How to optimize images for the web
Format, dimensions and quality: the right order to cut file size without losing sharpness.
Last reviewed:
Why image weight matters
Images are usually the heaviest part of a web page. Shrinking them speeds up loading, especially on phones and slow connections, and improves metrics such as Largest Contentful Paint (LCP), one of the Core Web Vitals.
Step 1: fix the dimensions
Don't serve a 4000-pixel photo to display it at 800. Resize first to the largest size it will be shown at (for example, the container width times 2 for high-density screens). Halving the dimensions divides the pixel count, and roughly the file size, by four.
Step 2: choose the right format
- JPG: photographs without transparency. Very widely supported.
- PNG: screenshots, graphics with text or images that need transparency. Lossless, but heavy for photos.
- WebP: supports transparency and is usually 25–35% smaller than JPG at similar quality. Supported by all current browsers.
- SVG: vector logos and icons; not a format for photographs.
Step 3: tune the quality
Lossy compression removes detail the eye barely notices. A quality between 70% and 85% is usually a good balance for photos. Always compare the result at full size: if you see blocks or halos around edges, raise the quality. Keep the original, because re-compressing an already compressed image degrades it further.
Do it without uploading your photos
TodoEnUnClick's image tools use the browser's Canvas API: your photos never leave your device. The recommended order is resize, convert to the right format and finally fine-tune quality with the compressor.