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

This response to my tweet is a common objection to targeted advertising.

@KevinCoates correct me if I'm wrong, but basic point seems to be that banning targeted ads will lower platform profits, but will mostly be beneficial for consumers.

Some counterpoints 👇


1) This assumes that consumers prefer contextual ads to targeted ones.

This does not seem self-evident to me


Research also finds that firms choose between ad. targeting vs. obtrusiveness 👇

If true, the right question is not whether consumers prefer contextual ads to targeted ones. But whether they prefer *more* contextual ads vs *fewer* targeted

2) True, many inframarginal platforms might simply shift to contextual ads.

But some might already be almost indifferent between direct & indirect monetization.

Hard to imagine that *none* of them will respond to reduced ad revenue with actual fees.

3) Policy debate seems to be moving from:

"Consumers are insufficiently informed to decide how they share their data."

To

"No one in their right mind would agree to highly targeted ads (e.g., those that mix data from multiple sources)."

IMO the latter statement is incorrect.

You May Also Like