Optimizing your website's images: a practical guide

On most websites, images account for the largest share of a page's weight, often far more than code and fonts combined. They're also the simplest lever: you can make a site noticeably lighter without touching a single line of logic, just by serving better images.

Choose the right format#

JPEG and PNG were long the only options. That's no longer the case.

• WebP is supported by every current browser. At comparable visual quality, it's usually much lighter than JPEG.
• AVIF compresses even better, especially for photos, but encoding is slower. All recent browsers support it.
• SVG remains unbeatable for logos, icons and simple illustrations: it's light and perfectly sharp at any size.

The picture element lets you offer several formats and lets the browser pick the best one it knows:

<picture>
  <source srcset="/terrace.avif" type="image/avif">
  <source srcset="/terrace.webp" type="image/webp">
  <img src="/terrace.jpg" alt="Restaurant terrace at sunset" width="1200" height="800">
</picture>

Serve the right size#

Sending a 3,000-pixel-wide image to display it in a 400-pixel thumbnail is the most common mistake. The phone downloads everything, then shrinks the image itself.

The srcset and sizes attributes describe the available versions and the space the image will take on screen. The browser does the rest:

<img
  src="/product-800.webp"
  srcset="/product-400.webp 400w, /product-800.webp 800w, /product-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 400px"
  alt="Green canvas backpack, front view"
  width="800" height="800">

Always set dimensions#

Without width and height, the browser doesn't know how much space to reserve before loading. The text appears, then jumps when the image arrives. It's one of the main causes of a poor CLS score. The dimensions are used to compute the proportions: the image can still be fluid in CSS.

Load at the right time#

The loading="lazy" attribute tells the browser to wait until the image gets close to the visible area before downloading it. On a long page, the gain is huge.

But there's one important exception: the main image at the top of the page. That one should arrive as quickly as possible, with fetchpriority="high" and no lazy loading. It often determines your LCP.

Compress without damage#

A compression quality around 75 to 80 is enough for most photos: the eye doesn't see the difference, the file size does. Also strip metadata (camera, GPS coordinates), which is useless on the web and sometimes revealing.

Check the result#

In the Network tab of the developer tools, filter on images and sort by size. The heaviest appear right away. Codanalyst does this across all your pages and indicates, for each image, the recommended format and size. Find out what your pages really weigh.