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
widthattributes in HTML so you get proper aspect-ratio on first render.
- 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 inline CSS/SVG for a blurry placeholder.
Apparently, there is but one tool that does it all: eleventy-high-performance-blog.
- If you are
lazyloading, do you really need to do the
content-visibiltything 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.
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.