Open Chrome DevTools, reload your homepage, and sort the Network tab by file size. In nine out of ten cases, the top three entries are images — not JavaScript, not CSS, not fonts.
Images typically account for 50–70% of total page weight. A single unoptimised hero banner can weigh more than the entire HTML, CSS, and JavaScript combined. Fix your images and you often fix your LCP, your PageSpeed score, and your bounce rate in one move.
Why images hurt speed more than anything else
Text, CSS, and JavaScript compress well — a 200 KB CSS file gzips to 30 KB. Photographs do not compress as efficiently in legacy formats. A 4 MB JPEG from a DSLR camera stays close to 4 MB on the wire unless you actively resize and re-encode it.
On mobile networks, downloading 4 MB before the page feels ready can take 8–15 seconds. That directly drives your LCP (Largest Contentful Paint) into the red — and LCP is the heaviest-weighted Core Web Vital for PageSpeed scoring.
The 6 ways images slow your site down
Wrong file dimensions
Uploading a 4000×3000px photo to display at 800×600px means the browser downloads four times the pixels it needs, then scales down in the browser — wasting bandwidth and decode time.
Fix: Resize to the maximum display size before upload. For a hero at 1920px wide, export at 1920px — not 6000px.
Legacy formats (JPEG/PNG at full quality)
A PNG screenshot of a photo can be 5× larger than the same image as a compressed JPEG. Exporting JPEG at 100% quality adds size with no visible benefit over 80–85% quality.
Fix: Use WebP for photos (25–35% smaller than JPEG at same quality). Use AVIF where supported (another 20% smaller). Keep PNG only for graphics with transparency.
No responsive images
Serving the same 1920px image to a 390px mobile screen wastes bandwidth.
Without srcset and sizes, mobile users download desktop-sized files.
Fix: Generate multiple sizes (640w, 1024w, 1920w) and let the browser pick the right one via srcset. Next.js <Image> and WordPress plugins like ShortPixel handle this automatically.
Missing width and height attributes
Without explicit dimensions, the browser does not know how much space to reserve. When the image loads, content below it jumps down — hurting CLS (Cumulative Layout Shift).
Fix: Always set width and height on every <img>, or use CSS aspect-ratio. Modern frameworks do this by default.
Everything loads at once — no lazy loading
A page with 30 product images loads all 30 on first visit — even those below the fold the user may never scroll to. Each one competes with your hero image for bandwidth.
Fix: Add loading="lazy" to all images below the fold. Never lazy-load the LCP hero image — it must load immediately. Preload the hero with <link rel="preload" as="image">.
Served from a slow origin — no CDN
Even a perfectly optimised 150 KB WebP takes 400ms to reach a user in Sofia if the server is in Virginia. Geographic distance adds latency to every image request.
Fix: Serve images through a CDN (Cloudflare, BunnyCDN, or your host's built-in CDN). Enable long cache headers — Cache-Control: max-age=31536000 for versioned filenames.
Image formats compared — which to use in 2026
| Format | Best for | Size vs JPEG | Browser support |
|---|---|---|---|
| JPEG | Fallback for old browsers | Baseline | Universal |
| WebP | Photos, general use | 25–35% smaller | 97%+ browsers |
| AVIF | Hero images, high-quality photos | 40–50% smaller | 92%+ browsers |
| PNG | Logos, graphics with transparency | Often larger | Universal |
| SVG | Icons, simple logos, illustrations | Tiny for vectors | Universal |
Recommended stack: serve AVIF with WebP fallback and JPEG as last resort using
<picture> element or automatic format negotiation via CDN.
Optimising the LCP image — the highest-impact fix
LCP is almost always an image on content-heavy pages. Optimising that one file can move your PageSpeed score by 20–40 points.
- ✓Identify the LCP element in PageSpeed Insights or DevTools Performance panel
- ✓Resize to exact display dimensions — no larger
- ✓Convert to WebP or AVIF, target under 150 KB for hero images
- ✓Preload with
<link rel="preload" as="image" href="...">in<head> - ✓Do not lazy-load the LCP image
- ✓Set explicit width and height to prevent CLS
WordPress image optimisation workflow
WordPress uploads images as-is — no automatic compression or format conversion unless you add it. This is one of the main reasons WordPress sites load slowly →
- 1Install ShortPixel, Imagify, or EWWW Image Optimizer — auto-converts to WebP on upload
- 2Bulk-optimise existing media library (one-time, can take hours on large sites)
- 3Enable lazy loading in your cache plugin (WP Rocket, LiteSpeed Cache)
- 4Regenerate thumbnails after changing image size settings
Custom / Next.js image optimisation
Next.js includes an <Image> component that handles format conversion, responsive sizes,
lazy loading, and CDN delivery automatically. For custom stacks:
- ✓Use Sharp or Squoosh in your build pipeline for batch conversion
- ✓Implement an image CDN (Cloudinary, imgix, or self-hosted with Cloudflare Images)
- ✓Generate blur placeholders (LQIP) for perceived speed while full image loads
Real example from our practice
Before: E-commerce homepage · hero JPEG 3.2 MB · LCP 6.8s · mobile PageSpeed 41/100
After: AVIF 89 KB + preload · LCP 1.6s · mobile PageSpeed 91/100
Work done: Resize, format conversion, preload tag, CDN — under 2 hours of optimisation.
Quick image audit checklist
- ☐Run PageSpeed — note the LCP element and its load time
- ☐DevTools Network — sort by Size, list top 5 image files and their KB
- ☐Any image over 200 KB needs compression or resize
- ☐Check if WebP/AVIF is being served (Network → check Content-Type header)
- ☐Verify lazy loading on below-fold images (not on hero/LCP image)
- ☐Confirm width/height attributes on all images
Images are reason #1 in our 10 real reasons websites load slowly →
// SINGULARITY EDGE STUDIO
Image optimisation built into every project
We configure automatic WebP/AVIF conversion, responsive srcset, CDN delivery, and LCP preload as standard — not as an afterthought. Every site we deliver scores above 90/100 on mobile PageSpeed.
Website performance optimization → · What PageSpeed score means →
See how much your images are costing you
Free Speed Audit: page weight breakdown, LCP element identification, and image optimisation priorities.
Free Speed Audit →Conclusion
Images are the lowest-hanging fruit in web performance optimisation. Resize to display dimensions, convert to WebP or AVIF, preload your LCP image, lazy-load everything else, and serve through a CDN — that sequence alone can transform a 40/100 site into a 90/100 site.
The business impact of faster loading is real: why businesses lose customers in the first 3 seconds →
// TOPICS
Author
Singularity Edge Studio
Engineering studio for web and software — Plovdiv, Bulgaria. We build corporate sites, SaaS, e-commerce, and DevOps infrastructure with a focus on measurable outcomes.
// RELATED FAQ
// MORE ARTICLES
WordPress or Custom Site — Which Is Faster?
WordPress can be fast — but most WordPress sites are not. Custom Next.js sites score higher by default. An honest performance comparison with real benchmarks, trade-offs, and when each option makes sense.
Web DevelopmentTypeScript — why it became a mandatory standard and what it means for your project in 2026
In 2026, plain JavaScript for a new professional project is already technical debt. How TypeScript cuts bugs, speeds up AI-assisted development, and protects business risk — with examples, migration steps, and a production tsconfig.
Web DevelopmentPWA — Mobile App Without the App Store: Why Your Business Needs It in 2026
Progressive Web App transforms your website into a mobile app without the App Store — offline mode, push notifications, one codebase. Complete guide with architecture, comparison, pricing and implementation steps.