Enhancement: use eleventy-img, other image optimizations

[rejhgadellaa]

Type of Change

• Enhancement
• Content
• Improvement / Suggestion
• Bug
• Other (please clarify below)

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

• Optimize image loading
• Reduce layout shift
• Optimize image size

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]

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