Farewell Netlify Large Media, Welcome eleventy-img
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: Perfectly Aligned Image Captions with CSS Grid &
subgrid(#32 in Colophon: Finding A Place For My Head)