{"id":15163070,"url":"https://github.com/nhoizey/eleventy-plugin-images-responsiver","last_synced_at":"2025-10-25T00:31:55.643Z","repository":{"id":139392560,"uuid":"605334612","full_name":"nhoizey/eleventy-plugin-images-responsiver","owner":"nhoizey","description":"Global solution for responsive images in Eleventy, allowing authors to use Markdown syntax for image and yet get responsive images in generated HTML.","archived":false,"fork":false,"pushed_at":"2024-10-22T12:04:05.000Z","size":12256,"stargazers_count":8,"open_issues_count":6,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-08T17:12:08.387Z","etag":null,"topics":["eleventy","eleventy-plugin","images","plugin","responsive"],"latest_commit_sha":null,"homepage":"https://nhoizey.github.io/eleventy-plugin-images-responsiver/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nhoizey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-23T00:00:38.000Z","updated_at":"2024-10-31T23:18:22.000Z","dependencies_parsed_at":"2024-06-19T09:18:15.816Z","dependency_job_id":"7e628ff8-254f-4ebb-ab71-89f206d0321c","html_url":"https://github.com/nhoizey/eleventy-plugin-images-responsiver","commit_stats":{"total_commits":679,"total_committers":9,"mean_commits":75.44444444444444,"dds":"0.30044182621502213","last_synced_commit":"39a1ff72bf06d8f5e49313fa08d8341927473f3e"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhoizey%2Feleventy-plugin-images-responsiver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhoizey%2Feleventy-plugin-images-responsiver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhoizey%2Feleventy-plugin-images-responsiver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhoizey%2Feleventy-plugin-images-responsiver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nhoizey","download_url":"https://codeload.github.com/nhoizey/eleventy-plugin-images-responsiver/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238053514,"owners_count":19408699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eleventy","eleventy-plugin","images","plugin","responsive"],"created_at":"2024-09-27T02:03:00.438Z","updated_at":"2025-10-25T00:31:54.531Z","avatar_url":"https://github.com/nhoizey.png","language":"JavaScript","funding_links":[],"categories":["Tools"],"sub_categories":[],"readme":"# eleventy-plugin-images-responsiver\n\n[![npm](https://img.shields.io/npm/v/eleventy-plugin-images-responsiver?logo=npm\u0026style=for-the-badge)](\u003c![npm](https://img.shields.io/npm/v/eleventy-plugin-images-responsiver?logo=npm\u0026style=for-the-badge)\u003e)\n[![npm](https://img.shields.io/npm/dw/eleventy-plugin-images-responsiver?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/eleventy-plugin-images-responsiver)\n[![GitHub stars](https://img.shields.io/github/stars/nhoizey/eleventy-plugin-images-responsiver.svg?style=for-the-badge\u0026logo=github)](https://github.com/nhoizey/eleventy-plugin-images-responsiver/stargazers)\n[![Follow @nhoizey@mamot.fr](https://img.shields.io/mastodon/follow/000262395?domain=https%3A%2F%2Fmamot.fr\u0026style=for-the-badge\u0026logo=mastodon\u0026logoColor=white\u0026color=6364FF)](https://mamot.fr/@nhoizey)\n\n`eleventy-plugin-images-responsiver` is **a simple solution for most responsive images needs with [Eleventy](https://www.11ty.dev/)**.\n\nThis 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.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Why does this project exist?](#why-does-this-project-exist)\n- [How does it work?](#how-does-it-work)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Alternatives](#alternatives)\n- [Contributing](#contributing)\n- [License](#license)\n- [Authors](#authors)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n# Why does this project exist?\n\nAs Steve Jobs [once said](https://www.youtube.com/watch?v=oeqPrUmVz-o):\n\n\u003e You've got to start with the customer experience and run backwards to the technology.\n\n**Responsive images are one of the most difficult topics nowadays** for front end developers and content authors, they involve multiple features and syntaxes, but they are **required to provide a good performance to Web users**.\n\nMost content authors should not have to learn the complex responsive images HTML syntax, and how it is used by browsers to load the right image for current viewing context.\n\nKnowing that [`\u003cpicture\u003e` is only required for rare advanced usages](https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/), **`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](https://cloudfour.com/thinks/responsive-images-the-simple-way/).\n\n# How does it work?\n\n`eleventy-plugin-images-responsiver` is **the glue** between Eleventy plugin and transformations system and [`images-responsiver`](../images-responsiver/), the generic HTML transformation npm package for simple responsive images.\n\nEleventy 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.\n\n\u003e **Warning**\n\u003e This plugin doesn't generate any image, it has to be used either with already existing images, a local image resizing solution (should work with the official [eleventy-img](https://www.11ty.dev/docs/plugins/image/) plugin), or a third party service (\"image CDN\") like Cloudinary.\n\nLearn more in [the detailed documentation](https://nhoizey.github.io/eleventy-plugin-images-responsiver/).\n\n# Installation\n\nTo install and use the plugin, install it as a dev dependency in your Eleventy project:\n\n```\nnpm install eleventy-plugin-images-responsiver --save-dev\n```\n\n# Usage\n\nInstead 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.\n\nLet's **[start here](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/00-preparation/)**!\n\nIf you already know how to use the plugin and want to **go directly to a section of the tutorial**, here are direct links:\n\n- [Step 0: Get the resources to follow this tutorial](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/00-preparation/)\n- [Step 1: Default behaviour without the plugin](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/01-without-plugin/)\n- [Step 2: Default behaviour with the plugin](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/02-with-plugin-default/)\n- [Step 3: Resized images](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/03-resized-images/)\n- [Step 4: Images dimensions](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/04-images-dimensions/)\n- [Step 5: Presets](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/05-presets/)\n- [Step 6: Presets properties](https://nhoizey.github.io/eleventy-plugin-images-responsiver/tutorial/06-presets-properties/)\n\n# Alternatives\n\nTo deal with responsive images in Eleventy, there are multiple other plugins:\n\n- [eleventy-img](https://www.11ty.dev/docs/plugins/image/) by Zach Leatherman ([@zachleat](https://twitter.com/zachleat)) is a low level utility to perform build-time image transformations for both vector and raster images, but it doesn't generateany markup\n- [eleventy-plugin-respimg](https://www.npmjs.com/package/eleventy-plugin-respimg) by Eric Portis ([@etportis](https://twitter.com/etportis/)) provides a shortcode for responsive images with Cloudinary\n- [eleventy-plugin-local-respimg](https://github.com/chromeos/static-site-scaffold-modules/tree/master/modules/eleventy-plugin-local-respimg) by Sam Richard ([@Snugug](https://twitter.com/Snugug/)) provides an Eleventy transform for resizing and optimizing local images\n\n# Contributing\n\nFirst, thank you for considering contributing to `eleventy-plugin-images-responsiver`! It's people like you that make the open source community such a great community! 😊\n\nThere are many ways to contribute to this project. [Get started here](https://github.com/nhoizey/eleventy-plugin-images-responsiver/blob/main/CONTRIBUTING.md).\n\n# License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n\n# Authors\n\n- [Nicolas Hoizey](https://github.com/nhoizey): Idea and initial work, maintainer\n\nSee also the list of [contributors](https://github.com/nhoizey/eleventy-plugin-images-responsiver/contributors) who participated in this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhoizey%2Feleventy-plugin-images-responsiver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnhoizey%2Feleventy-plugin-images-responsiver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhoizey%2Feleventy-plugin-images-responsiver/lists"}