One weird trick to reduce @11ty.dev Image Build Times by 60%
Zach Leatherman 1212 replies 5050 likes1515 reposts11 quote Original on MastodonOriginal on BlueskyAlso posted to Mastodon.
12 replies
@zachleat I've started using Eleventy Image for the first time today, for the photos on my new Eleventy site, for example on https://activites.nicolas-hoizey.com/activites/2025/07/28/dijon-tournus-jour-4/
And my own weird trick to reduce build times by 99 % is to use `urlFormat` (only for production builds) so images are resized and optimized by Cloudinary… 😅
As this is my first time, I didn't find if there's a way to define settings per template, of even better a HTML container, instead of attribute overrides on each image. 🤔
@nhoizey the transform method does use attributes, yeah. If you’re wanting programmatic access to each image transformation, the transform method is likely not for you. (use the shortcode method instead?) I’d subscribe to something like https://github.com/11ty/eleventy-img/issues/248 for future work there
@zachleat I can use the shortcode in Nunjucks templates indeed. I want to keep using standard Markdown in content files, though, so the transform method is great anyway. I'll use attribute overrides when necessary.
I also commented the issue, with an additional solution to the one suggested by @TheRealNooshu, which is also interesting.
(now with fixed OG image, thank you @cassidoo.co 😅)
Ah, I thought it cached to .cache automatically, and couldn’t work out why Cloudflare Pages never used the cache on the next build…
Thanks for the tip - I’ll give it a go!
we should do that but don’t currently! we’ll probably tackle that soon!
Your code example is missing “import path …”
ah, thank you! fix is building
@zachleat this uhhh, feels a lot easier than my "move the entire build from Cloudflare to GitHub Actions" approach 😅
@aaadaaam oh no!! 😭