This content originally appeared on CSS-Tricks and was authored by Chris Coyier
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
heightandwidthattributes 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
lazyloading, do you really need to do thecontent-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.
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.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-02-16T21:16:54+00:00) Maximally optimizing image loading for the web in 2021. Retrieved from https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.