11ty / demo-eleventy-img-netlify-cache

A demo to show how to re-use Eleventy Image’s disk cache across Netlify builds.

Re-use Eleventy Image Disk Cache across Netlify Builds

• Live Demo

This repository takes all of the high resolution browser logos and processes them through Eleventy Image, writing output images directly to the Eleventy output directory at _site/img/generated/.

Customize the Cache Directory (default _site/img/generated/) in:

1. .eleventy.js (specifically the outputDir and urlPath properties)
2. netlify.toml

Benchmarks:

222 source images, outputs AVIF and PNG formats at 40px width.

Local

Cold start:

[11ty] Writing _site/index.html from ./index.liquid
[11ty] Wrote 1 file in 13.05 seconds (v1.0.0)

Warm start:

[11ty] Writing _site/index.html from ./index.liquid
[11ty] Wrote 1 file in 1.64 seconds (v1.0.0)

Netlify servers

Cold start:

[11ty] Writing _site/index.html from ./index.liquid
[11ty] Wrote 1 file in 27.59 seconds (v1.0.0)

Warm start:

[11ty] Writing _site/index.html from ./index.liquid
[11ty] Wrote 1 file in 4.01 seconds (v1.0.0)