A single uncompressed hero image can weigh more than your entire page's HTML, CSS, and JavaScript combined. That's not an exaggeration — a raw DSLR photo at full resolution is typically 8–20 MB. Even after a smartphone auto-processes it to JPG, you're often looking at 3–6 MB. Serving that to a visitor on mobile means a slow page, a high bounce rate, and a penalty from Google's Core Web Vitals scoring.
What Image Compression Actually Does
JPG compression works by grouping similar colours together and discarding fine detail the human eye struggles to perceive — particularly in high-frequency areas like gradual sky gradients or textured backgrounds. At a quality setting of 80–85%, most people cannot tell the difference between the original and the compressed version at normal viewing sizes. The file, however, can be 60–80% smaller.
PNG compression uses a different, lossless method — it finds patterns in the image data and encodes them more efficiently. This means no quality is lost, but the savings are smaller than JPG compression. For screenshots and graphics, lossless is fine. For photographs on a public webpage, lossy JPG compression is almost always the right choice.
Core Web Vitals and LCP
Google's Core Web Vitals measure real-world user experience and directly affect search rankings. The metric most affected by image size is Largest Contentful Paint (LCP) — the time it takes for the largest visible element on the page to load. In most cases, that element is a hero image or a product photo.
Google's target for a good LCP score is under 2.5 seconds. Studies from Google's own research show that pages meeting this threshold see significantly lower bounce rates and higher conversion rates. For e-commerce, a one-second delay in page load is associated with a 7% reduction in conversions.
Compressing your images is the single highest-leverage action you can take to improve LCP. A hero image at 3.2 MB compressed to 85 KB — a ratio of roughly 38:1 — can shave 2+ seconds off LCP on a typical mobile connection.
Before-and-After File Size Examples
| Image type | Original size | After compression | Quality loss |
|---|---|---|---|
| Smartphone photo (JPG) | 4.2 MB | 210 KB | Not visible at screen size |
| Product photo (JPG) | 1.8 MB | 95 KB | Minimal at 1200px wide |
| PNG screenshot | 850 KB | 340 KB | None (lossless) |
| Blog hero image (JPG) | 2.1 MB | 88 KB | Not visible at 1200px |
How to Compress Images for Web
- Go to Image Compressor.
- Upload your image. The tool accepts JPG, PNG, and WebP.
- Adjust the quality slider — start at 80% for photographs. For product images where fine detail matters, try 85%.
- Check the live preview. If you can't spot a difference, the current setting is fine.
- Note the output file size shown. If it's still above 100 KB for a typical web image, drop the quality to 75% and check again.
- Download the compressed file.
When resizing helps too
If your image is 4000px wide but your website column is 1200px wide, you're serving four times more pixels than necessary. Resize to 1200px first using Image Resizer, then compress — you'll get dramatically better results with less quality loss, because the compression is working on a smaller canvas.
Target File Sizes by Use Case
- Blog hero image (1200px wide): under 100 KB
- Product thumbnail (400px wide): under 20 KB
- Full-width hero (1920px wide): under 200 KB
- Social media preview image: under 150 KB
- Email image: under 100 KB (many email clients block large images)
JPG vs PNG vs WebP: Which to Compress
JPG is ideal for photographs — it achieves the smallest file sizes for photographic content. PNG is better for graphics, logos, and screenshots where sharp edges and flat colours need to stay crisp. WebP is Google's modern format that achieves ~30% smaller files than JPG at equivalent quality — if you need to convert a file to WebP, use the Image Format Converter. To go the other way, the WebP to JPG Converter handles that in one click.
Frequently Asked Questions
Will compressing my images hurt SEO?
No — faster pages help SEO. Google's algorithms factor page speed into rankings, and a properly compressed image improves LCP without affecting the image's relevance or alt text.
What quality setting should I use?
80% is a good default for most photographs. Below 70%, compression artefacts become visible — blocky areas in smooth gradients, ringing around sharp edges. Above 90%, file sizes increase significantly with no visible improvement.
Is there a quality difference between compressing once vs multiple times?
Yes. Each time you save a JPG with lossy compression, artefacts compound. Always compress from the original, uncompressed source. Never re-compress an already-compressed JPG.
My PNG file is still large after compression. What should I do?
If the PNG contains a photograph rather than a graphic, convert it to JPG first — PNG is inherently less efficient for photographic content. Use the Image Format Converter to switch formats, then compress the JPG.
How much can I realistically reduce a file's size?
Photographs can typically be compressed to 5–15% of their original size with no visible quality loss at normal screen viewing distances. Graphics and screenshots yield smaller savings — usually 30–60%.