Image optimization
How to Reduce Image File Size Without Ruining Quality
The safest way to make an image smaller is not to push a quality slider as low as possible. Start by removing pixels you do not need, then choose a format suited to the content, and only then adjust compression. That order usually saves more bytes with fewer visible compromises.
1. Reduce dimensions before quality
A 4000-pixel-wide photo used in an 800-pixel content column carries far more image data than the layout can display. Resizing the source closer to its real display size can dramatically reduce file size while preserving visual quality better than aggressive compression alone.
2. Pick a format that matches the content
JPG is efficient for photographs and does not support transparency. PNG is excellent for crisp graphics and transparent assets but can be large for photos. WebP is a versatile modern delivery format. SVG is best kept as vector for genuine vector artwork.
- Photo: start with JPG or WebP.
- Screenshot or text-heavy graphic: try PNG or lossless WebP.
- Transparent web graphic: PNG or WebP.
- Vector logo or icon: SVG when the destination supports it.
3. Compress while looking at the image
There is no universal quality number that works for every photo. A detailed landscape, a portrait, and a flat background react differently to compression. Compare the result at the size people will actually view it and stop when further savings begin to create distracting artifacts.
4. Keep the original
Optimization should usually create a delivery copy, not replace your only master. Keep the original image if it has archival value or may need future editing. Repeated lossy exports can accumulate visible damage.