Images: The #1 Cause of Slow Pages
Image optimization is the work of reducing the bytes a page downloads while keeping images appropriate for their purpose. The practical steps are to size each file for its display role, choose a suitable format, and check how the page actually loads.
The largest visible image can affect Largest Contentful Paint, while images without reserved dimensions can contribute to layout movement. Optimizing image bytes alone does not guarantee a faster page: network conditions, markup, rendering, and other resources also affect performance, so measure the result on the page.
Understanding Core Web Vitals and Their Relationship to Images
Google introduced Core Web Vitals as a set of measurable signals for page experience, and they became ranking factors in 2021. Two of the three primary metrics are directly affected by how you handle images.
Largest Contentful Paint (LCP)
LCP measures how long it takes for the largest visible element on the page to finish rendering. In the vast majority of web pages, that element is an image - the hero image, featured article photo, or product banner at the top of the page.
Google's thresholds:
- Good: LCP under 2.5 seconds
- Needs Improvement: 2.5-4.0 seconds
- Poor: Over 4.0 seconds
A 3 MB hero image loading over a typical mobile connection will almost certainly push LCP past 4 seconds - putting the page in the "Poor" category. Optimizing that single image to under 200 KB can push the score into "Good" territory in one step.
Cumulative Layout Shift (CLS)
CLS measures visual stability - how much page content unexpectedly jumps around as the page loads. Images without explicit width and height attributes cause layout shifts because the browser can't reserve the correct space before the image finishes downloading. The fix is simple and required: always specify dimensions.
<img src="hero.webp" width="1200" height="630" alt="Description">
With explicit dimensions, the browser reserves exactly the right space for the image before downloading it, eliminating layout shift. This single attribute addition eliminates one of the most common CLS sources.
💡 Tip: Check your Core Web Vitals for free using Google PageSpeed Insights (pagespeed.web.dev). Enter any URL and look at the "Opportunities" and "Diagnostics" sections - they identify exactly which images are causing problems and quantify the potential improvement for each one.
Step 1: Compress Your Images
Compression is the foundation of image optimization and the highest-impact single step. For most web images, you can achieve 50-80% file size reduction with no visible quality difference.
Compression Principles by Image Type
- Photographs (JPEG): Export at quality 80-85. Going higher increases file size exponentially with no visible benefit at normal viewing sizes. Quality 85 is indistinguishable from quality 100 on a calibrated monitor at standard web display sizes.
- Logos and graphics (PNG): Use lossless PNG compression (tools like pngquant or TinyPNG can reduce PNG sizes by 50-70% without visible quality loss through palette optimization).
- EXIF metadata stripping: GPS coordinates, camera model, lens data, and embedded thumbnails can add 50-150 KB to photos - data that visitors to your website have no use for. Strip it.
- Progressive JPEG encoding: Encodes the image in multiple passes so it appears (blurry, then clearer) as it downloads. Feels faster to users on slow connections even at the same file size.
Run all images through Kinsad's Image Compressor before uploading. It handles compression, metadata stripping, and format conversion - processing images locally in your browser without uploading to any server.
Step 2: Resize Images to Their Display Dimensions
The most wasteful image mistake is serving a 4000×3000 pixel photograph when it displays at 800×500 pixels. The browser downloads all 12 megapixels, uses 4 megapixels worth of them, and discards the rest - 8 megapixels of bandwidth wasted per image, per page load, per visitor.
Before uploading any image, determine its actual display dimensions and resize accordingly:
- Check your CSS to determine the maximum pixel width the image will display at (e.g., 800px in a two-column layout)
- For retina/HiDPI displays, multiply by 2 - a 800px display area needs a 1600px source image to look sharp on retina screens
- Resize to those exact dimensions using Kinsad's Image Resizer
- Compress the resized image before uploading
Resizing alone typically reduces image file sizes by 60-90% compared to uploading camera-original images. Combine it with compression for maximum impact.
Step 3: Switch to Modern Image Formats
Converting from JPEG/PNG to WebP delivers a free 25-35% size reduction at equivalent visual quality - with zero code changes required to the page layout. For a site with 10 images averaging 500 KB each, switching to WebP reduces image payload from 5 MB to roughly 3-3.5 MB automatically.
| Format |
Relative File Size |
Browser Support |
Recommendation |
| JPEG |
100% (baseline) |
100% universal |
Fallback for old browsers only |
| PNG (photos) |
150-400% |
100% universal |
Only for lossless/transparency use cases |
| WebP |
65-75% |
95%+ |
Default for all web images |
| AVIF |
50-60% |
~85% |
Best for cutting-edge performance with fallback |
To serve WebP with a JPEG fallback for older browsers, use the HTML <picture> element:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" width="800" height="500">
</picture>
Browsers select the first source format they support, falling back to the <img> element if nothing else matches. This gives AVIF to cutting-edge browsers, WebP to mainstream browsers, and JPEG to legacy environments.
Step 4: Implement Lazy Loading
Lazy loading defers the download of images that are below the fold (not visible in the initial viewport) until the user scrolls close to them. Instead of downloading all 15 images on a page when it first loads, the browser downloads only the 2-3 that are immediately visible, then loads the rest on demand as the user scrolls.
In modern browsers, this requires a single HTML attribute:
<img src="article-photo.webp" loading="lazy" alt="Description">
The loading="lazy" attribute is supported by all modern browsers (95%+) and requires zero JavaScript. For a long page with 20 images, lazy loading can reduce the initial page load from 4 MB to under 800 KB - because only the first 3-4 visible images are downloaded on arrival.
⚠️ Warning: Never add loading="lazy" to your hero or LCP image. The browser needs to begin downloading it immediately. Lazy loading your LCP image actively hurts your LCP score. Only lazy-load images that are below the fold - not visible when the page first renders.
Step 5: Implement Responsive Images with srcset
The srcset attribute lists image candidates at different intrinsic widths; sizes describes the image's expected layout width. The browser uses these hints along with display conditions to select a candidate. For example, if a card is full-width on a phone but 800 CSS pixels wide on desktop, make sizes reflect that layout instead of copying a generic value.
A basic responsive image implementation:
<img
src="photo-800.webp"
srcset="photo-400.webp 400w,
photo-800.webp 800w,
photo-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 800px"
alt="Description"
width="800"
height="500"
>
Reading this: "Here are three image versions at 400, 800, and 1600 pixels wide. On screens under 768px wide, the image fills 100% of the viewport. On larger screens, it's 800px wide." The browser uses this information to select the smallest version that still looks sharp on the current device.
The browser's selection is not a fixed promise based only on viewport width; pixel density, network conditions, and the available candidates can also matter. Test the markup in the browser's network tools to confirm that the expected file is being requested.
Step 6: Preload Your LCP Image
If you know which image will be your LCP element (usually the hero or banner image at the top of the page), you can instruct the browser to start downloading it immediately - before it processes CSS and layout - using a <link rel="preload"> tag in the page's <head>:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
This eliminates the "discovery delay" - the time between when the browser first begins loading the page and when it finds the image in the HTML. For a hero image, this delay is typically 200-800ms. Eliminating it directly improves LCP by the same amount.
If you're using srcset for responsive images, specify the image format directly in the preload:
<link rel="preload" as="image"
imagesrcset="hero-800.webp 800w, hero-1600.webp 1600w"
imagesizes="(max-width: 768px) 100vw, 1600px"
fetchpriority="high">
Step 7: Consider an Image CDN for Scale
An Image CDN (Content Delivery Network) serves images from servers geographically close to each visitor and can automatically optimize images on-the-fly - converting to WebP, resizing for the requesting device, and compressing in real time based on parameters in the URL.
Popular image CDN options:
- Cloudinary: Full-featured, generous free tier, automatic format conversion, AI cropping
- Imgix: URL-based transformations, excellent performance, paid service
- Cloudflare Images: Low cost, integrated with Cloudflare CDN, $5/month for most sites
- Next.js Image Optimization: Built-in for Next.js applications - automatic WebP, lazy loading, and responsive images
Image CDNs add the most value when you have dynamic content, large image libraries, global audiences, or need real-time transformations. For static sites with manageable image counts, manual optimization using Kinsad's Image Compressor and Image Resizer combined with proper srcset and lazy loading achieves most of the same benefits without the complexity or cost.
Real-World Impact: Before and After
To illustrate the cumulative effect of applying all these techniques, here's a realistic before-and-after comparison for a typical small business homepage with five images:
| Metric |
Before Optimization |
After Optimization |
Improvement |
| Total image transfer |
4.8 MB |
380 KB |
92% reduction |
| LCP (mobile 4G) |
7.1 seconds |
2.0 seconds |
72% faster |
| PageSpeed Insights score |
38/100 |
94/100 |
+56 points |
| First Contentful Paint |
4.2 seconds |
1.4 seconds |
67% faster |
| Bounce rate (estimated) |
High (slow site) |
Lower (fast site) |
Significant UX gain |
These numbers are representative for a site starting from completely unoptimized, camera-original images. Even a site with moderately compressed images typically achieves 40-60% further improvement by applying all the techniques above.
Image Optimization Checklist
Use this as a pre-publish checklist for any new page:
- ☑ Images resized to the actual displayed pixel dimensions (not serving camera-original files)
- ☑ Compression applied - quality 80-85 for JPEG; lossless optimization for PNG
- ☑ EXIF metadata stripped
- ☑ WebP format used where possible, with JPEG fallback via
<picture>
- ☑ Explicit
width and height attributes on all <img> tags (prevents CLS)
- ☑
loading="lazy" on all below-the-fold images
- ☑
srcset provided for hero images and large feature images
- ☑ LCP image preloaded with
<link rel="preload" fetchpriority="high">
- ☑ Alt text on all content images (accessibility and SEO)
- ☑ No GIF animations - replaced with looping video if needed
Frequently Asked Questions
Q: How much does image optimization actually improve page speed?
For sites with unoptimized images, the improvement is typically dramatic. Images often represent 50-70% of total page weight, so a 70-90% reduction in image payload directly translates to significant load time improvements. LCP improvements of 50-75% are common when starting from unoptimized images. The exact numbers depend on your starting point and which techniques you implement.
Q: Does image optimization help with SEO?
Yes, directly. Core Web Vitals (including LCP) are Google ranking factors. Faster pages rank better, have lower bounce rates, and provide better experiences that Google rewards in search. Additionally, descriptive alt text helps images appear in Google Image Search, and faster pages receive more Google crawl budget. Image optimization is both a performance and an SEO improvement.
Q: What is lazy loading and does it actually help?
Lazy loading defers image downloads until the user is about to scroll to them. For pages with many images (blog posts, galleries, e-commerce listings), it can dramatically reduce initial page load size. A page with 20 images might only need to load 3 images on the initial visit. Adding loading="lazy" is a single-attribute change with significant impact - and it's supported natively in all modern browsers.
Q: What's the difference between srcset and lazy loading?
srcset determines which image size to download based on device screen dimensions and pixel density - ensuring mobile users get appropriately sized images. loading="lazy" controls when images are downloaded - deferring off-screen images until needed. They solve completely different problems and should both be used together.
Q: Do I need an image CDN?
For most sites under 100,000 monthly visitors with a manageable number of images, manual optimization provides most of the same benefits without CDN cost or complexity. Image CDNs add the most value at scale: when you have thousands of images, real-time transformation needs, or a global audience where geographic edge delivery matters significantly.
Q: What file size should I target for web images?
As a rule of thumb: hero images should be under 200 KB (WebP, 1600px wide). Blog post feature images: under 100 KB. Product thumbnails: under 30 KB. Icon-sized images: under 5 KB (or use SVG). These targets are achievable with proper compression and format selection and will produce good LCP scores on most connections.
Q: Should I convert all existing JPEG images to WebP?
If you're managing a site with many JPEG images, converting them to WebP reduces sizes by 25-35% automatically. The effort-to-impact ratio is excellent. Many CMS platforms and image optimization plugins (Imagify, ShortPixel, Smush for WordPress) can handle this conversion automatically on upload. For new images, always export as WebP when the tooling supports it.
Q: How do I find out which images are hurting my page speed?
Google PageSpeed Insights (pagespeed.web.dev) is the most actionable tool - it identifies specific images causing issues with estimated savings for each one. Chrome DevTools' Network tab filtered to images shows exact download sizes and timing. The Lighthouse audit (built into Chrome DevTools) provides an "Image Opportunities" section with specific recommendations.
Optimize Your Images Right Now - Free
Compress and resize images for the web with no account and no file uploads to external servers. Everything runs in your browser.
Use the Image Compressor →