Gathering detailed insights and metrics for eleventy-plugin-images-responsiver
Gathering detailed insights and metrics for eleventy-plugin-images-responsiver
Global solution for responsive images in Eleventy, allowing authors to use Markdown syntax for image and yet get responsive images in generated HTML.
Installations
npm install eleventy-plugin-images-responsiverDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
22.5.1
NPM Version
10.8.2
Languages
2
JavaScript
Shell
JavaScript (79.65%)
Shell (20.35%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
10 Stars
945 Commits
2 Forks
2 Watchers
1 Branches
5 Contributors
Updated on May 08, 2025
Maintainers
1
Package Meta Information
Latest Version
3.0.0
Package Id
eleventy-plugin-images-responsiver@3.0.0
Unpacked Size
9.51 kB
Size
4.00 kB
File Count
4
NPM Version
10.8.2
Node Version
22.5.1
Published on
Oct 22, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
eleventy-plugin-images-responsiver
eleventy-plugin-images-responsiver is a simple solution for most responsive images needs with Eleventy.
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.
- Why does this project exist?
- How does it work?
- Installation
- Usage
- Alternatives
- Contributing
- License
- Authors
Why does this project exist?
As Steve Jobs once said:
You've got to start with the customer experience and run backwards to the technology.
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.
Most 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.
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.
How does it work?
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.
Warning 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 plugin), or a third party service ("image CDN") like Cloudinary.
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
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
Contributing
First, 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! 😊
There are many ways to contribute to this project. Get started here.
License
This project is licensed under the MIT License.
Authors
- Nicolas Hoizey: Idea and initial work, maintainer
See also the list of contributors who participated in this project.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/nhoizey/eleventy-plugin-images-responsiver/tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/nhoizey/eleventy-plugin-images-responsiver/tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/nhoizey/eleventy-plugin-images-responsiver/tests.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/upgrade-dependencies.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/nhoizey/eleventy-plugin-images-responsiver/upgrade-dependencies.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: docs/tutorial/upgrade-npm.sh:6
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 1 out of 2 npmCommand dependencies pinned
Reason
Found 2/18 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/tests.yml:1
- Warn: no topLevel permission defined: .github/workflows/upgrade-dependencies.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 16 are checked with a SAST tool
Reason
13 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-x77j-w7wf-fjmw
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-7q7g-4xm8-89cq
Score
3
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More