search

OpenWebAdvocacy / website

Source code for the Open Web Advocacy website.
https://open-web-advocacy.org/
MIT License
33 stars 24 forks source link

Enhancement: use eleventy-img, other image optimizations #36

Open rejhgadellaa opened 2 years ago

rejhgadellaa commented 2 years ago

Type of Change

Summary

While working on Walled Gardens v1.2 (#33), I noticed that we can do some improvements on the images. The page contains ~6 MB of images, many of them seem to gain from optimization. They could benefit from loading="lazy", as none of them sit ATF. We should set width and height attributes to avoid layout shift (especially if we do loading="lazy" :))

Tasks

Details

It looks like [eleventy-img] could solve both Optimize image loading and Reduce layout shift tasks, as it looks like it can add loading="lazy" and width / height attributes.

I've added a few new images for Walled Gardens 1.2, and was able to reduce the size of those pngs by up to 60~70% via squoosh.app (OxiPNG encoder, reduce palette to ~64 works for most screenshots without reducing noticeable quality to my ~40 yr old eyes - YMMV). It's a lot of manual labour, but may be worth effort, if only for some of the larger images.

Regarding Optimize image size, I've already done a quick pass in #32 , but imagemin can only do so much.

rejhgadellaa commented 2 years ago

I think manually optimizing images isn't needed anymore as eleventy-img generates new images anyway (so any image-specific optimizations would be lost, unfortunately). We could still tweak the sharp image processor settings