Add image processing to build

[fershad]

Currently, images added to the site are not optimised and are served in their original format. This is not great for both performance and sustainability.

Image should be:

• Converted to WEBP & AVIF formats.
• Output at different sizes to server a variety of viewports.

To-do:

• [x] Use 11ty Image plugin to process images at build time.

[michael-voit]

@fershad In my 11ty projects I use https://github.com/saneef/eleventy-plugin-img2picture with very extensive optimizations.

If you like, I can work on that and make a pull request then.

[fershad]

@michael-voit thanks! I was originally thinking about using the official 11ty image plugin but it looks like Img2Picture uses it under the hood & doesn't need a shortcode either.

Would be more than happy for you to create a PR to add it in for us.

[michael-voit]

@fershad I included and tested the img2picture plugin. If we would like to optimize the images as far as possible we would have to use at least an sizes attribute - and for that we would have to insert images with HTML. Would that be ok, than I could also do that - at least as an example at the image on https://developers.thegreenwebfoundation.org/co2js/explainer/methodologies-for-calculating-website-carbon/

Should I do that or open a pull request as it is now?

[fershad]

Go for it @michael-voit, let's optimise image sizes too. Could you please add the sizes attribute to the image on that page & then create a PR.

[michael-voit]

@fershad Here we go: #18

[fershad]

Thank you so much @michael-voit. This is now live on the website, and definitely makes a dent in the page weight where images are present.