Why Are My Optimized Images Still Slow?

You compressed your images, maybe even converted them to WebP. Yet your pages still feel heavy, and your Core Web Vitals are stuck in the red. What's going on?

It's a common frustration: you did the obvious work, but the problem persists. The truth is, image optimization goes beyond just shrinking file size. Several hidden factors can undermine your efforts and keep your site slow. Let's diagnose them one by one.

1. You're Serving the Wrong Format

JPEG, PNG, GIF, WebP, AVIF—each format has its strengths. If you're still using JPEG for screenshots or PNG for photos, you're likely wasting bandwidth. Modern formats like WebP and AVIF offer superior compression, often reducing file size by 25-35% compared to JPEG at the same quality.

The fix: Convert your images to WebP or AVIF. If you're on WordPress, plugins like Smush or ShortPixel can automate this. For other platforms, use online converters or your build process. Always keep a fallback to JPEG or PNG for older browsers, but serve the modern format to the majority.

2. You're Not Resizing Images to Their Display Size

Uploading a 4000px-wide photo and displaying it at 800px is a classic mistake. The browser still downloads the full 4000px image, even though it only shows a fraction of it. This wastes bandwidth and slows down your page.

The fix: Resize your images to the maximum size they'll be displayed on your site. If your content column is 800px wide, don't upload anything larger than 1600px (for retina displays). For full-width hero images, that might be 1920px or 2560px. The key is to match the file to the container.

3. You're Missing Width and Height Attributes

Without width and height attributes in your HTML, the browser doesn't know how much space to reserve for an image until it downloads it. This causes layout shifts, which directly harm your Cumulative Layout Shift (CLS) score—a Core Web Vital.

The fix: Always include width and height attributes in your <img> tags. These don't have to be the final display size; they just need to maintain the aspect ratio. For example, <img src="image.jpg" width="800" height="600" alt="...">. This reserves the space and prevents shifts.

4. Your Lazy Loading Is Too Aggressive

Lazy loading is great for below-the-fold images, but if you lazy load everything—including the hero image—you can hurt your Largest Contentful Paint (LCP). The hero image is often the LCP element, and if it's lazy-loaded, the browser delays downloading it, making your LCP slower.

The fix: Don't lazy load images that are above the fold. Use loading="lazy" only on images that are far down the page. For the hero image, use fetchpriority="high" to signal its importance.

5. You're Not Using Responsive Images

If you're serving the same image file to mobile, tablet, and desktop, you're missing a huge opportunity. Mobile users on small screens don't need a 1920px-wide image—they need something much smaller. Serving oversized images to mobile is a common cause of slow mobile performance.

The fix: Use srcset and sizes attributes to provide different image versions for different screen widths. For example:

<img src="small.jpg" srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" alt="...">

This tells the browser to choose the appropriate size based on the viewport.

6. Your CDN Isn't Optimized for Images

A CDN (Content Delivery Network) can speed up delivery, but if it's not configured to handle images well, you might not see the benefits. Some CDNs offer automatic image optimization—converting to WebP, resizing, and compressing on the fly. If you're not using these features, you're missing out.

The fix: If you're using a CDN, check if it offers image optimization features. Services like Cloudflare, Fastly, and Akamai have options for this. If not, consider a dedicated image CDN like Imgix or Cloudinary, which can transform images on the fly.

7. You're Ignoring Caching Headers

Even if your images are optimized, if they're not cached, the browser has to re-download them on every visit. This can make repeat visits slower than they need to be.

The fix: Ensure your server sends proper caching headers for images. A Cache-Control header with a long max-age (e.g., max-age=31536000) for images that don't change often is ideal. Also, use a Vary: Accept header if you're serving different formats (like WebP vs JPEG) to avoid cache issues.

8. You Have Too Many Images on the Page

Sometimes the problem isn't the individual images—it's the sheer number of them. A page with 50 images, even if each is small, will still be heavy. This can hurt your LCP and overall load time.

The fix: Audit your page and remove any images that aren't essential. Consider using CSS sprites or SVG for icons. For galleries, use lazy loading and consider pagination or "load more" buttons to reduce initial load.

9. You're Not Testing on Real Devices

Your site might load fine on your high-speed office connection, but what about on a 4G connection or a mid-range Android phone? If you're not testing under real-world conditions, you might not see the actual performance issues.

The fix: Use tools like Google PageSpeed Insights or WebPageTest to test your site on simulated mobile devices and slow connections. These will show you exactly which images are slow and how to fix them.

10. You're Not Monitoring Your Core Web Vitals

Finally, if you're not tracking your Core Web Vitals, you're flying blind. LCP, INP (which replaced FID), and CLS are the metrics that matter for user experience and SEO. If your images are causing poor scores, you need to know.

The fix: Monitor your Core Web Vitals in Google Search Console. If you see issues with LCP or CLS, your images are likely a culprit. Use the diagnostics to identify which images are problematic.

Putting It All Together

Image optimization isn't a one-time task—it's an ongoing process. Start by checking the basics: format, size, and dimensions. Then move to more advanced techniques like responsive images and CDN optimization. Finally, monitor your results to ensure you're moving the needle.

If you're unsure where to start, run a free audit of your site to identify specific image-related issues. The audit will show you exactly which images are slow and what to fix.

For more in-depth guidance, check out our guides on performance and image optimization.

Remember, the goal is to deliver the best experience to your users. By addressing these hidden causes, you'll make your images—and your site—as fast as possible.

More guides · Compare audit tools · Run a free website audit