Transform method option to put generated image disk cache in .cache folder

[zachleat]

This works today to store output images into .cache/ and then copy those assets to the output folder post-build:

import fs from "node:fs";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default async function(eleventyConfig) {
	// Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		outputDir: ".cache/@11ty/img/",
		urlPath: "/img/built/",
	});

	eleventyConfig.on("eleventy.after", () => {
		fs.cpSync(".cache/@11ty/img/", "_site/img/built/", { recursive: true });
	});
}

Marginally related to 11ty/eleventy#3573

This is useful as some build servers persist .cache folder for you for free: https://www.11ty.dev/docs/deployment/#persisting-cache

[zachleat]

Here’s an example of the above only using .cache for full builds (not on serve/watch)

import fs from "node:fs";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default async function(eleventyConfig) {
	// Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
	let imageOptions = {};

	if(process.env.ELEVENTY_RUN_MODE === "build") {
		imageOptions.outputDir = ".cache/@11ty/img/";
		imageOptions.urlPath = "/img/built/";

		eleventyConfig.on("eleventy.after", () => {
			fs.cpSync(".cache/@11ty/img/", "_site/img/built/", { recursive: true });
		});
	}

	eleventyConfig.addPlugin(eleventyImageTransformPlugin, imageOptions);
}

[murtuzaalisurti]

@zachleat not sure if it's related to this, but started seeing this recently, looks like a eleventy-fetch err?

Log File

