Global solution for responsive images, transforming simple image HTML syntax into better responsive images syntax.
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.
This Eleventy plugin allows authors to use the standard Markdown syntax for images (
) and yet get responsive images in the generated HTML, with srcset
and sizes
attributes.
eleventy-plugin-images-responsiver
is the glue between Eleventy plugin and transformations system and images-responsiver
, the generic HTML transformation npm package for simple responsive images.
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.
To install 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!
If you already know how to use the plugin and want to go directly to a section of the tutorial, here are direct links:
See also the list of contributors who participated in this project.
This project is licensed under the MIT License.