Images often account for the majority of a webpage’s weight. Learn how developers can improve performance using modern image formats, responsive images, and smarter delivery strategies.
The hidden performance problem on most websites
Open Chrome DevTools on almost any modern site and check the Network tab.
What you’ll usually see is something surprising:
Images dominate the payload.
The average homepage ships around 1 MB of images, often more than JavaScript, CSS, and HTML combined.
A super heavy page with a lot of big product images. Lazy loading and optimization would help here.
That product page with 20 images?
Each one is an opportunity to either:
- Deliver a fast, polished experience
- Or frustrate users with slow loading and layout shifts
If you care about Core Web Vitals, SEO, and user experience, image optimization is one of the highest-impact improvements you can make.
This article was generated from our Cloud to Crowd: Media IQ with Next.js curriculum, built by Cloudinary Developer Relations. Go through this curriculum and pass the certification exam to qualify to become an official Cloudinary Creator!
Why images matter (and when they don’t)
Humans process images much faster than text.
A well-chosen image can:
- Explain a product instantly
- Replace paragraphs of documentation
- Capture attention in fast-scrolling feeds
But images can also hurt your product experience when used poorly:
- Too many images slow down page loads
- Poor cropping hides important information
- Large files damage Core Web Vitals
- Undisclosed AI or edited images reduce user trust
So you need to follow this simple rule:
Right format + right size + smart delivery
Check out the way these images are delivered to the browser
Images and Core Web Vitals
Images heavily influence Google's Core Web Vitals, particularly:
Largest Contentful Paint (LCP)
Measures how long it takes for the largest visible element on the page to load.
This is often your hero image.
A good LCP target is under 2.5 seconds.
Cumulative Layout Shift (CLS)
Images without defined dimensions can cause layout shifts while loading.
Interaction to Next Paint (INP)
Heavy pages delay responsiveness.
Optimizing images can dramatically improve all three metrics.
The current state of images on the web
Nearly every webpage (99.9%) loads at least one image.
Average number of images per page:
| Device | Avg Images |
|---|---|
| Desktop | 14 |
| Mobile | 13 |
Common formats used across the web:
| Format | Usage |
|---|---|
| JPEG | 32.4% |
| PNG | 28.4% |
| GIF | 16.8% |
| WebP | 12% |
| SVG | 6.4% |
| AVIF | 1% |
But these numbers reflect habit, not best practices.
Performance-focused teams are already shifting toward modern formats.
Example data from optimized platforms shows:
| Format | Usage |
|---|---|
| WebP | 49.5% |
| JPEG | 19.9% |
| AVIF | 13.3% |
| HEIC / PNG | 8.7% |
The takeaway:
Modern image formats are replacing JPEG-first strategies.
Choosing the right image format
Different formats solve different problems.
Lossy compression
Reduces file size by permanently discarding some data.
Formats:
- JPEG
- WebP
- AVIF
Pros:
- Much smaller file sizes
- Ideal for photos
Cons:
- Slight quality loss
Lossless compression
Reduces size without losing data.
Formats:
- PNG
- SVG
Pros:
- Perfect image quality
- Ideal for UI graphics
Cons:
- Larger file sizes
Check out the difference between a lower res image vs JPEG XL
Quick developer cheat sheet
| Use case | Best format |
|---|---|
| Photos | WebP / AVIF |
| Graphics | PNG |
| Icons | SVG |
| Legacy fallback | JPEG |
Modern formats like WebP and AVIF can reduce file size by 40–60% compared to JPEG while keeping similar visual quality.
Delivering images efficiently
Choosing the right format is only part of the story.
Delivery strategy matters just as much.
Guess what? Cloudinary takes the guesswork out of all of this by helping you optimize, transform and deliver images the right way for your users. Check out how on the Developers Hub.
1. Use responsive images
Don't force mobile users to download desktop-sized images.
Use srcset and <picture>:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Product hero image">
</picture>
The browser automatically chooses the best supported format and size.
2. Use a CDN
A Content Delivery Network (CDN) reduces the physical distance between your users and your images.
Modern image CDNs can also:
- Resize images automatically
- Convert formats (WebP / AVIF)
- Adjust compression
- Crop dynamically
This allows you to store one high-quality original while serving optimized versions.
3. Lazy-load images (strategically)
Lazy loading delays images until they approach the viewport.
Example:
<img src="gallery.jpg" loading="lazy" alt="Gallery image">
But there is one important rule:
⚠️ Never lazy-load above-the-fold images.
Doing so hurts Largest Contentful Paint.
Lazy loading should only be used for below-the-fold content.
Responsible image usage
Performance isn't the only consideration.
Developers should also use images ethically and accessibly.
1. Avoid misleading visuals
Don't use edited or cropped images that misrepresent a product.
2. Disclose AI-generated images
Transparency builds trust with users.
The banner at the top of this article was generated using Nano Banana.
3. Make images accessible
Always include descriptive alt text.
<img src="dashboard.png" alt="Analytics dashboard showing user growth trends">
4. Respect privacy and licensing
- Check image licenses
- Get consent when photographing people
- Remove sensitive EXIF metadata
5. Balance aesthetics and performance
A beautiful image that takes 8 seconds to load isn't beautiful.
It's broken.
Common image optimization myths
“A CDN replaces responsive images”
False.
Responsive images help the browser choose the correct size, while CDNs deliver optimized assets.
You need both.
“More images mean more engagement”
Not necessarily.
Images should help users make decisions, not clutter the interface.
Three practical tips for developers
1. Start with your largest image
Open DevTools → Network and find the biggest image.
Check if delivered size == display size.
A common mistake: 3000px image displayed in a 600px container.
That’s wasted bandwidth.
2. Measure your format mix
Check what formats your pipeline actually delivers.
If you're still mostly serving JPEG, there's likely a huge optimization opportunity.
3. Don’t assume mobile is optimized
Mobile networks amplify performance problems.
Check your 75th and 90th percentile metrics, not just averages.
Try this: Analyze a website’s image performance
You can test any website using Cloudinary’s Web Speed Test.
Visit https://webspeedtest.cloudinary.com
Then analyze:
- Performance score
- Total image weight
- Largest Contentful Paint
- Potential size reductions
You'll often discover massive performance gains from simple fixes.
Final thoughts
Images are often the largest performance lever on a webpage.
If you remember only three things:
1️⃣ Optimize your largest image first
2️⃣ Use modern formats like WebP and AVIF
3️⃣ Deliver responsive images with proper sizing
Small improvements in image delivery can produce huge gains in performance and user experience.
What’s the biggest image optimization issue you’ve found on a website?
| Cloudinary ❤️ developers |
|---|
| Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today. |
| 👉 Create your free account |
Top comments (0)