| 1 | # images-responsiver
|
| 2 |
|
| 3 | [](https://travis-ci.org/nhoizey/images-responsiver)
|
| 4 | [](https://github.com/nhoizey/images-responsiver/stargazers)
|
| 5 |
|
| 6 | **`images-responsiver` is a simple solution for most responsive images needs**.
|
| 7 |
|
| 8 | Responsive Images are difficult to implement, but they're **required to provide a good performance to Web users**.
|
| 9 |
|
| 10 | `images-responsiver` transforms simple `<img src="…">` HTML tags into better responsive images syntax with `srcset` and `sizes` attributes.
|
| 11 |
|
| 12 | Knowing that [`<picture>` is only required for rare advanced usages](https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/), **`images-responsiver` should be enough for most use cases**.
|
| 13 |
|
| 14 | `images-responsiver` is also available as a plugin for [Eleventy](https://www.11ty.dev/), a great Static Site Generator: [eleventy-plugin-images-responsiver](https://github.com/nhoizey/eleventy-plugin-images-responsiver). It allows authors to use the simple and standard Markdown syntax for images (``) and yet get responsive images in the generated HTML, with `srcset` and `sizes` attributes.
|
| 15 |
|
| 16 | ## Documentation
|
| 17 |
|
| 18 | - [Installation](https://nhoizey.github.io/images-responsiver/installation.html)
|
| 19 | - Tutorial
|
| 20 | - [Step 1: Default behavior without `images-responsiver`](https://nhoizey.github.io/images-responsiver/tutorial-01-without-images-responsiver.html)
|
| 21 | - [Step 2: Better behavior with `images-responsiver` and default configuration](https://nhoizey.github.io/images-responsiver/tutorial-02-images-responsiver-default.html)
|
| 22 | - [Step 3: Enhanced behavior with some configuration](https://nhoizey.github.io/images-responsiver/tutorial-03-images-responsiver-simple-configuration.html)
|
| 23 | - [Step 4: Making it more robust with image dimensions](https://nhoizey.github.io/images-responsiver/tutorial-04-images-dimensions.html)
|
| 24 | - [Step 5: Dealing with images filenames and URLs](https://nhoizey.github.io/images-responsiver/tutorial-05-images-urls.html)
|
| 25 | - [Step 6: Even better responsive images](https://nhoizey.github.io/images-responsiver/tutorial-06-even-better-responsive-images.html)
|
| 26 | - [Examples](https://nhoizey.github.io/images-responsiver/examples.html)
|
| 27 |
|
| 28 | ## Authors
|
| 29 |
|
| 30 | - [Nicolas Hoizey](https://github.com/nhoizey): Idea and initial work, maintainer
|
| 31 |
|
| 32 | See also the list of [contributors](https://github.com/nhoizey/images-responsiver/contributors) who participated in this project.
|
| 33 |
|
| 34 | ## License
|
| 35 |
|
| 36 | This project is licensed under the [MIT License](LICENSE.md).
|