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.
<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
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.
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!
- Nicolas Hoizey: Idea and initial work, maintainer
See also the list of contributors who participated in this project.
This project is licensed under the MIT License.