Image Optimization

[kevinmichaelchen]

I'm considering how large images might impact Lighthouse scores and Core Web Vitals.

What are current recommended best practices for dealing with images?

The main feature I'm wondering about is serving the properly sized image for each device, but blur-up placeholders would also be useful.

Inspiration:

• for AstroJS
• for NextJS

[sebilasse]

I am handling this always native as 1 route to a mediaproxy with cache and 1 middleware for querying per device size.
The mediaproxy I “am” working on is maybe not properly documented cause it was in the time when I switched node to deno.
It is https://github.com/redaktor/mediaproxy and basically uses https://sharp.pixelplumbing.com for e.g. resizing
A short example together with the API for above is in https://gist.github.com/sebilasse/8ae16c68341d994a8094274ef4b95945 (forgive me) … I need to bring this to deno shortly and a fresh middleware would be superfun.

For blur-up consider https://blurha.sh

[ccssmnn]

When your images are static assets, consider using squoosh. They also have a quite nice CLI. When your receiving your images from a CMS try to modify your CMS to serve images in different sizes / formats and use the srcset property or the picture element to serve the best image for the browser. Also, you can set loading=lazy on the <img>, to only load the image when it is visible (docs).