Photo by ThisIsEngineering on Pexels
Quick answer
To compress images for a website: resize to display dimensions first, compress JPEG at 80% quality, and convert to WebP where possible. Target hero images under 200KB, product photos under 150KB, and thumbnails under 50KB. At 80% quality, JPEG files are typically 60–70% smaller than the original with no visible difference at normal screen sizes.
Images are the largest contributor to page weight on most websites. A single unoptimized product photo from a modern phone or DSLR arrives at 3–8MB. Put three of those on a homepage and you have a site that mobile users — on a standard 4G connection — will give up on before the page finishes loading.
Compressing images for a website is one of the highest-return changes you can make to a slow site. Faster than upgrading your hosting plan. Cheaper than a CDN. Something you can do in an afternoon, once, with lasting results. The goal is straightforward: get every image below a reasonable file size, in the right format, before it ever touches your server.
This guide covers what to compress, what format to use, specific targets by image type, and four steps to do it right.
Why image file size slows your website
Photo by Nataliya Vaitkevich on Pexels
Images account for the majority of bytes transferred on most web pages. The specific problem for SEO and user experience is Largest Contentful Paint (LCP)— Google's Core Web Vitals metric that measures how long it takes for the largest visible element (usually a hero image) to finish loading. Google uses LCP as a ranking signal. A site that fails LCP is a site that Google is less likely to rank above one that passes.
The LCP threshold: under 2.5 seconds is Good, 2.5–4 seconds needs improvement, over 4 seconds is Poor. A 4MB hero image on a typical connection will fail that threshold. A 150KB WebP version of the same image will pass it.
From performance data across real websites: sites serving unoptimized images typically score 40–65 on Google PageSpeed Insights. After compressing images and serving the right formats, scores typically improve by 15–25 points — without touching any other part of the site. That is not a small gain.
The other number worth knowing: a small online seller with 200 product photos at 4–6MB each had a Shopify store failing every PageSpeed audit. Google PageSpeed was flagging “Serve images in next-gen formats” on every page. They batch-uploaded to the image compressor, downloaded the ZIP, replaced the photos. The average file dropped from 5MB to 680KB. Load time dropped measurably. No developer required.
Choose the right format first
Photo by Kaboompics on Pexels
Compressing the wrong format is the most common image optimization mistake. A PNG version of a photograph will always be larger than a JPEG version at comparable visual quality — no amount of compression fixes a format mismatch. Choose the format before compressing.
JPEG (JPG) — the right choice for photographs, product photos, hero images, and anything with gradients or complex color. Supports lossy compression efficiently. JPEG at 80% quality is typically 60–70% smaller than the uncompressed original with no visible quality difference at normal viewing sizes. Does not support transparency.
PNG — the right choice for logos, icons, graphics with flat colors, and any image that needs a transparent background. PNG uses lossless compression, meaning no data is discarded — but the trade-off is that it cannot compress photographic content as efficiently as JPEG. A product photo saved as PNG is typically 3–5× larger than the same image as a well-compressed JPEG. Use PNG when you need transparency or lossless quality. Use JPEG when you do not.
WebP — the best format for website performance. Supported by all modern browsers since 2020 (Chrome, Firefox, Safari, Edge). Produces files 25–35% smaller than JPEG at the same visual quality, supports both lossy and lossless modes, and supports transparency. If your website is still serving only JPEG and PNG, you are leaving measurable performance gains unrealized. The format has been available for years. The barrier to using it has been close to zero since Safari added support.
| Format | Best for | Transparency | Relative size |
|---|---|---|---|
| JPEG | Photos, products, heroes | No | Baseline |
| PNG | Logos, icons, graphics | Yes | 3–5× JPEG for photos |
| WebP | Everything (modern browsers) | Yes | 25–35% smaller than JPEG |
Target file sizes by image type
Most image optimization guides recommend "reduce file size" without specifying what you are aiming for. These are the specific targets for the most common image types on websites, assuming images are resized to display dimensions before compression runs:
| Image type | Display width | Target file size |
|---|---|---|
| Hero / banner | 1200–1920px | Under 200KB |
| Product photo | 600–1000px | Under 150KB |
| Blog / article image | 800px | Under 120KB |
| Thumbnail | 300–400px | Under 50KB |
| Logo / icon | Variable | Under 30KB |
| Background texture | Full width | Under 100KB |
These targets are aggressive but achievable with the right order of operations. The most common mistake is trying to compress a 4000px-wide image down to 150KB — which is harder than necessary and produces artifacts at low quality settings. Resize to display dimensions first. Then compress. The result is the same file size with better image quality.
An image displayed at 800px wide does not need to be 4000px wide in the source file. Resizing to display dimensions alone typically reduces file size by 60–80% before compression even runs. Do this step first, every time.
How to compress images for a website: step-by-step
Photo by Andrea Piacquadio on Pexels
Four steps. Do them in this order.
Step 1: Audit your current images
Run your site through Google PageSpeed Insights. Look at three specific flags:
- “Serve images in next-gen formats” — lists images that are JPEG/PNG where WebP would reduce size
- “Properly size images” — lists images that are larger in dimensions than they display
- “Efficiently encode images” — lists images where compression would reduce size without visible quality loss
Make a list. Start with the images flagged as having the largest potential savings — those are your highest-impact targets.
Step 2: Resize to display dimensions
Before compressing anything, resize images to the largest size they actually display on your site. A hero image that shows at 1200px wide on desktop does not need to be 4000px wide in your file. A product thumbnail at 400px does not need a 2000px source.
Use an online image resizer to bring dimensions down to display size. Set width to the maximum display width; most tools lock the aspect ratio automatically. This step alone typically reduces file size by 60–80% for images that came from a camera or high-resolution source.
Step 3: Compress at 80% quality
For JPEG: 80% quality is the right setting for website use. Files are 60–70% smaller than the uncompressed original. The quality difference at normal screen viewing sizes is not visible. Going below 65% starts producing visible artifacts on most images — you save a few more kilobytes at the cost of a noticeably degraded image.
For PNG: lossless compression reduces size by 15–30% depending on the image content. If a compressed PNG is still too large for your target, ask whether the image actually needs a transparent background. If not, convert to JPEG and compress there instead.
Use a batch image compressor to process multiple images at once. Upload your resized images, set the quality to 80%, download the ZIP. For a set of 50 product photos, the entire batch takes under 2 minutes.
Step 4: Convert to WebP
After compressing, convert JPEG and PNG files to WebP. Modern browsers — Chrome, Firefox, Safari, Edge — all support WebP. The conversion typically reduces file size by a further 25–35% compared to an already-compressed JPEG.
Use an image converter to convert in bulk: select all images, choose WebP as the output format, download the ZIP. Keep the original JPEG versions for two specific cases: Open Graph images (the preview image when a URL is shared on WhatsApp, iMessage, or LinkedIn) and email images. Some platforms and email clients still do not render WebP in those contexts.
What about WebP?
WebP is worth a separate section because it is the most common missed optimization on existing websites. Browser support reached near-universal coverage when Safari added it in 2020. The format supports both lossy and lossless modes, supports transparency (unlike JPEG), and produces files 25–35% smaller than JPEG at the same visual quality.
A typical uncompressed JPEG product photo at 2MB becomes around 1.3MB as WebP at the same visual quality — before any compression is applied. Apply 80% lossy compression and it drops further. The combined effect of WebP format plus compression is typically a 65–80% size reduction from the original uncompressed JPEG.
The Can I Use data for WebP shows 96%+ global browser support. If your website is still not serving WebP, the reason is almost certainly either workflow friction (no easy conversion step) or CMS limitations (plugins or settings that need configuration), not a compatibility concern.
For Open Graph images (og:image tags) and email newsletter images: keep a compressed JPEG. Some social platforms and email clients still do not render WebP in those specific contexts. Serve WebP on-page; keep JPEG for off-page sharing.
Common compression mistakes
- Compressing without resizing first. The most common and most costly mistake. Compressing a 4000px image to 150KB requires aggressive quality reduction that introduces artifacts. Resize to display dimensions first — the compression step then produces better quality at the same file size.
- Using PNG for product photos.PNG's lossless compression cannot match JPEG's efficiency for photographic content. A product photo saved as PNG is typically 3–5× the size of a well-compressed JPEG. If the image does not require transparency, use JPEG or WebP.
- Using JPEG for logos and icons. JPEG compression creates visible artifacts on flat colors and hard edges — exactly the content that logos and icons contain. Use PNG or SVG for logos. Use PNG or WebP for icons with transparency.
- Over-compressing to hit an aggressive target. Going below 65% JPEG quality produces visible artifacts on most images. The file size savings below 65% are marginal compared to the quality loss. Stay at 80% and use WebP conversion for the additional size reduction.
- Re-compressing already-compressed JPEGs. Each time a JPEG is compressed, it discards more data permanently. If you received an image as a JPEG, compress it once at 80% and stop. Re-compressing the same JPEG multiple times (common when editing, saving, re-exporting) degrades quality with each pass.
- Forgetting about mobile. Serving a 1920px-wide image to a mobile device displaying it at 375px wide transfers six times more data than necessary. Implement responsive images with srcset attributes where your CMS supports it, or at minimum use a 1200px-wide image instead of a 2400px-wide one as your default.
If Google PageSpeed is flagging the same images after you have compressed them, check whether your CMS is serving the original uncompressed version from the media library rather than your optimized files. Some platforms cache and re-serve original uploads regardless of what you upload as replacements.
Compress images for your website — free, no account needed
Batch upload, set quality to 80%, download as ZIP. Files deleted within 1 hour.
Compress Images FreeFrequently asked questions
How much should I compress images for a website?
Target a 60–70% reduction from the original file size. JPEG at 80% quality typically achieves this without visible quality loss at normal screen viewing sizes. WebP at the same quality setting produces files a further 25–35% smaller than JPEG, so the combined reduction from an uncompressed original can reach 70–80%. Below 65% JPEG quality, visible compression artifacts start to appear on detailed images.
What is the best image format for websites?
WebP is the best format for website performance in 2026 — 25–35% smaller than JPEG at the same visual quality, with full transparency support and 96%+ browser compatibility. Use JPEG as a fallback specifically for Open Graph images and email, where WebP support is inconsistent. Use PNG only when an image requires a transparent background and cannot be converted to WebP.
Should I compress PNG images or convert them to JPEG?
Convert to JPEG if the image does not require transparency. PNG uses lossless compression and cannot compress photographic content as efficiently as JPEG — a product photo as PNG is typically 3–5× larger than the same image as JPEG at 80% quality. If transparency is required, convert to WebP instead, which supports transparency and compresses more efficiently than PNG. Keep PNG for logos and flat graphics where lossless quality matters.
Does image compression affect SEO?
Yes, directly. Image file size affects Largest Contentful Paint (LCP), which Google measures as part of Core Web Vitals — a confirmed ranking signal. Sites with unoptimized images typically score 40–65 on PageSpeed Insights. After compressing and converting to WebP, scores typically improve by 15–25 points. Beyond rankings, faster pages also reduce bounce rates, which is a secondary signal.
What file size should website images be?
As a starting point: hero images under 200KB, product photos under 150KB, blog post images under 120KB, thumbnails under 50KB, logos under 30KB. These targets assume the image has been resized to its actual display dimensions before compression. An image displayed at 800px wide but stored at 4000px wide will not hit these targets regardless of compression quality — resize first.
How do I compress multiple images for a website at once?
Use a batch image compressor. Upload all images at once, set the quality level (80% for JPEG), and download the results as a ZIP archive. A batch of 50 product photos typically processes in under 2 minutes. After compression, batch convert to WebP using an image converter for the additional size reduction. Both steps can be done without installing any software — a browser-based tool handles the full workflow.
Fix the images first. Resize, compress, convert to WebP. Everything else can wait.