Eleventy Img

screenshot of Eleventy Img

Eleventy Img

Utility to perform build-time image transformations.


eleventy-img is a low-level utility that allows users to perform build-time image transformations for both vector and raster images. It supports outputting images in multiple sizes and formats, caching remote images locally, and provides full control over the HTML output. The utility can be used with various HTML elements such as <picture>, <img>, or CSS background-image, making it versatile for different use cases.


  • Build-time image transformations: eleventy-img allows users to perform image transformations during the build process, ensuring efficiency and optimized performance.
  • Output multiple sizes: The utility enables users to generate images in multiple sizes, providing flexibility in displaying images across different devices and screen resolutions.
  • Save multiple formats: Users can save images in different formats, such as JPEG, PNG, or SVG, based on their requirements.
  • Cache remote images locally: eleventy-img provides the capability to cache remote images locally, reducing the reliance on external servers and improving load times.
  • Full control over HTML: Users have complete control over the HTML output, allowing them to use eleventy-img with different HTML elements or CSS properties to suit their needs.
  • Width and height attributes: The utility is useful for adding width and height attributes to images, aiding with responsive design and accessibility.


To install eleventy-img, follow these steps:

  1. Ensure you have Node 14.15+ installed on your system.
  2. Open your command line interface and navigate to your project directory.
  3. Run the following command to install eleventy-img:
npm install --save eleventy-img
  1. Once the installation is complete, you can import and use eleventy-img in your project.

For more detailed instructions and advanced usage, refer to the full eleventy-img documentation on 11ty.dev.


eleventy-img is a powerful utility for performing build-time image transformations in static site generation. It offers features such as multiple size and format output, local caching of remote images, and the ability to control the HTML output. With its versatility and ease of use, eleventy-img is a valuable tool for optimizing images and improving the performance of static websites.


11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.


ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.