How to get the best image performance (Updated 2021)

1️⃣ Use `width` and `height` to prevent layout shift
2️⃣ Lazy-load images as they enter the viewport
3️⃣ Use modern image formats (WebP, AVIF)
4️⃣ Serve correctly sized images using `srcset`
5️⃣ Provide blur-up placeholders

1️⃣ Use `width` and `height` to prevent layout shift

These image attributes tell the browser how much space to allocate for an image, preventing the page from jumping when it loads. This avoids Cumulative Layout Shift

2️⃣ Lazy-load images as they enter the viewport

The browser shouldn't load images a user can't see. To prevent page speed from being penalized, we should load images as they're scrolled into the

3️⃣ Use modern image formats (WebP, AVIF)

These new formats reduce image file size while retaining quality. WebP is supported by all modern browsers. AVIF should be soon,

4️⃣ Serve correctly sized images using `srcset`

The browser should choose the best image for the device. By providing multiple options, we avoid shipping large images to smaller