One of the most common causes of slow websites is images that have not been optimised. A 5 MB photo on a page that only needs 150 KB slows load time by several seconds — especially on mobile.
Which format should you use for website images?
- **JPG**: for photos with many colours and colour gradients. Compress to 70-85% quality.
- **PNG**: for images with transparency or sharp edges (logos, icons). Compress with a PNG optimiser.
- **WebP**: the best for websites — smaller than JPG at equal quality, with transparency support. All modern browsers open WebP.
Rules of thumb for file size
| Use | Recommended size |
|---|
|---|---|
| Hero image (wide) | < 300 KB |
|---|---|
| Product photo | < 150 KB |
| Thumbnail | < 50 KB |
| Background image | < 500 KB |
Step by step: compress an image
1. Go to the compress image tool.
2. Drag your image here.
3. Set the quality to 80%. Check the preview.
4. If it looks good, download the compressed version.
For website use you might also consider converting to WebP. Go to the format conversion tool and choose WebP as the target format.
Compress automatically on the server
Building a website and want to automate this? Consider:
- **Next.js Image component**: automatically compresses and converts at build or runtime.
- **Cloudinary or ImageKit**: CDN with on-the-fly compression.
- **Squoosh CLI**: command-line batch compression.
For a one-off action, PixRust is the fastest route — no account, no installation.
Frequently asked questions
How much quality loss is acceptable?
On a screen the difference between 100% and 80% quality is barely visible for most photos. Going below 60%, artefacts (blocks, blurry edges) become visible.
Does it matter whether I compress JPG or PNG?
Yes. JPG compression is lossy and gives a significantly smaller file. PNG compression is lossless but less effective. For PNG consider also converting to WebP.