https://github.com/11ty/eleventy-img

Utility to perform build-time image transformations.
https://github.com/11ty/eleventy-img

eleventy eleventy-utility

Last synced: 10 months ago
JSON representation

Utility to perform build-time image transformations.

• Host: GitHub
• URL: https://github.com/11ty/eleventy-img
• Owner: 11ty
• Created: 2020-04-18T02:38:42.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2025-04-29T17:16:11.000Z (11 months ago)
• Last Synced: 2025-05-07T06:33:40.391Z (10 months ago)
• Topics: eleventy, eleventy-utility
• Language: JavaScript
• Homepage: https://www.11ty.dev/docs/plugins/image/
• Size: 9.28 MB
• Stars: 455
• Watchers: 12
• Forks: 58
• Open Issues: 45
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - 11ty/eleventy-img - Utility to perform build-time image transformations. (others)
• awesome-list - eleventy-img - time image transformations. | 11ty | 256 | (JavaScript)

README

          


# eleventy-img

Requires Node 18+

Low level utility to perform build-time image transformations for both vector and raster images. Output multiple sizes, save multiple formats, cache remote images locally. Uses the [sharp](https://sharp.pixelplumbing.com/) image processor.

You maintain full control of your HTML. Use with `` or `` or CSS `background-image`, or others! Works great to add `width` and `height` to your images!

## [The full `eleventy-img` documentation is on 11ty.dev](https://www.11ty.dev/docs/plugins/image/).

* _This is a plugin for the [Eleventy static site generator](https://www.11ty.dev/)._

* Find more [Eleventy plugins](https://www.11ty.dev/docs/plugins/).

* Please star [Eleventy on GitHub](https://github.com/11ty/eleventy/), follow [@eleven_ty](https://twitter.com/eleven_ty) on Twitter, and support [11ty on Open Collective](https://opencollective.com/11ty)

[![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-img.svg?style=for-the-badge)](https://www.npmjs.com/package/@11ty/eleventy-img) [![GitHub issues](https://img.shields.io/github/issues/11ty/eleventy-img.svg?style=for-the-badge)](https://github.com/11ty/eleventy-img/issues)

## Installation

```

npm install --save-dev @11ty/eleventy-img

```

_[The full `eleventy-img` documentation is on 11ty.dev](https://www.11ty.dev/docs/plugins/image/)._

## Tests

```

npm run test

```

- We use the [ava JavaScript test runner](https://github.com/avajs/ava) ([Assertions documentation](https://github.com/avajs/ava/blob/master/docs/03-assertions.md))

- ℹ️ To keep tests fast, thou shalt try to avoid writing files in tests.

## Community Roadmap

- [Top Feature Requests](https://github.com/11ty/eleventy-img/issues?q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+label%3Aenhancement) (Add your own votes using the 👍 reaction)

- [Top Bugs 😱](https://github.com/11ty/eleventy-img/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Areactions-%2B1-desc) (Add your own votes using the 👍 reaction)

- [Newest Bugs 🙀](https://github.com/11ty/eleventy-img/issues?q=is%3Aopen+is%3Aissue+label%3Abug)