eleventy-plugin-images-responsiver

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.

This Eleventy plugin allows authors to use the 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.

Learn more in the detailed documentation.

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!

If you already know how to use the plugin and want to go directly to a section of the tutorial, here are direct links:

• Step 0: Get the resources to follow this tutorial
• Step 1: Default behaviour without the plugin
• Step 2: Default behaviour with the plugin
• Step 3: Resized images
• Step 4: Images dimensions
• Step 5: Presets
• Step 6: Presets properties

Authors

• Nicolas Hoizey: Idea and initial work, maintainer

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

Alternatives

To deal with responsive images in Eleventy, there are multiple other plugins:

• eleventy-img by Zach Leatherman (@zachleat) is a low level utility to perform build-time image transformations for both vector and raster images, but it doesn't generateany markup
• eleventy-plugin-respimg by Eric Portis (@etportis) provides a shortcode for responsive images with Cloudinary
• eleventy-plugin-local-respimg by Sam Richard (@Snugug) provides an Eleventy transform for resizing and optimizing local images

License

This project is licensed under the MIT License.