Optimizing Images with Eleventy on Netlify

I have been very laissez-faire with image optimization on this website over the years. I assume I used to manually run them through TinyPNG or something back in the days. I generally use very few images, partly because they are often unnecessary for the kind of technical piece I write. The other day, I redesigned my project portfolio and my speaker page to be more inviting and visual, and with that I had to look into image optimization again. This short article sums up what I’ve done. Eleventy comes in strong I’m not sure when Eleventy started offering a whole image pipeline. I don’t remember this being a thing when I moved over from Jekyll in 2020, but I could be wrong. In any case, this does so much of the heavy lifting. Here goes: eleventyConfig.addPlugin(eleventyImageTransformPlugin, { formats: ['avif', 'webp'], widths: [640, 960, 1280, 1600], htmlOptions: { imgAttributes: { loading: 'lazy', decoding: 'async', sizes: '(max-width: 48rem) calc(100vw - 2em), 80ch', },…