Optimizing Images for Web Performance

Todd GardnerFebruary 10, 2025About 4 min

Optimizing Images for Web Performance 관련

There is some low-hanging web performance fruit with images. Serving them in the right format, from a CDN, with the right HTML can be a big perf win.

Images make websites look great, but they’realso the biggest performance bottleneck. They addhuge file sizes, delayLargest Contentful Paint (LCP), and can even mess withCumulative Layout Shift (CLS)if they aren’t handled properly. And while developers are quick to optimize JavaScript and CSS, images areoften ignored—despite being theheaviestassets on most pages.

So, how do we make imagesfast, responsive, and efficient? Here’s how:

Choose the Right Image Format

Theformatof an image has a massive impact on its size and loading speed. Picking the wrong one can easilydouble or tripleyour image payload. Check out this illustration:

To the user, it’s the exact same image, but the browser has to download 2x-10x more data depending on the format you pick.

Have a look at this photograph:

Photographs are quite a bit more complex than illustrations (usually), and the best formats can change. Notice how JPG is smaller than PNG this time, but modern formats like WebP and AVIF are still way smaller.

JPG: Best for photos with lots of colors and gradients. Useslossy compressionto keep file sizes small.
PNG: Best for graphics, logos, and transparency. Useslossless compression, but files can behuge.
WebP: A modern format that’s oftensmallerthan JPG and PNG while keeping quality high.
AVIF: Even better compression than WebP, butnot universally supportedyet.

Agood rule of thumb:JPG for photos, PNG for graphics, and useWebP or AVIF where possiblefor modern browsers.

Use Responsive Images

Not all users have the same screen size, so why serve the samemassiveimage to everyone? Responsive images let youdeliver the right image sizebased on the user’s device, reducing unnecessary downloads and improving load times.

Instead of a single<img>tag, try using a<picture>with the**srcsetandsizesattributes**to tell the browser which image to load:

See the Pen Responsive Images by toddhgardner on CodePen.

In this example, any screen less than 1400px wide will use an image from the srcset that is at least 100% of the viewport’s width. So if the screen is 1100px wide, the browser will select and download the hero-desktop-1024 version. This automatically scales images to match different devices, saving bandwidth and improving loading speed for smaller screens.

Lazy-Load Below the Fold

One of the worst offenders for slow performance? Loading every image on the page at once—even ones that aren’t visible. This is where lazy-loading comes in. Adding loading="lazy" to an <img> prevents it from downloading until it’s about to be seen.

<img 
  src="downpage-callout.jpg"
  loading="lazy"
  height="300"
  width="300"
>

It’s very important to specify theheightandwidthattributes of images, especially if they are going to be lazy-loaded. Setting these dimensions let’s the browser reserve space in your layout and preventlayout shiftswhen the content loads. For more about layout shifts and how to prevent them, check out thisdeep dive on Cumulative Layout Shift.

For images that arecritical for rendering, like yourLCP element, you shouldoverride lazy-loadingwithfetchpriority="high". This tells the browser toload it ASAP.

<img
  src="downpage-callout.jpg"
  fetchpriority="high"
  height="300"
  width="300"
>

Serve Images from a CDN

A**Content Delivery Network (CDN)**stores images in multiple locations worldwide, so they load from the nearest server instead of your origin. This speeds up delivery and reduces bandwidth costs.

CDNs use modern HTTP Protocols

Most CDNs will also speed up your images by serving them with modern protocols like HTTP/3, which has significant performance improvements over both HTTP/1 and HTTP/2. Check out thiscase study on HTTP/3 performance.

HTTP Caching headers

Users always have to download an image at least once, but HTTP caching headers can help repeat visitors load them much faster. HTTP Caching headers instruct the browser to hold onto the image and use it again, rather than asking for it from the CDN again on the next visit. Here’s an example:

Cache-Control: public, max-age=31536000, immutable

This tells the browser that this image won’t change, and that it can be kept locally for 1 year without needing to be requested again. Caching isn’t just for images—it speeds upall static assets. If you’re not sure if your caching is set up correctly, there’s a**full guide on HTTP caching**that explains how to check and optimize it.

Wrapping Up

Images are one of the biggest opportunities for improving performance. Bychoosing the right format, compressing efficiently, lazy-loading, and leveraging CDNs with modern protocols, you can massively speed up your site.

If you’re looking for more image optimization tips, with detailed breakdown and real-world examples, check outthe complete guide to optimizing website images.

Optimizing Images for Web Performance

There is some low-hanging web performance fruit with images. Serving them in the right format, from a CDN, with the right HTML can be a big perf win.