GitHub stars

eleventy-plugin-images-responsiver is a simple solution for most responsive images needs with Eleventy. Responsive Images are difficult to implement, but they’re required to provide a good performance to Web users.

Knowing that <picture> is only required for rare advanced usages, eleventy-plugin-images-responsiver should be enough for most use cases, known as Resolution Switching. Read this article on Cloudfour’s blog to know more of the theory.

eleventy-plugin-images-responsiver is the glue between Eleventy plugin and transformations system and images-responsiver, a generic HTML transformation Node.js module for simple responsive images.

This Eleventy plugin allows authors to use the simple and standard Markdown syntax for images (![alt text](image.jpg "title text")) and yet get responsive images in the generated HTML, with srcset and sizes attributes. Eleventy uses Markdown-it to transform Markdown content into HTML, and then runs the transform added by eleventy-plugin-images-responsiver, which calls images-responsiver to actually transform the HTML.

Neither eleventy-plugin-images-responsiver nor images-responsiver transforms (resize) the image files, there are multiple ways to do so explained in the docs.

Be aware that documentation for images-responsiver contains a lot more information than this one, but is fully applicable to using eleventy-plugin-images-responsiver with Eleventy.


To install and use the plugin, install it as a dev dependency in your Eleventy project:

npm install eleventy-plugin-images-responsiver --save-dev


Instead of jumping directly into the list of features and configuration options, let us take your hand and guide you through a step by step tutorial with actual examples.

Let’s start here!


See also the list of contributors who participated in this project.


This project is licensed under the MIT License.