Eleventy Image

Eleventy Image (@11ty/eleventy-img) is a build-time image transformation utility for the Eleventy static site generator, powered by the sharp image processor, that resizes, reformats, and caches images directly in your build pipeline.

What is Eleventy Image?

Eleventy Image is a low-level utility plugin for Eleventy, a static site generator. It takes local or remote image files as input and produces resized, reformatted outputs (such as WebP, AVIF, JPEG, and PNG) at build time, writing them to your output directory. It requires Node 22 or later and is developed and maintained by the Eleventy team.

Key Features

• Multiple output sizes — Define a list of widths, and the utility generates each size automatically, giving you full control over responsive behavior.
• Multiple formats — Save formats including WebP, AVIF, JPEG, and PNG by leveraging sharp's encoding capabilities.
• Remote image caching — Fetch remote images once at build time and store them locally, so they are not re-downloaded on every build.
• HTML attribute generation — Output width and height attributes to prevent layout shift, while keeping full control of the HTML markup in your templates.
• Works with any HTML — Use the generated images in <picture>, <img>, or CSS background-image without being locked into a specific markup pattern.
• Node 22+ required — The utility explicitly requires Node 22 or newer, ensuring access to modern JavaScript features.

Who is it for?

• Eleventy site owners — Developers building static sites with Eleventy who need optimized, responsive images with minimal manual work.
• Performance-minded frontend developers — Teams that want automatic image resizing and format conversion as part of their build process to improve page speed.
• Content-driven blogs — Bloggers using Eleventy who embed pictures and want them transformed efficiently without writing custom image processing code.

What can you do with Eleventy Image?

• Responsive images for articles — Generate multiple width variants of a photo and let the browser pick the best fit using srcset and the sizes attribute.
• Automatic format negotiation — Output modern formats like WebP and AVIF alongside fallbacks, so each visitor gets the smallest file their browser supports.
• Local caching of remote images — Point to images hosted on a CDN or remote URL, and the utility downloads them once and stores them in your build directory, making subsequent builds faster and offline-friendly.

How does Eleventy Image work?

Install it with npm using npm install --save-dev @11ty/eleventy-img. Then, in your Eleventy configuration, you add the utility as a plugin and call it from your template code (such as Nunjucks or JavaScript). During each build, it processes the images, writes the transformed files to your output folder, and returns metadata you can use to construct your HTML.

FAQ

Is Eleventy Image free?

Yes. It is an open-source npm package published by the 11ty organization on GitHub, so you can use it without cost and even contribute to its development.

What does @11ty/eleventy-img output?

It outputs resized and reformatted image files to your Eleventy output directory, and it can also return metadata like width, height, and source paths that you use in your templates.

What image formats are supported?

It uses sharp, which supports encoding to WebP, AVIF, JPEG, and PNG, among others. You can specify which formats you want generated for each image.

Does it work with remote images?

Yes, it can cache remote images locally. When you pass a URL, it downloads the image once at build time and stores it in your build folder, avoiding repeated downloads on future builds.

Why does it require Node 22?

The README states Node 22 or later is required. This allows the utility to use modern JavaScript features and keeps the dependency tree lean.