{"id":15016557,"url":"https://github.com/saneef/eleventy-plugin-img2picture","last_synced_at":"2025-10-09T09:21:15.344Z","repository":{"id":37081121,"uuid":"387210804","full_name":"saneef/eleventy-plugin-img2picture","owner":"saneef","description":"Eleventy plugin to replace \u003cimg\u003e using \u003cpicture\u003e with resized and optimized images.","archived":false,"fork":false,"pushed_at":"2025-04-16T14:10:55.000Z","size":360,"stargazers_count":24,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-27T23:42:27.475Z","etag":null,"topics":["11ty","11ty-plugin","avif","eleventy","eleventy-plugin","responsive-images","webp"],"latest_commit_sha":null,"homepage":"","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/saneef.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":"saneef","ko_fi":"saneef","patreon":"saneef"}},"created_at":"2021-07-18T15:41:24.000Z","updated_at":"2025-07-13T11:55:52.000Z","dependencies_parsed_at":"2023-12-04T09:36:48.566Z","dependency_job_id":"4b5a0b88-cead-43ee-95a8-ff20b6863589","html_url":"https://github.com/saneef/eleventy-plugin-img2picture","commit_stats":{"total_commits":104,"total_committers":2,"mean_commits":52.0,"dds":0.08653846153846156,"last_synced_commit":"8a79e1033851e7be74738307592dae2544edc806"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/saneef/eleventy-plugin-img2picture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saneef%2Feleventy-plugin-img2picture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saneef%2Feleventy-plugin-img2picture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saneef%2Feleventy-plugin-img2picture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saneef%2Feleventy-plugin-img2picture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saneef","download_url":"https://codeload.github.com/saneef/eleventy-plugin-img2picture/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saneef%2Feleventy-plugin-img2picture/sbom","scorecard":{"id":799395,"data":{"date":"2025-08-11","repo":{"name":"github.com/saneef/eleventy-plugin-img2picture","commit":"5aa7fd57c004f4a2bf098eabef4cae7468823f50"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 1/20 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/saneef/eleventy-plugin-img2picture/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/saneef/eleventy-plugin-img2picture/ci.yml/main?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:20","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"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"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 13 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-23T09:58:18.431Z","repository_id":37081121,"created_at":"2025-08-23T09:58:18.431Z","updated_at":"2025-08-23T09:58:18.431Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001123,"owners_count":26083021,"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","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["11ty","11ty-plugin","avif","eleventy","eleventy-plugin","responsive-images","webp"],"created_at":"2024-09-24T19:49:04.495Z","updated_at":"2025-10-09T09:21:15.325Z","avatar_url":"https://github.com/saneef.png","language":"JavaScript","funding_links":["https://github.com/sponsors/saneef","https://ko-fi.com/saneef","https://patreon.com/saneef"],"categories":[],"sub_categories":[],"readme":"# eleventy-plugin-img2picture\n\nEleventy plugin to replace `\u003cimg\u003e` using `\u003cpicture\u003e` with resized and optimized images.\n\nThis plugin is inspired by [eleventy-plugin-local-respimg](https://github.com/chromeos/static-site-scaffold-modules/tree/main/modules/eleventy-plugin-local-respimg) by [Sam Richard](https://twitter.com/Snugug/).\n\nRequires **Node v18.17+**.\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## Table of Contents\n\n- [Features](#features)\n- [Supported Image Formats](#supported-image-formats)\n- [Usage](#usage)\n  - [Basic Usage](#basic-usage)\n  - [Recommended Usage](#recommended-usage)\n  - [Options](#options)\n  - [Remote images](#remote-images)\n  - [Attributes on `\u003cimg\u003e`](#attributes-on-img)\n    - [Ignore Images](#ignore-images)\n    - [Specify widths on `\u003cimg\u003e`](#specify-widths-on-img)\n    - [Specify `class` for enclosing `\u003cpicture\u003e` tags through `\u003cimg\u003e`](#specify-class-for-enclosing-picture-tags-through-img)\n  - [Disk Cache](#disk-cache)\n  - [Example](#example)\n- [FAQs](#faqs)\n  - [How to pick the right `sizes`?](#how-to-pick-the-right-sizes)\n  - [How is this plugin different from others?](#how-is-this-plugin-different-from-others)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Features\n\n- Drop-in plugin to replace all `\u003cimg\u003e` in your website without shortcodes.\n- [Ignore image using data attribute](#ignore-images).\n- Download, cache, and optimize [remote images](#remote-images).\n- Skip processing unchanged and already existing images in the output directory. See [disk cache](#disk-cache).\n\n## Supported Image Formats\n\nThis plugin uses [`eleventy-img`](https://www.11ty.dev/docs/plugins/image/) to optimize, and generate different sizes and formats of images. All [formats supported](https://www.11ty.dev/docs/plugins/image/#output-formats) by `eleventy-img` are supported by `eleventy-plugin-img2picture`.\n\n## Usage\n\n### Basic Usage\n\n```js\nconst img2picture = require(\"eleventy-plugin-img2picture\");\n\nmodule.exports = function (eleventyConfig) {\n  eleventyConfig.addPlugin(img2picture, {\n    // Should be same as Eleventy input folder set using `dir.input`.\n    eleventyInputDir: \".\",\n\n    // Output folder for optimized images.\n    imagesOutputDir: \"_site\",\n\n    // URL prefix for images src URLS.\n    // It should match with path suffix in `imagesOutputDir`.\n    // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`\n    urlPath: \"\",\n  });\n};\n```\n\n### Recommended Usage\n\n👋 It's recommended to use the plugin only on production builds (E.g.: `$ ELEVENTY_ENV=production eleventy`). The plugin works fine with [basic usage](#basic-usage). Just that, your Eleventy builds will be quite slow.\n\n```js\nmodule.exports = function (eleventyConfig) {\n  if (process.env.ELEVENTY_ENV === \"production\") {\n    eleventyConfig.addPlugin(img2picture, {\n      // Should be same as Eleventy input folder set using `dir.input`.\n      eleventyInputDir: \".\",\n\n      // Output folder for optimized images.\n      imagesOutputDir: \"_site\",\n\n      // URL prefix for images src URLS.\n      // It should match with path suffix in `imagesOutputDir`.\n      // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`\n      urlPath: \"\",\n    });\n  } else {\n    // During development, copy the files to Eleventy's `dir.output`\n    eleventyConfig.addPassthroughCopy(\"./images\");\n  }\n};\n```\n\n### Options\n\n| Name               | Type                | Default                                                                                                                                             | Description                                                                                                                                                                                          |\n| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| eleventyInputDir   | `string`            |                                                                                                                                                     | 🚨 Required\u003cbr\u003e\u003cbr\u003eEleventy input directory. Should be same as Eleventy’s `dir.input`.                                                                                                               |\n| imagesOutputDir    | `string`            |                                                                                                                                                     | 🚨 Required\u003cbr\u003e\u003cbr\u003eOutput folder for optimized images.                                                                                                                                               |\n| urlPath            | `string`            |                                                                                                                                                     | 🚨 Required\u003cbr\u003e\u003cbr\u003eURL prefix for images src URLS. It should match with path suffix in `imagesOutputDir`. Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`                  |\n| extensions         | `array`             | `[\"jpg\", \"png\", \"jpeg\", \"svg\"]`                                                                                                                     | File extensions to optmize.                                                                                                                                                                          |\n| formats            | `array`             | `[\"avif\", \"webp\", \"svg\", \"jpeg\"]`                                                                                                                   | Formats to be generated.\u003cbr\u003e\u003cbr\u003e⚠️ The \u003csource\u003e tags are ordered based on the order of formats in this array. Keep most compatible format at the end.                                                |\n| sizes              | `string`            | `\"100vw\"`                                                                                                                                           | Default image [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes) attribute                                                                                               |\n| minWidth           | `number`            | `150`                                                                                                                                               | Minimum image width to be generated                                                                                                                                                                  |\n| maxWidth           | `number`            | `1500`                                                                                                                                              | Maximum image width to be generated                                                                                                                                                                  |\n| hoistImgClass      | `boolean`           | `false`                                                                                                                                             | Move `class` attribute on `\u003cimg\u003e` element to enclosing `\u003cpicture\u003e` element.                                                                                                                          |\n| pictureClass       | `string`            | `\"\"`                                                                                                                                                | Class attribute for the newly created `\u003cpicture\u003e` elements                                                                                                                                           |\n| widthStep          | `number`            | `150`                                                                                                                                               | Width increments between each generated image                                                                                                                                                        |\n| fetchRemote        | `boolean`           | `false`                                                                                                                                             | Fetch, cache, and optimize remote images.                                                                                                                                                            |\n| dryRun             | `boolean`           | `false`                                                                                                                                             | Don't generate image files. Only HTML tags are generated.                                                                                                                                            |\n| svgShortCircuit    | `boolean \\| \"size\"` | `\"size\"`                                                                                                                                            | See [Eleventy Image Documentation](https://www.11ty.dev/docs/plugins/image/#skip-raster-formats-for-svg)\u003cbr\u003e\u003cbr\u003e ℹ️ [What is SVG short circuiting?](https://www.zachleat.com/web/svg-short-circuit/) |\n| svgCompressionSize | `undefined \\| \"br\"` | `undefined`                                                                                                                                         | See [Eleventy Image Documentation](https://www.11ty.dev/docs/plugins/image/#skip-raster-formats-for-svg)                                                                                             |\n| filenameFormat     | `function`          | [`filenameFormatter()`](https://github.com/saneef/eleventy-plugin-img2picture/blob/b56ff9c3785700e68e37f2a1ed1a9ea12744ad73/lib/img2picture.js#L85) | Function used by [`eleventy-img`](https://www.11ty.dev/docs/plugins/image/) to generate image filenames.                                                                                             |\n| cacheOptions       | `object`            | `{}`                                                                                                                                                | Cache options passed to [`eleventy-cache-assets`](https://www.11ty.dev/docs/plugins/cache/).                                                                                                         |\n| sharpOptions       | `object`            | `{}`                                                                                                                                                | Options passed to [Sharp constructor](https://sharp.pixelplumbing.com/api-constructor#parameters).                                                                                                   |\n| sharpWebpOptions   | `object`            | `{}`                                                                                                                                                | Options passed to [Sharp image format converter] for webp(https://sharp.pixelplumbing.com/api-output#webp).                                                                                          |\n| sharpPngOptions    | `object`            | `{}`                                                                                                                                                | Options passed to [Sharp image format converter for png](https://sharp.pixelplumbing.com/api-output#png).                                                                                            |\n| sharpJpegOptions   | `object`            | `{}`                                                                                                                                                | Options passed to [Sharp image format converter for jpeg](https://sharp.pixelplumbing.com/api-output#jpeg).                                                                                          |\n| sharpAvifOptions   | `object`            | `{}`                                                                                                                                                | Options passed to [Sharp image format converter for avif](https://sharp.pixelplumbing.com/api-output#avif).                                                                                          |\n\n### Remote images\n\nSet `fetchRemote: true` in options to download, cache, and optimize remote images. `fetchRemote` is `false` by default. Use [`cacheOptions` passed to `eleventy-cache-assets`](https://www.11ty.dev/docs/plugins/cache/#options) to change cache settings like, cache duration, and path.\n\n### Attributes on `\u003cimg\u003e`\n\n- `sizes` will be hoisted on `\u003csource\u003e` elements.\n- `src`, `width`, and `height` attributes will be replaced with corresponding values based on the optimized image.\n- All other attributes on `\u003cimg\u003e` will be retained.\n\n#### Ignore Images\n\nImages with `data-img2picture-ignore=\"true\"` or `data-img2picture-ignore` will be ignored by the plugin.\n\n```html\n\u003cimg\n  data-img2picture-ignore=\"true\"\n  src=\"/images/sunset-by-bruno-scramgnon.jpg\"\n  alt=\"Sunset\"\n/\u003e\n```\n\n#### Specify widths on `\u003cimg\u003e`\n\nYou can provide a comma separated list of widths using `data-img2picture-widths`. This will override default widths computed from config (`minWidth`, `maxWidth`, and `widthStep`) for a particular `\u003cimg\u003e`.\n\n```html\n\u003cimg\n  data-img2picture-widths=\"200,400,600,800\"\n  src=\"/images/sunset-by-bruno-scramgnon.jpg\"\n  alt=\"Sunset\"\n/\u003e\n```\n\n#### Specify `class` for enclosing `\u003cpicture\u003e` tags through `\u003cimg\u003e`\n\nYou can provide class attribute for the enclosing `\u003cpicture\u003e` using `data-img2picture-picture-class` data attribute. This will override the class provided using `pictureClass` option.\n\n```html\n\u003cimg\n  data-img2picture-picture-class=\"w-full\"\n  src=\"/images/sunset-by-bruno-scramgnon.jpg\"\n  alt=\"Sunset\"\n/\u003e\n```\n\n### Disk Cache\n\nDisk cache is a feature provided by the [`eleventy-img` plugin](https://www.11ty.dev/docs/plugins/image/). This plugin will skip unchanged, and already existing images in the output path. If you don't delete generated image between builds, you'll get faster builds. [This sample project](https://github.com/11ty/demo-eleventy-img-netlify-cache) shows how to persist disk cache across Netlify builds.\n\n### Example\n\n```html\n\u003cimg\n  class=\"w-full\"\n  src=\"shapes.png\"\n  alt=\"Shapes\"\n  data-variant=\"bleed\"\n  loading=\"eager\"\n  decoding=\"auto\"\n/\u003e\n```\n\n...will generate:\n\n```html\n\u003cpicture class=\"w-full\"\n  \u003e\u003csource\n    type=\"image/avif\"\n    srcset=\"\n      shapes-150w.avif   150w,\n      shapes-300w.avif   300w,\n      shapes-450w.avif   450w,\n      shapes-600w.avif   600w,\n      shapes-750w.avif   750w,\n      shapes-900w.avif   900w,\n      shapes-1050w.avif 1050w,\n      shapes-1200w.avif 1200w,\n      shapes-1350w.avif 1350w\n    \"\n    sizes=\"100vw\" /\u003e\n  \u003csource\n    type=\"image/webp\"\n    srcset=\"\n      shapes-150w.webp   150w,\n      shapes-300w.webp   300w,\n      shapes-450w.webp   450w,\n      shapes-600w.webp   600w,\n      shapes-750w.webp   750w,\n      shapes-900w.webp   900w,\n      shapes-1050w.webp 1050w,\n      shapes-1200w.webp 1200w,\n      shapes-1350w.webp 1350w\n    \"\n    sizes=\"100vw\" /\u003e\n  \u003csource\n    type=\"image/jpeg\"\n    srcset=\"\n      shapes-150w.jpeg   150w,\n      shapes-300w.jpeg   300w,\n      shapes-450w.jpeg   450w,\n      shapes-600w.jpeg   600w,\n      shapes-750w.jpeg   750w,\n      shapes-900w.jpeg   900w,\n      shapes-1050w.jpeg 1050w,\n      shapes-1200w.jpeg 1200w,\n      shapes-1350w.jpeg 1350w\n    \"\n    sizes=\"100vw\" /\u003e\n  \u003cimg\n    src=\"shapes-150w.jpeg\"\n    width=\"1350\"\n    height=\"1350\"\n    alt=\"Shapes\"\n    data-variant=\"bleed\"\n    sizes=\"100vw\"\n    loading=\"eager\"\n    decoding=\"auto\"\n/\u003e\u003c/picture\u003e\n```\n\n## FAQs\n\n### How to pick the right [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)?\n\nI highly recommend to use the magical [respimagelint - Linter for Responsive Images](https://ausi.github.io/respimagelint/) by [Martin Auswöger](https://twitter.com/ausi).\n\n### How is this plugin different from others?\n\nPlugins like [`eleventy-plugin-respimg`](https://www.npmjs.com/package/eleventy-plugin-respimg), and [`eleventy-plugin-images-responsiver`](https://github.com/nhoizey/images-responsiver/tree/main/packages/eleventy-plugin-images-responsiver/) utilizes shortcodes or attributes to optimize images. The `eleventy-plugin-img2picture` doesn't rely on shortcode. It optimizes all `\u003cimg\u003e` matching the file extensions. You can exclude `\u003cimg\u003e` using data attribute `data-img2picture-ignore`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaneef%2Feleventy-plugin-img2picture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaneef%2Feleventy-plugin-img2picture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaneef%2Feleventy-plugin-img2picture/lists"}