How to Compress Images Without Losing Quality (2026)
Short answer: resize the image to the size it will actually be displayed at, save it in the right format (WebP for photos, PNG only for graphics that need transparency), and export at a sensible quality setting — JPEG 75–85 or WebP around 80. Done in that order, most images shrink by 50–80% with no visible difference, and your pages load noticeably faster.
Images are the heaviest part of most websites. A single unedited phone photo can be 4–6 MB, while the same photo properly prepared for the web is often under 150 KB. Multiply that gap across a homepage slider, a product catalogue or a blog post, and you have the most common reason pages feel slow — especially on mobile connections in Pakistan, where large pages cost visitors both time and mobile data.
1. Why image size matters more than you think
Page speed is not just a technical score. Google uses Core Web Vitals — including Largest Contentful Paint (LCP), which is very often a hero image — as a ranking signal, and visitors decide within seconds whether to stay. On a slow 4G connection, a 3 MB hero image can add several seconds to that first paint. Our own guide to testing page speed and Core Web Vitals shows how to measure the damage on your own pages before you start fixing it.
There is also a business angle. For ecommerce stores, every extra second of load time trims conversion rates, and oversized product images are usually the biggest single cause. The fix costs nothing — no new hosting, no developer, no plugin — just a better export workflow.
2. Start with dimensions, not quality settings
The most effective compression step is not a slider at all: it is resizing. An image uploaded at 4000 pixels wide but displayed at 800 pixels wide carries five times more pixels than anyone will ever see. Browsers still download all of them.
- Match the display size: if an image shows at 800px wide on desktop, export it at 800–1600px wide (the upper end covers high-density retina screens, which render at 2x).
- Blog and content images: 1200–1600px wide is plenty for a full-width article image.
- Product thumbnails and cards: 600–800px wide is usually enough; the full-size version only needs to load on click.
- Hero banners: 1600–1920px wide is the practical ceiling — wider than that, and you are paying file size for pixels no screen shows.
Resize before you compress. Compressing a 4000px image down to a small file still leaves you with a 4000px image that browsers must scale down — you get the worst of both worlds.
3. Choose the right format for the job
Format choice alone can halve a file. Each format is built for a different kind of image, and using the wrong one is the most common beginner mistake.
| Format | Best for | Watch out for |
|---|---|---|
| JPEG | Photos and complex images | No transparency; quality loss compounds if you re-save repeatedly |
| PNG | Logos, icons, graphics with transparency or sharp text | Very large files for photos — never use PNG for a photograph |
| WebP | Almost everything on the modern web | Needs a JPEG fallback only for very old browsers |
| AVIF | Maximum compression for photos | Slower to encode; check browser support before relying on it alone |
| SVG | Logos and simple illustrations | Not for photos; keep files clean of editor bloat |
As a default rule in 2026: photos go to WebP, graphics with transparency stay PNG (or SVG for logos), and JPEG remains a fine fallback. If your site builder only accepts JPEG and PNG, JPEG for photos and PNG for graphics is still a big improvement over uploading camera originals.
4. Compression settings that keep quality
Lossy compression works by discarding detail the human eye is least likely to notice. The trick is stopping before the loss becomes visible — banding in skies, blockiness in shadows, or halos around text.
- JPEG quality 75–85: the sweet spot for photos. Below 70, artefacts start showing; above 90, file size balloons for almost no visible gain.
- WebP quality 80: a good starting point, roughly equivalent to a higher JPEG quality at a much smaller size.
- Always compare at 100% zoom: check skies, skin tones and fine detail before publishing, not the thumbnail preview.
- Never re-compress a JPEG repeatedly: each save throws away more data. Keep an original master file, and always export web versions from that master.
- Strip metadata: camera EXIF data, embedded thumbnails and colour profiles can add tens of kilobytes. Most compressors remove them automatically — and stripping location data from photos is good practice anyway.
Rule of thumb: if you cannot see the difference at 100% zoom on a proper screen, the smaller file wins — every time. Your visitors will never open the original next to it for comparison.
5. A five-minute workflow that works
You do not need expensive software. This workflow handles almost every image a small business publishes:
- Step 1 — Resize: crop and resize to the display width (plus 2x for retina if it is a hero image).
- Step 2 — Pick the format: WebP for photos, PNG for graphics with transparency.
- Step 3 — Compress: run the resized file through a free compressor. The free image compressor on this site handles it in the browser with no upload or signup, which is handy for quick batches.
- Step 4 — Name it properly: use a descriptive filename with hyphens (for example, blue-cotton-kurta-product.jpg) instead of IMG_4821.jpg — it helps image search too.
- Step 5 — Add alt text: describe the image briefly for accessibility and image SEO. Keep it honest and specific, not stuffed with keywords.
- Step 6 — Verify: re-check the page in PageSpeed Insights and confirm the image payload dropped and LCP improved.
For stores with hundreds of product photos, automate this: most platforms and image CDNs can resize and convert to WebP on the fly, and bulk tools can process a whole folder in one pass. The manual workflow above is for the images you publish week to week — blog headers, banners, and new products.
6. Mistakes that undo good compression
Compression alone does not fix a slow page if the surrounding habits are wrong. Watch for these:
- Uploading camera originals: a 12-megapixel phone photo straight into WordPress or Shopify is the number-one cause of bloated pages.
- PNG screenshots of photos: a screenshot saved as PNG can be ten times larger than the same image as JPEG or WebP.
- No lazy loading: images below the fold should load only when the visitor scrolls to them (the loading="lazy" attribute does this natively).
- Missing width and height: without dimensions, the browser cannot reserve space, and images popping in late cause layout shift — a Core Web Vitals penalty that has nothing to do with file size.
- One giant image for every screen: serve smaller versions to phones with responsive images (srcset) instead of forcing mobile visitors to download the desktop banner.
7. How to check your results
After compressing, measure — do not guess. Open the page in PageSpeed Insights and look at the image-specific recommendations: it will flag oversized images and estimate the kilobytes you can still save. A realistic target is a total image payload under 1 MB for a content page, with no single image over 200–300 KB. If you run an online store and want to see what faster pages are worth in money terms, the ecommerce ROI calculator can put a number on the conversion upside.
Repeat the check after every batch of new product photos. Image bloat creeps back silently — one team member uploading originals for a month can undo a whole optimisation pass. A quarterly image audit, alongside the broader checks in our technical SEO services, keeps the site fast without heroics.
Sources and further reading
Frequently asked questions
Does compressing an image reduce its quality?
Not visibly, if you do it right. Modern lossy compression removes data the eye barely notices. Export a JPEG at quality 75–85 or a WebP at quality 80 and compare the result at 100% zoom — most photos look identical while the file shrinks by 50–80%.
Is WebP better than JPEG for the web?
Usually, yes. WebP typically produces files 25–35% smaller than JPEG at the same visual quality, and it supports transparency like PNG. AVIF can go smaller still, but encoding is slower and support is less universal, so WebP is the safer default in 2026.
What is a good file size for a web image?
Aim for under 200 KB for a large hero image and under 100 KB for ordinary content images. If a single image is over 500 KB, it is almost always oversized, in the wrong format, or both — resize and recompress it before uploading.
Want your site's images audited?
I run hands-on speed and technical SEO audits for businesses in Pakistan — oversized images, Core Web Vitals and the fixes that matter most, prioritized by impact.
