{"id":15187292,"url":"https://github.com/hydecorp/jekyll-replace-img","last_synced_at":"2026-05-27T01:00:54.712Z","repository":{"id":56878774,"uuid":"179309731","full_name":"hydecorp/jekyll-replace-img","owner":"hydecorp","description":"A Jekyll plugin to replace img tags with custom elements","archived":false,"fork":false,"pushed_at":"2019-11-09T19:48:16.000Z","size":34,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-20T12:21:22.145Z","etag":null,"topics":["custom-elements","img","jekyll","jekyll-plugin","lazy-loading"],"latest_commit_sha":null,"homepage":"https://hydejack.com","language":"Ruby","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/hydecorp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-03T14:40:18.000Z","updated_at":"2019-12-09T05:06:38.000Z","dependencies_parsed_at":"2022-08-20T11:40:32.882Z","dependency_job_id":null,"html_url":"https://github.com/hydecorp/jekyll-replace-img","commit_stats":null,"previous_names":["qwtel/jekyll-replace-img"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/hydecorp/jekyll-replace-img","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydecorp%2Fjekyll-replace-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydecorp%2Fjekyll-replace-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydecorp%2Fjekyll-replace-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydecorp%2Fjekyll-replace-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hydecorp","download_url":"https://codeload.github.com/hydecorp/jekyll-replace-img/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydecorp%2Fjekyll-replace-img/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33545458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"ssl_error","status_checked_at":"2026-05-26T15:22:15.568Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["custom-elements","img","jekyll","jekyll-plugin","lazy-loading"],"created_at":"2024-09-27T18:08:51.562Z","updated_at":"2026-05-27T01:00:54.614Z","avatar_url":"https://github.com/hydecorp.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jekyll Replace Image\n\n[![Build Status](https://travis-ci.org/hydecorp/jekyll-replace-img.svg?branch=master)](https://travis-ci.org/hydecorp/jekyll-replace-img)\n\nA Jekyll plugin to replace `img` tags with custom elements during site generation.\n\n\n## What it does\n\nIt runs a regular expression to find HTML `img` tags against the output of each page and replaces matches with a user-defined replacement. \n\nThere are a number of custom elements you can use, such as [`progressive-img`][pi], [`amp-img`][ai] and (my very own) [`hy-img`][hy].\n\n[io]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n[pi]: https://www.webcomponents.org/element/progressive-img\n[ai]: https://www.ampproject.org/docs/reference/components/amp-img\n[hy]: https://github.com/hydecorp/img\n\nNote that replacing images during site generation is necessary for lazy-loading, because the browser will start loading any `img` tag as soon as it is parsed, before it can be touched by client side code.\n\n## Why\n\n1. Lazy-loading images increases page load speed and is recommended by Google.\n2. So you can use the `![alt](src)` syntax for images without polluting your posts with lengthy HTML tags.\n\n## Usage\n\n1.  Add the following to your site's Gemfile:\n\n    ```ruby\n    gem 'jekyll-replace-img'\n    ```\n\n2.  Add the following to your site's config file:\n\n    ```yml\n    plugins:\n      - jekyll-replace-img\n    ```\n    Note: If you are using a Jekyll version less than 3.5.0, use the `gems` key instead of `plugins`.\n  \n3.  Configure and provide your replacement.\n\n## Configuration\n\nYou can configure this plugin in `_config.yml` under the `replace_img` key. The defaults are:\n\n```yml\nreplace_img:\n  re_img:      \u003cimg\\s*(?\u003cattributes\u003e.*?)\\s*/\u003e\n  re_ignore:   data-ignore\n  replacement: |\n    \u003chy-img %\u003cattributes\u003es\u003e\n      \u003cnoscript\u003e\u003cimg data-ignore %\u003cattributes\u003es/\u003e\u003c/noscript\u003e\n    \u003c/hy-img\u003e\n```\n\n### Image Regular Expression\nYou can set the `re_img` key to a custom regular expression to look for image tags (or possibly other tags). Note that the capture groups need to be named and match the names in `replacement`. E.g.:\n\n    \u003cimg\\s*(?\u003cattributes\u003e.*?)\\s*/\u003e\n\nMind the use of the non-greedy quantifier (`*?`) in the capture group to avoid capturing all images in a single match!\n\nYou cannot provide flags and the regular expression is always case-insensitive.\n\n### Ignore Regular Expression\nYou can provide a custom regular expression on the `re_ignore` key that will run against the text matched by the `re_img` expression. If it matches, the image will not be replaced. \n\nYou cannot provide flags and the regular expression is always case-insensitive. Data URLs are always ignored.\n\n### Replacement\n\nA replacement string for every sequence matched by `re_img` but not `re_ignore`. Has access to the named captures in `re_img`, which is `attributes` by default. \n\nCapture groups can be inserted in the replacement like this `%\u003cattributes\u003es`, where `attribures` is the name of the capture group and `s` is the string tag. See Ruby's [`sprintf`][sprintf] documentation for more. \n\n[sprintf]: https://ruby-doc.org/core-2.6.2/Kernel.html#method-i-sprintf\n\n#### Example\n\n    \u003cprogressive-img %\u003cattributes\u003es\u003e\u003c/progressive-img\u003e\n    \u003cnoscript\u003e\u003cimg data-ignore %\u003cattributes\u003es/\u003e\u003c/noscript\u003e\n\n\n## TODO\n\n- [ ] Allow multiple ignore expressions\n- [ ] Allow substitutions of matched groups, e.g. `s/width/w`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhydecorp%2Fjekyll-replace-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhydecorp%2Fjekyll-replace-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhydecorp%2Fjekyll-replace-img/lists"}