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 (CLS).

https://t.co/KUyqGsxOoN
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 viewport.

https://t.co/rpjyg0YXsU
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, too.

https://t.co/TiNwEwGQNc
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 viewports.

https://t.co/7FaQ8s72sp
5️⃣ Provide blur-up placeholders

Improve the user experience of loading large images by showing a blurred placeholder while loading. This prevents an extra network request to fetch a thumbnail image, too.

This also improves Largest Contentful Paint.

https://t.co/g3NDzUH1ue
The first four optimizations above are handled automatically with `next/image`. Blur-up placeholders coming soon.

https://t.co/BCfEj1mKeI
Some other frameworks/providers with optimized images:

@eleven_ty: https://t.co/0X5OPDU1Fk
@gatsbyjs: https://t.co/YRfCxRDvZ5
@sanity_io: https://t.co/un7ZpdbZai
@datocms : https://t.co/tx2qy4Kbub

Let me know others I'm missing!
If you found this helpful, you might also enjoy optimizing your web fonts.

https://t.co/TNAXslHQjd

More from For later read

You May Also Like