eleventy-plugin-images-responsiver

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.

Installation

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

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

Usage

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!

Authors

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

License

This project is licensed under the MIT License.