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. Update: I’m told that AVIF is actually more-reliably smaller (than JPG at least) than WebP is on the whole. I still think it’s worth being careful. This makes me want to outsource format choice to cloud providers that serve in the smallest format they can produce even moreso.
- 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.