{"id":15208959,"url":"https://github.com/seesjays/astro-remark-eleventy-image","last_synced_at":"2026-01-27T12:01:44.589Z","repository":{"id":65696133,"uuid":"597210675","full_name":"seesjays/astro-remark-eleventy-image","owner":"seesjays","description":"Astro Integraton that automatically optimizes images referenced in markdown files.","archived":false,"fork":false,"pushed_at":"2023-04-02T20:23:18.000Z","size":310,"stargazers_count":15,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-04T15:35:19.285Z","etag":null,"topics":["accessibility","astro-integration","astrojs","image-processing","markdown","optimization","seo"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-remark-eleventy-image","language":"TypeScript","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/seesjays.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-02-03T21:53:38.000Z","updated_at":"2025-03-22T19:26:25.000Z","dependencies_parsed_at":"2023-02-26T23:15:22.122Z","dependency_job_id":"6542673e-e162-4c2d-bfd5-f7dc447623ce","html_url":"https://github.com/seesjays/astro-remark-eleventy-image","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"a8a8c476604961b532d6051124bbdce031012e93"},"previous_names":["seesjays/astro-remark-eleventy-image","chrisoh431/astro-remark-eleventy-image"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/seesjays/astro-remark-eleventy-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seesjays%2Fastro-remark-eleventy-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seesjays%2Fastro-remark-eleventy-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seesjays%2Fastro-remark-eleventy-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seesjays%2Fastro-remark-eleventy-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seesjays","download_url":"https://codeload.github.com/seesjays/astro-remark-eleventy-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seesjays%2Fastro-remark-eleventy-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000686,"owners_count":26082837,"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-08T02:00:06.501Z","response_time":56,"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":["accessibility","astro-integration","astrojs","image-processing","markdown","optimization","seo"],"created_at":"2024-09-28T07:05:06.506Z","updated_at":"2025-10-08T21:57:03.101Z","avatar_url":"https://github.com/seesjays.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Astro Remark Eleventy Image 🖼\n\nOne thing I really missed when I migrated my blog from [Gatsby](https://www.gatsbyjs.com/) to [Astro](https://astro.build/) was the automatic image processing + optimization that [gatsby-remark-images](https://www.gatsbyjs.com/plugins/gatsby-remark-images/) did for the images linked in my posts. It was like SEO magic, and made my image-heavy pages load “blazingly fast” with very little effort on my end.\n\nThis drop-in Astro Integration replicates that functionality by using [Eleventy Image](https://www.11ty.dev/docs/plugins/image/) to optimize the images in your markdown automatically.\n\n## Installation\n\n```npx astro add astro-remark-eleventy-image```\n\nAstro's version of Vite causes errors with eleventy-img, so to use this package you \u003cins\u003emust\u003c/ins\u003e include this snippet in your **astro-config**\n\n```js\nvite: {\n    ssr: {\n      external: [\"@11ty/eleventy-img\"],\n    },\n}\n```\n\nlike such:\n\n```js\nexport default defineConfig({\n  integrations: [remarkEleventyImage({ ... })],\n  vite: {\n    ssr: {\n      external: [\"@11ty/eleventy-img\"],\n    },\n  },\n});\n```\n\n\n### Migrating to v2.0\n\nFor better UX + ease of future development, this package was converted from a Remark plugin (v1.0) to an Integration (that adds a Remark plugin behind the scenes)\nYou’ll find that configuration is kept exactly the same, the only real difference is that remarkEleventyImage is now an integration, and the `remarkImages` config object should be passed into it. Remove remarkEleventyImage from your remarkPlugins array and read the rest of the documentation.\n\n## Usage\n\n### Updating `astro.config.mjs`\n\n```js\nimport { defineConfig } from 'astro/config';\nimport remarkEleventyImage from \"astro-remark-eleventy-image\";\n\n// https://astro.build/config\nexport default defineConfig({\n  ...\n  integrations: [remarkEleventyImage()]\n});\n```\n\nJust import the plugin and add it to your integrations array, similar to what they show in the [Astro docs for Integrations](https://docs.astro.build/en/guides/integrations-guide/#using-integrations)\n\n\u003e _Why is it called astro-REMARK-eleventy-images if it’s an integration and not a remark plugin?_\n\u003e This package was _previously_ a remark plugin, but to improve the configuration experience, use fewer tricks for functionality, and make future development easier, I converted it to an integration.\n\n### Configuration\n\nConfiguration isn’t required for the plugin to function, but is available if you want to tweak a few things.\n\n```js\nimport { defineConfig } from 'astro/config';\nimport remarkEleventyImage from \"astro-remark-eleventy-image\";\n\nexport function customMarkup({ src, sources, width, height, alt })\n{\n  return `\n  \u003cpicture\u003e\n  ${sources}\n  \u003cimg\n    src=\"${src}\"\n    width=\"${width}\"\n    height=\"${height}\"\n    alt=\"${alt}\"\n    loading=\"lazy\"\n    decoding=\"async\"\u003e\n   \u003c/picture\u003e\n   `;\n}\n\n// https://astro.build/config\nexport default defineConfig({\n  integrations: [remarkEleventyImage({\n    sizes: \"(max-width: 700px) 100vw, 700px\",\n    remoteImages: false,\n    altRequired: true,\n    customMarkup: customMarkup,\n    eleventyImageConfig: {\n      formats: ['auto'],\n      widths: ['auto', 600, 1000, 1400],\n      sharpOptions: {\n        animated: true\n      }\n    },\n  })],\n});\n```\n\n\u003e These are the default values\n\nThe configuration object for the plugin is passed into it as a parameter, similar to how other integrations are configured.\n\n`remoteImages` controls whether or not remote images (the kind hosted on other websites like GitHub) are optimized on your site. This is mostly stable, but if problems arise please submit an issue.\n\n`sizes` is the `sizes` attribute that gets passed to the HTML. If you don’t know how to set this, you can [read up on how it works on MDN.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)\n\n`eleventyImageConfig` is the configuration object that gets passed to [Eleventy Image.](https://www.11ty.dev/docs/plugins/image/) You can use it to configure the underlying `sharp` settings, the widths the plugin generates (more widths, more processing time), and more.\n\n#### Custom Markup\n\nSee [PR #4](https://github.com/ChrisOh431/astro-remark-eleventy-image/pull/4) for detailed information on how to write custom markup.\n\n\u003e You cannot, however, configure where images are output and what they’re named. The names for the optimized images are generated based on what the original images are named, and the optimized images are placed in the same output directories as the original images. Changing either of these settings _will break your images._\n\n## Why should you use this plugin?\n\nIt doesn’t require you to turn all your files into .mdx so you can import and use a custom Image component. It aims to do one thing well, and offers ample control over the eleventy-image generator config (but doesn’t require much configuring).\n\nIt’s also actively being used on [my site,](https://cjohanaja.com/) so I have good reason to support it.\n\nOverall, if you want a quick and painless way to automatically optimize all of your post images, it wouldn’t hurt to try this out.\n\n## Caveats\n\n- This package hasn’t been tested with server-side rendering.\n- Like with [gatsby-remark-images,](https://www.gatsbyjs.com/plugins/gatsby-remark-images/) the process of optimizing images is time consuming. This plugin is specifically intended to run during the **build** step of your Astro site to reduce that issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseesjays%2Fastro-remark-eleventy-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseesjays%2Fastro-remark-eleventy-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseesjays%2Fastro-remark-eleventy-image/lists"}