How do I make images load faster on my website?

<img src="hero.webp"
     alt="A calculator app in Visual Studio"
     width="1200" height="675"
     loading="lazy" decoding="async">

#Always set width and height

Without them the browser does not know how tall the image will be, so everything below it jumps down when it loads. That is Cumulative Layout Shift, and it is both a ranking signal and the reason people mis-tap buttons.

Set the intrinsic pixel dimensions; CSS can still resize it:

img { max-width: 100%; height: auto; }

#Do not lazy-load the hero

loading="lazy" on an above-the-fold image delays the thing the reader is waiting for. Lazy-load below the fold only, and mark the hero as high priority:

<img src="hero.webp" fetchpriority="high" alt="…">

#Serve the right size

<img src="card-800.webp"
     srcset="card-400.webp 400w, card-800.webp 800w, card-1600.webp 1600w"
     sizes="(min-width: 60rem) 33vw, 100vw"
     alt="…" width="800" height="450">

A phone downloading a 2000px image wastes most of the bytes. sizes tells the browser how much space the image will occupy, so it can pick before layout is done.

#Formats

• AVIF — smallest, good support.
• WebP — near-universal, much smaller than JPEG.
• JPEG — the fallback.
• SVG — anything vector: logos, icons, diagrams. Resolution independent.
• PNG — only when you need lossless or sharp-edged transparency.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" width="1200" height="675">
</picture>

#alt text

Describe what the image conveys. If it is purely decorative, use alt="" — an empty alt tells screen readers to skip it, which is correct. Omitting the attribute entirely makes them read the filename.