Malte Ubl’s list for:
8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
- Fluid width images in CSS, not forgetting the
height
andwidth
attributes in HTML so you get proper aspect-ratio on first render. - Use
content-visibility: auto;
- Send AVIF when you can.
- Use responsive images syntax.
- Set far-out expires headers on images and have a cache-busting strategy (like changing the file name).
- Use
loading="lazy"
- Use
decoding="async"
- Use inline CSS/SVG for a blurry placeholder.
Apparently, there is but one tool that does it all: eleventy-high-performance-blog.
My thoughts:
- If you are
lazy
loading, do you really need to do thecontent-visibilty
thing also? They seem very related. - Serving AVIF is usually good, but it seems less cut-and-dry than WebP was. You need to make sure your AVIF version is both better and smaller, which feels like a manual process right now.
- The decoding thing seems weird. I’ll totally use it if it’s a free perf win, but if it’s always a good idea, shouldn’t the browser just always do it?
- I’m not super convinced blurry placeholders are in the same category of necessary as the rest of this stuff. Feels like a trend.
Direct Link to Article — Permalink
The post Maximally optimizing image loading for the web in 2021 appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.