[13:23:41.513] Cloning github.com/murtuzaalisurti/syntackle (Branch: main, Commit: 4baf956)
[13:23:42.126] Cloning completed: 612.000ms
[13:23:43.451] Restored build cache from previous deployment (33QeRcxc1Qx7Cxesh1Ku2bxdvsZd)
[13:23:43.596] Running build in Washington, D.C., USA (East) – iad1
[13:23:44.307] Running "vercel build"
[13:23:44.815] Vercel CLI 41.3.2
[13:23:45.962] Warning: Detected "engines": { "node": ">=22.12.0" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
[13:23:45.982] Installing dependencies...
[13:23:48.551] 
[13:23:48.552] > blog@1.0.0 prepare
[13:23:48.553] > is-ci || husky
[13:23:48.553] 
[13:23:48.611] 
[13:23:48.612] up to date in 2s
[13:23:48.612] 
[13:23:48.613] 264 packages are looking for funding
[13:23:48.613]   run `npm fund` for details
[13:23:48.687] Running "npm run build"
[13:23:48.844] 
[13:23:48.846] > blog@1.0.0 build
[13:23:48.847] > npm-run-all -s clean build11ty
[13:23:48.847] 
[13:23:49.217] 
[13:23:49.218] > blog@1.0.0 clean
[13:23:49.218] > npx del-cli -v ./public
[13:23:49.218] 
[13:23:50.073] 
[13:23:50.074] > blog@1.0.0 build11ty
[13:23:50.074] > npx @11ty/eleventy
[13:23:50.075] 
[13:24:00.210] Node version: v22.14.0
[13:24:08.991] [11ty] Writing ./public/ads.txt from ./src/ads.njk
[13:24:08.992] [11ty] Writing ./public/feed.xml from ./src/feed.njk
[13:24:08.996] [11ty] Writing ./public/robots.txt from ./src/robots.njk
[13:24:08.997] [11ty] Writing ./public/sitemap.xml from ./src/sitemap.njk
[13:24:09.316] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/c_scale,f_auto,q_auto:eco,w_491/v1692546106/Syntackle/Authors/murtuzaali_surti.png (transform)
[13:24:09.325] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/c_scale,f_auto,q_auto:eco,w_491/v1692546106/Syntackle/Authors/murtuzaali_surti.png (transform)
[13:24:09.390] [11ty] Writing ./public/404.html from ./src/404.njk
[13:24:09.393] [11ty] Writing ./public/contact/index.html from ./src/contact.njk
[13:24:09.399] [11ty] Writing ./public/category/vscode/index.html from ./src/category/categories.njk
[13:24:09.405] [11ty] Writing ./public/index.html from ./src/index.njk
[13:24:09.408] [11ty] Writing ./public/write/index.html from ./src/write/index.njk
[13:24:09.436] [11ty] Writing ./public/archive/index.html from ./src/archive.njk
[13:24:09.444] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcsqe8glunjdoku947eo.jpg (transform)
[13:24:09.448] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3wnw8ktjwqc5kbmnugs.jpg (transform)
[13:24:09.451] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fr0q3fk1fpzi9h5ez2s.jpg (transform)
[13:24:09.453] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn2wrul3oykol7nf7fcw.jpg (transform)
[13:24:09.456] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr00wz0j8fm0j0wyfqco.jpg (transform)
[13:24:09.508] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/f_auto,q_auto:eco/v1680798425/Syntackle/Posts/builder-io-s-partytown-with-11ty-lN6X2w.jpg (transform)
[13:24:11.857] [11ty] Writing ./public/blog/eleventy-image-html-transform-plugin-disk-cache/index.html from ./src/blog/eleventy-image-html-transform-plugin-disk-cache.md (liquid)
[13:24:11.877] [11ty] Writing ./public/blog/deepseek-ai-model-and-openrouter/index.html from ./src/blog/deepseek-ai-model-and-openrouter.md (liquid)
[13:24:11.882] [11ty] Writing ./public/blog/containerizing-a-nextjs-application-using-docker-st_G0u/index.html from ./src/blog/containerizing-a-nextjs-application-using-docker-st_G0u.md (liquid)
[13:24:11.884] [11ty] Writing ./public/blog/dark-mode-toggle-animation-using-css-wWkNc1nowuQVdhhYjVOC/index.html from ./src/blog/dark-mode-toggle-animation-using-css-wWkNc1nowuQVdhhYjVOC.md (liquid)
[13:24:11.891] [11ty] Writing ./public/blog/using-fontsource-with-11ty-FUzgft/index.html from ./src/blog/using-fontsource-with-11ty-FUzgft.md (liquid)
[13:24:11.895] [11ty] Writing ./public/blog/form-handling-in-react-19/index.html from ./src/blog/form-handling-in-react-19.md (liquid)
[13:24:11.899] [11ty] Writing ./public/blog/this-keyword-in-arrow-functions-javascript/index.html from ./src/blog/this-keyword-in-arrow-functions-javascript.md (liquid)
[13:24:11.908] [11ty] Writing ./public/blog/how-to-create-google-s-material-design-text-input-field-using-css-and-javascript-b0WGutb2uKPHdeSFNq2X/index.html from ./src/blog/how-to-create-google-s-material-design-text-input-field-using-css-and-javascript-b0WGutb2uKPHdeSFNq2X.md (liquid)
[13:24:11.923] [11ty] Writing ./public/blog/back-to-top-web-component/index.html from ./src/blog/back-to-top-web-component.md (liquid)
[13:24:11.927] [11ty] Writing ./public/blog/advent-of-code-2023-day-four-solution-4SanE/index.html from ./src/blog/advent-of-code-2023-day-four-solution-4SanE.md (liquid)
[13:24:11.929] [11ty] Writing ./public/blog/advent-of-code-2023-day-two-E7Ndz/index.html from ./src/blog/advent-of-code-2023-day-two-E7Ndz.md (liquid)
[13:24:11.930] [11ty] Writing ./public/blog/elegant-console-logs-p0JYCE/index.html from ./src/blog/elegant-console-logs-p0JYCE.md (liquid)
[13:24:11.941] [11ty] Writing ./public/blog/web-components-and-custom-elements-5LuzI/index.html from ./src/blog/web-components-and-custom-elements-5LuzI.md (liquid)
[13:24:11.943] [11ty] Writing ./public/blog/pagefind-search-in-astro-site/index.html from ./src/blog/pagefind-search-in-astro-site.md (liquid)
[13:24:11.955] [11ty] Writing ./public/blog/ai-powered-code-review-tool-better/index.html from ./src/blog/ai-powered-code-review-tool-better.md (liquid)
[13:24:11.963] [11ty] Writing ./public/blog/server-sent-events/index.html from ./src/blog/server-sent-events.md (liquid)
[13:24:11.976] [11ty] Writing ./public/blog/completed-advent-of-code-day-1-CPjek/index.html from ./src/blog/completed-advent-of-code-day-1-CPjek.md (liquid)
[13:24:11.980] [11ty] Writing ./public/blog/how-to-make-a-qr-code-generator-using-javascript-5-rbxEeFYAidZ_zVp2Lh/index.html from ./src/blog/how-to-make-a-qr-code-generator-using-javascript-5-rbxEeFYAidZ_zVp2Lh.md (liquid)
[13:24:12.457] [11ty] Writing ./public/category/typescript/index.html from ./src/category/categories.njk
[13:24:12.467] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1740934340/Syntackle/Posts/Screenshot_2025-03-02_at_10.20.24_PM_oenwry.png (transform)
[13:24:12.474] [11ty] Writing ./public/authors/index.html from ./src/authors/index.njk
[13:24:12.476] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1740973993/Syntackle/Posts/Screenshot_2025-03-03_at_9.22.48_AM_kq14qr.png (transform)
[13:24:12.497] [11ty] Writing ./public/author/murtuzaalisurti/index.html from ./src/author/murtuzaalisurti.njk
[13:24:12.498] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1740971632/Syntackle/Posts/Screenshot_2025-03-03_at_8.42.58_AM_u2r851.png (transform)
[13:24:12.502] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/q_auto:eco/v1739618490/Syntackle/Posts/Screenshot_2025-02-15_at_4.50.20_PM_q2wp5l.png (transform)
[13:24:12.505] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/q_auto:eco/v1739689443/Syntackle/Posts/Screenshot_2025-02-16_at_12.33.11_PM_nepsao.png (transform)
[13:24:12.554] [11ty] Writing ./public/blog/builder-io-s-partytown-with-11ty-lN6X2w/index.html from ./src/blog/builder-io-s-partytown-with-11ty-lN6X2w.md (liquid)
[13:24:12.564] [11ty/eleventy-img] Processing https://i.imgur.com/5f7byCG.jpg (transform)
[13:24:12.568] [11ty/eleventy-img] Processing https://i.imgur.com/heodEQG.jpg (transform)
[13:24:12.570] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4gklfzuooiohhgkaexk.png (transform)
[13:24:12.598] [11ty] Writing ./public/blog/5-vscode-extensions-you-must-use-JTRFImxbBtrq6btizBCJ/index.html from ./src/blog/5-vscode-extensions-you-must-use-JTRFImxbBtrq6btizBCJ.md (liquid)
[13:24:12.601] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r3um4t3cdzle5esi3sg.png (transform)
[13:24:12.604] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c8qilqsqbzzhb45ish1.png (transform)
[13:24:12.606] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u01jbnqch3x47e2dknjl.jpg (transform)
[13:24:12.632] [11ty] Writing ./public/blog/claude-3-7-sonnet-openai-gpt-4-5-majorana-1/index.html from ./src/blog/claude-3-7-sonnet-openai-gpt-4-5-majorana-1.md (liquid)
[13:24:12.633] [11ty/eleventy-img] Processing https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewjgd4wau9sythc3syem.jpg (transform)
[13:24:12.636] [11ty/eleventy-img] Processing https://i.imgur.com/zqT1Mgt.jpg (transform)
[13:24:12.695] [11ty] Writing ./public/blog/create-react-app-deprecated/index.html from ./src/blog/create-react-app-deprecated.md (liquid)
[13:24:12.696] [11ty/eleventy-img] Processing https://i.imgur.com/8MGt3fH.jpg (transform)
[13:24:12.699] [11ty/eleventy-img] Processing https://i.imgur.com/8WwxhDO.jpg (transform)
[13:24:12.742] [11ty] Writing ./public/blog/deploying-react-app-to-netlify-XZ_dWXAd/index.html from ./src/blog/deploying-react-app-to-netlify-XZ_dWXAd.md (liquid)
[13:24:12.743] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/q_auto:eco/v1740297196/Syntackle/Posts/Screenshot_2025-02-23_at_1.22.11_PM_n2xden.png (transform)
[13:24:13.022] [11ty] Problem writing Eleventy templates:
[13:24:13.023] [11ty] 1. Having trouble writing to "./public/blog/vscode-extensions-2025/index.html" from "./src/blog/vscode-extensions-2025.md" (via EleventyTemplateError)
[13:24:13.023] [11ty] 2. Transform `@11ty/eleventy/html-transformer` encountered an error when transforming ./src/blog/vscode-extensions-2025.md. (via EleventyTransformError)
[13:24:13.024] [11ty] 3. ENOENT: no such file or directory, open '/vercel/path0/.cache/eleventy-fetch-fbe00b3353051d063b093fb7cd28fe.buffer'
[13:24:13.027] [11ty] 
[13:24:13.027] [11ty] Original error stack trace: Error: ENOENT: no such file or directory, open '/vercel/path0/.cache/eleventy-fetch-fbe00b3353051d063b093fb7cd28fe.buffer'
[13:24:13.028] [11ty]     at Object.openSync (node:fs:562:18)
[13:24:13.028] [11ty]     at Object.readFileSync (node:fs:446:35)
[13:24:13.028] [11ty]     at #getCachedContents (/vercel/path0/node_modules/@11ty/eleventy-fetch/src/AssetCache.js:285:13)
[13:24:13.029] [11ty]     at RemoteAssetCache.getCachedContents (/vercel/path0/node_modules/@11ty/eleventy-fetch/src/AssetCache.js:290:53)
[13:24:13.029] [11ty]     at RemoteAssetCache.getCachedValue (/vercel/path0/node_modules/@11ty/eleventy-fetch/src/AssetCache.js:325:15)
[13:24:13.029] [11ty]     at #fetch (/vercel/path0/node_modules/@11ty/eleventy-fetch/src/RemoteAssetCache.js:143:17)
[13:24:13.030] [11ty]     at RemoteAssetCache.fetch (/vercel/path0/node_modules/@11ty/eleventy-fetch/src/RemoteAssetCache.js:217:36)
[13:24:13.030] [11ty]     at /vercel/path0/node_modules/@11ty/eleventy-fetch/src/RemoteAssetCache.js:121:51
[13:24:13.030] [11ty]     at run (/vercel/path0/node_modules/p-queue/dist/index.js:157:104)
[13:24:13.030] [11ty]     at PQueue._tryToStartAnother (/vercel/path0/node_modules/p-queue/dist/index.js:105:17)
[13:24:13.031] [11ty] Benchmark   1919ms   9%   135× (Configuration) "minify-html" Transform
[13:24:13.034] [11ty] Copied 127 Wrote 120 files in 21.16 seconds (176.3ms each, v3.0.0)
[13:24:13.034] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1737798249/Syntackle/Posts/Screenshot_2025-01-25_at_3.13.48_PM_z9lwgp.png (transform)
[13:24:13.071] [11ty] Writing ./public/blog/mac-setup-for-developers/index.html from ./src/blog/mac-setup-for-developers.md (liquid)
[13:24:13.073] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1737823645/Syntackle/Posts/Screenshot_2025-01-25_at_10.16.16_PM_rulchq.png (transform)
[13:24:13.076] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1737824615/Syntackle/Posts/Screenshot_2025-01-25_at_10.32.21_PM_rgjjsv.png (transform)
[13:24:13.079] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1737825374/Syntackle/Posts/Screenshot_2025-01-25_at_10.45.56_PM_gpfjkt.png (transform)
[13:24:13.092] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1737826785/Syntackle/Posts/Screenshot_2025-01-25_at_11.09.29_PM_tdhnwd.png (transform)
[13:24:13.186] [11ty] Writing ./public/blog/skeleton-loading-for-social-media-embeds-using-css-and-javascript-SrqqO--X_JMn2wVKyzAroLOs03/index.html from ./src/blog/skeleton-loading-for-social-media-embeds-using-css-and-javascript-SrqqO--X_JMn2wVKyzAroLOs03.md (liquid)
[13:24:13.187] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/v1737827476/Syntackle/Posts/Screenshot_2025-01-25_at_11.20.49_PM_xunbfr.png (transform)
[13:24:13.211] [11ty] Writing ./public/blog/typescript-go-port/index.html from ./src/blog/typescript-go-port.md (liquid)
[13:24:13.212] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/f_jpg,q_auto:eco/v1687454824/Syntackle/Posts/short_polling_yp1tbn.jpg (transform)
[13:24:13.214] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/f_jpg,q_auto:eco/v1687455585/Syntackle/Posts/long_polling_m64bi7.jpg (transform)
[13:24:13.215] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/f_jpg,q_auto:eco/v1687457196/Syntackle/Posts/websocket_illustration_kxu8gq.jpg (transform)
[13:24:13.217] [11ty/eleventy-img] Processing https://res.cloudinary.com/dfue3cfts/image/upload/f_jpg,q_auto:eco/v1719944888/Syntackle/Posts/chromeAI_abgj17.jpg (transform)
[13:24:13.284] [11ty] Writing ./public/blog/websockets-101-JiIrdn/index.html from ./src/blog/websockets-101-JiIrdn.md (liquid)
[13:24:13.329] [11ty] Writing ./public/blog/window-ai-in-chrome/index.html from ./src/blog/window-ai-in-chrome.md (liquid)
[13:24:13.410] ERROR: "build11ty" exited with 1.
[13:24:13.427] Error: Command "npm run build" exited with 1
[13:24:13.980] 

I think vercel is removing those files from cache but not sure why

[zachleat]

@murtuzaalisurti I don’t think Vercel guarantees the existence of those files, maybe try the impending Fetch beta to fix that: 11ty/eleventy-fetch#59

https://github.com/11ty/eleventy-fetch/releases/tag/v5.1.0-beta.1

[styfle]

You could try to configure the cache directory to use .vercel/cache/11ty instead.

[murtuzaalisurti]

@zachleat switched to eleventy-fetch 5.1.0.beta.2 ❤

[murtuzaalisurti]

@styfle https://vercel.com/docs/deployments/troubleshoot-a-build#managing-build-cache:~:text=It%20is%20not%20possible%20to%20manually%20configure%20which%20files%20are%20cached%20at%20this%20time.

[styfle]

@murtuzaalisurti See this cachePattern here https://github.com/vercel/vercel/blob/fe6c09813a2f59b68e496172aa65462a46c12469/packages/frameworks/src/frameworks.ts#L415

[murtuzaalisurti]

@murtuzaalisurti See this cachePattern here https://github.com/vercel/vercel/blob/fe6c09813a2f59b68e496172aa65462a46c12469/packages/frameworks/src/frameworks.ts#L415

yep, but still it doesn't guarantee it won't nuke the .cache folder

[styfle]

Correct. Cache is ephemeral. It could expire or it could be ignored because of a change to Node.js version or many other reasons.

That said it is either all or nothing so if something is referencing .cache and failing, then that means there might be something cached outside of the .cache directory 🤔

[murtuzaalisurti]

@styfle well, in my case, they were random files within the same directory (not outside of .cache).

[zachleat]

I wrote up this approach on https://www.zachleat.com/web/faster-builds-with-eleventy-img/