Images Slowing Your Site? Here's How to Fix It
Images are the top cause of slow websites. Fix it: compress, convert to WebP, resize, lazy load, and use responsive images. All with free browser-based tools.
The Diagnosis
Images account for roughly 45 percent of the average web page's total weight, according to HTTP Archive data. The median desktop page loads about 1 MB of images. On mobile, it's about 700 KB. Both numbers are roughly double what they should be for good performance. A page that loads in 2 seconds with optimized images takes 5 seconds with unoptimized ones, and at 5 seconds, roughly a third of visitors have already left.
Google's Core Web Vitals penalize slow pages. Largest Contentful Paint (LCP), the time until the main content is visible, is directly gated by image load time. If your hero image is 2 MB and takes 3 seconds to download over a typical mobile connection, your LCP score fails. Your search rankings drop. The fix is not to remove images: it's to ship fewer bytes per image.
Fix 1: Compress Before You Upload
A photo straight from a camera or stock photo site is optimized for quality, not for the web. A 4000x3000 JPEG at quality 100 from Unsplash is about 4 MB. The same photo scaled to 1200x900 at quality 85 is about 150 KB. That's a 96 percent reduction with no visible difference on screen.
Here's what compression looks like at different quality levels for a typical 4000x3000 photo:
| Quality | File Size | Visual Result |
|---|---|---|
| 100 | 4.2 MB | No visible compression |
| 90 | 820 KB | Indistinguishable from 100 on screen |
| 85 | 380 KB | Sweet spot: no visible artifacts at 1x |
| 75 | 220 KB | Minor artifacts visible when pixel-peeping |
| 60 | 140 KB | Noticeable banding in gradients |
Quality 85 is the sweet spot for web photos. You save over 90 percent of the file size and the result looks identical at normal viewing distances. Use the Image Compressor to adjust quality and see a live before-and-after preview. The slider updates the preview in real time so you can find the lowest quality that still looks good.
Fix 2: Use WebP
WebP images are 25 to 35 percent smaller than equivalent JPEG or PNG at the same visual quality. Converting your site's images to WebP is the single highest-impact change you can make after compression:
- JPEG photos become lossy WebP at quality 85. A 380 KB JPEG becomes about 260 KB.
- PNG graphics become either lossless WebP (logos, icons with transparency) or lossy WebP (photos accidentally saved as PNG).
- Use the PNG to WebP Converter for PNG sources.
- Use the Image Converter for JPEG and other format sources.
Browser support for WebP is universal as of 2024. For older browsers, serve a JPEG or PNG fallback with a <picture> element:
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image">
</picture>
The browser loads WebP if supported and falls back to JPEG otherwise.
Here's a real before-and-after from a typical product page with 8 images:
| Format | Total Image Weight |
|---|---|
| Original JPEGs (quality 100) | 3.8 MB |
| Compressed JPEGs (quality 85) | 980 KB |
| WebP (quality 85) | 660 KB |
Going from 3.8 MB to 660 KB is an 83 percent reduction. On a 3G connection (1.6 Mbps), that's the difference between a 19-second load and a 3-second load.
Fix 3: Resize to Display Size
If your site displays product thumbnails at 300x300, but the uploaded image is 3000x3000, the browser downloads 100x more pixels than it needs. The browser scales the image down for display, but it still transferred every pixel over the network. Scale images to the maximum display size before uploading:
- Product thumbnails: 600x600 (2x for retina displays)
- Blog hero images: 1200x675 (16:9 ratio at 2x)
- Team photos: 400x400 (2x)
- Logo: SVG preferred. If PNG, 2x the maximum display size.
- Background images: match the largest viewport width you support (1920px wide at 2x)
Use the Image Resizer to set exact pixel dimensions. The tool shows a preview so you can confirm the crop or aspect ratio before exporting.
A 3000x3000 image contains 9 million pixels. A 600x600 image has 360,000. That's a 96 percent reduction, and file size drops proportionally.
Fix 4: Lazy Load Off-Screen Images
Images below the fold don't need to load until the user scrolls to them. Modern browsers support native lazy loading with a single HTML attribute:
<img src="photo.jpg" loading="lazy" alt="...">
This defers image loading until the image is about to enter the viewport. The browser calculates the distance and starts the download early enough that the image is ready by the time the user scrolls to it. No JavaScript library. No IntersectionObserver polyfill. Just one attribute, supported in every modern browser.
The impact is largest on long pages: a blog post with 20 inline images loads only the first 2 or 3 initially. Combined with compression and resizing, lazy loading can reduce initial page weight by 80 to 90 percent.
Fix 5: Use Responsive Images
Serve different image sizes to different screen widths. A phone on a 4G connection gets the 400px version. A desktop on fiber gets the 1200px version. The browser picks the right one based on viewport width and device pixel ratio:
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Hero image"
>
This is the highest-effort fix but yields the best results for hero images and above-the-fold content. Generate 3 to 4 sizes of each critical image, describe the breakpoints with sizes, and let the browser choose. A mobile visitor never downloads the 1200px version meant for desktop.
The Stack: In Priority Order
The complete fix, ordered by effort versus impact:
- Compress (Image Compressor): 5 minutes per page, 60 to 80 percent size reduction. Start here.
- Resize (Image Resizer): 2 minutes per image, often 90 percent or more reduction for oversized uploads.
- Convert to WebP (PNG to WebP / Image Converter): 30 seconds per image, 25 to 35 percent additional reduction on top of compression.
- Lazy load: one attribute per
<img>tag, instant. No reason not to add this everywhere. - Responsive images: more markup to write, but the best ROI for hero images and above-the-fold content. Start with your 3 largest images.
Run through these five steps on your most-trafficked page first. Measure the total image weight before and after. The difference is usually 75 to 90 percent. Then apply the same process to the rest of your site.
Try it yourself: pick the largest image on your site. Run it through the Image Compressor at quality 85. Convert it to WebP with the Image Converter. Compare the file sizes at each step. The final WebP at quality 85 will be a fraction of the original, and you won't see the difference on screen.