Published in Technology on A Place For My Head. Tagged , , , , , , & . #31 in the Colophon: Finding A Place For My Head series.

I’d been using Netlify Large Media for on-the-fly image resizing for a while with no complaints. However, I always had the limits for free transformations in the back of my mind. I knew it wasn’t a permanent solution, and now also wanted more fine-grained control over images (prompted by some CSS changes). I decided to use the eleventy-img plugin based on a good experience with it last year.

I got the impression that I couldn’t use the eleventy-img shortcodes because of my customized markup and Pug templates, so I switched my existing HTML generation mechanism to use metadata from the plugin. (Although, looking at it now, I don’t remember what kept me from using generateHTML.) Fortunately, remark supports asynchronous plugins. Everything works as well as before or better: compatible browsers will now display the more efficient AVIF or WebP formats. (Never mind the historical data I accidentally lost in the process.) I just have to be careful not to terminate the dev server while images are being generated, as that produces garbled files and cleaning them up manually is tedious.

Next in series: (#32 in Colophon: Finding A Place For My Head)