Heavy images are still the number one reason websites load slowly in 2026. If your pages take more than 2.5 seconds to render, you are losing visitors, conversions, and Google rankings. The good news? You can reduce image file size for web by 70 to 90% without any visible loss in quality, as long as you pick the right format, the right dimensions, and the right compression settings.
This is a hands-on tutorial. No fluff, no theory you won’t use. Just the exact workflow we apply on every WordPress site we build at Custom Web Promotions, with real before/after numbers.
Why Image Size Matters More Than Ever in 2026
Google’s Core Web Vitals (LCP in particular) are heavily influenced by the largest image on your page. With mobile traffic now representing more than 65% of all web visits, every kilobyte counts. Here is what oversized images cost you:
- Slower Largest Contentful Paint (LCP) which Google uses as a ranking signal
- Higher bounce rates, especially on 4G or weak Wi-Fi
- Wasted bandwidth for visitors with limited data plans
- Higher hosting costs if you serve millions of pageviews
Step 1: Choose the Right Format (WebP, AVIF or JPEG)
The format you pick has more impact than any compression tool. Here is a clear comparison based on real-world tests we ran on 200 product photos and blog hero images.
| Format | Best Use Case | Avg. Size Reduction vs JPEG | Browser Support (2026) |
|---|---|---|---|
| AVIF | Hero images, photos, banners | 50 to 70% | 98% (universal) |
| WebP | All-purpose web images | 25 to 35% | 99% (universal) |
| JPEG | Fallback, email, legacy | Baseline | 100% |
| PNG | Logos, transparency, screenshots with text | Larger than JPEG | 100% |
Our Recommendation
Use AVIF as your primary format with WebP as a fallback for the rare older browser. JPEG should only be used as a third-tier fallback. PNG should be reserved for graphics with transparency or sharp text.
Step 2: Resize Before You Compress
This is the step most people skip. Compressing a 4000px wide image to 80% quality still leaves you with a massive file. Always resize first to the maximum dimension that will actually be displayed.
Ideal Dimensions for Web Use
- Full-width hero images: 1920px wide (max)
- Blog post featured images: 1200px wide
- In-content images: 800 to 1000px wide
- Thumbnails: 300 to 400px wide
- Product gallery (e-commerce): 1500px wide for zoom, 800px for display
Rule of thumb: never serve an image more than 2x larger than its display size, even for retina screens.
Step 3: Pick the Right Compression Tool
Here are the tools we actually use, ranked by use case:
- Squoosh.app – Best free browser tool. Lets you compare AVIF vs WebP vs MozJPEG side by side with a slider. Perfect for one-off images.
- TinyPNG / TinyJPG – Fast batch compression for PNG, JPEG and WebP. Great when you have 20 images to process quickly.
- Compress-or-die.com – The most aggressive WebP compressor we’ve tested. Excellent for photographers who need maximum quality at minimum size.
- ShortPixel or Imagify (WordPress plugins) – Automatic compression and AVIF/WebP delivery directly inside WordPress.
- cwebp / avifenc (command line) – For developers handling thousands of images.
Step 4: Real Before / After Examples
We took three common image types and ran them through our standard workflow. Here are the actual results.
| Image Type | Original (JPEG, full size) | After resize + WebP | After resize + AVIF | Total Reduction |
|---|---|---|---|---|
| Blog hero photo (4000px) | 3.8 MB | 185 KB | 98 KB | 97.4% |
| Product photo (2500px) | 1.4 MB | 92 KB | 61 KB | 95.6% |
| PNG screenshot (1800px) | 680 KB | 48 KB | 31 KB | 95.4% |
None of these images showed visible degradation when displayed at their actual web size. The blog hero went from 3.8 MB to under 100 KB. That is the difference between a 4-second LCP and a 1-second LCP.
Step 5: Recommended Compression Settings
Use these as your starting point. Adjust visually if needed.
- AVIF: quality 50 to 60, effort 6
- WebP (lossy): quality 75 to 80
- JPEG (MozJPEG): quality 75, progressive ON, chroma subsampling 4:2:0
- PNG: use pngquant with 256 colors max, or convert to WebP lossless
The WordPress Setup We Recommend in 2026
If you run WordPress, here is the exact stack we install on every client site:
- Resize before upload. Never upload a 4000px image. Resize to 1920px max in your photo editor first.
- Install ShortPixel or Imagify. Enable automatic AVIF generation with WebP fallback.
- Enable lazy loading. WordPress does this natively now, but verify it is active on your theme.
- Use a CDN. Cloudflare, BunnyCDN or KeyCDN will serve the right format based on the visitor’s browser.
- Disable WordPress’s huge default image sizes if your theme doesn’t use them. They waste storage.
- Audit with PageSpeed Insights after every major content update.
Common Mistakes to Avoid
- Compressing without resizing first
- Using PNG for photographs
- Setting JPEG quality at 100 (you can’t see the difference above 80)
- Forgetting to compress images uploaded by other team members
- Not testing on a real mobile device with throttled 4G
FAQ
What is the best file size for web images?
Aim for under 200 KB for hero images and under 100 KB for in-content images. Thumbnails should be under 30 KB. These targets are achievable with AVIF or WebP at sensible dimensions.
Is AVIF really better than WebP in 2026?
Yes, in most cases AVIF produces files 30 to 50% smaller than WebP at equivalent visual quality. With browser support now at 98%, there is little reason not to use it as your primary format with WebP as a fallback.
Will compressing images hurt my SEO?
The opposite. Smaller images improve Core Web Vitals (LCP especially), which Google uses as a ranking signal. As long as you keep visual quality acceptable, compression always helps SEO.
Can I compress images already uploaded to WordPress?
Yes. Plugins like ShortPixel, Imagify, and Smush can bulk-optimize your entire media library and convert existing images to WebP or AVIF on the fly.
What’s the difference between lossy and lossless compression?
Lossless preserves every pixel exactly but produces larger files. Lossy throws away data the human eye won’t notice, producing much smaller files. For web use, lossy compression is almost always the right choice.
How do I check if my images are too big?
Run your URL through PageSpeed Insights or GTmetrix. Both tools will list every oversized image and tell you exactly how much you can save.
Final Thoughts
Reducing image file size for web is not just a technical chore, it is one of the highest-leverage performance improvements you can make. With the workflow above, every image on your WordPress site can be 90% smaller while looking identical to your visitors.
Need help auditing or optimizing your site? Get in touch with our team and we’ll run a free performance audit on your homepage.