Images
How to reduce image size for a website without visible quality loss
Heavy images are the most common reason pages load slowly. Cutting image weight is usually invisible to visitors and dramatically improves performance.
Document summary
A practical guide to reducing image size for the web with the image compressor: why image weight matters, format selection, compression levels, resizing, and verification before publishing.
Key takeaways
- Image weight directly affects page speed and Core Web Vitals.
- Format matters: JPG for photos, PNG for graphics, WebP for modern browsers.
- Compression at 80 percent quality is visually lossless for photos.
- The image compressor works locally in your browser.
Why image weight decides page speed
Images account for the largest share of bytes on most web pages. A page with five 2 MB photos loads about ten megabytes before it feels complete, which is slow on mobile networks and expensive on metered plans. Search engines and visitors both reward pages that paint quickly.
The technical targets are simple: compress images, serve the right format, and display images at the size they are actually shown. Most sites can cut image bytes by 70 percent or more without anyone noticing.
Pick the right format first
Format choice is the biggest lever. Photographs belong in JPG, graphics with flat colors and transparency belong in PNG, and WebP combines both strengths for browsers that support it, which is effectively all modern ones.
| Image type | Best format | Typical saving |
|---|---|---|
| Photos and gradients | JPG at 75-85% | 5-10x smaller than PNG |
| Graphics, logos, transparency | PNG or WebP | WebP often 30% smaller |
| Mixed content | WebP | Best modern default |
| Animated images | WebP or GIF | WebP much smaller |
Compress without visible loss
The image compressor re-encodes your images in the browser with a quality slider, so you can balance size and appearance for each file.
- 1
Open the image compressor and add the images.
- 2
Start at 80 percent quality for photos; keep 90 percent or higher for graphics with fine detail.
- 3
Compare the file size before and after; most photos drop 50 to 80 percent at this setting.
- 4
Zoom into the preview and check edges and gradients for artifacts.
- 5
Download the optimized images and replace the originals in your site folder.
Resize before you compress
Compression cannot fix images that are simply too big. A 4000 pixel wide photo displayed at 800 pixels wastes most of its bytes. Resize first with the image resizer, then compress, and the file will be far smaller at the same visual quality.
A good workflow: export at the largest display size you need (typically 2x the on-page size for sharp screens), then compress at 80 percent quality.
Verify before publishing
- Check the final byte size per image; aim for under 200 KB for most page images.
- View the optimized image on a phone screen, where artifacts show most.
- Keep the original master files in a separate folder for future crops.
- Add width and height attributes and lazy loading in your HTML.
- Re-run the workflow when you replace images; old copies tend to linger.
Optimize images locally, before anything goes live
The image compressor runs entirely in your browser: images are loaded on your device, re-encoded there, and downloaded back to you. Nothing is uploaded, which is important when the images are client assets or unpublished designs.
Open toolFrequently asked questions
What is the best JPG quality for web images?
75 to 85 percent is the practical range. At 80 percent, photos are visually identical to the original for most viewers and files are a fraction of the size. Test at 70 percent too; many photos look fine even there.
Should I use WebP or JPG for my website?
WebP is supported by all modern browsers and is typically 25 to 35 percent smaller than JPG at the same quality, so it is the best default for photos. Use JPG for maximum compatibility with older tools, or deliver WebP with a JPG fallback.
How small should a web image be?
As a rough guide, keep hero images under 300 KB, content images under 200 KB, and thumbnails under 50 KB. Exact numbers depend on your layout, but the direction matters more: if an image is over 1 MB, it is almost always too heavy.
Is compression visible to website visitors?
At sensible settings, no. Artifacts appear only when quality is pushed too low or when an image is compressed repeatedly. Compare the original and compressed versions side by side before publishing to be sure.
