https://github.com/ziteh/rehype-img-size-cache
A rehype plugin that automatically adds width and height attributes to <img> with caching support
https://github.com/ziteh/rehype-img-size-cache
Last synced: 23 days ago
JSON representation
A rehype plugin that automatically adds width and height attributes to <img> with caching support
- Host: GitHub
- URL: https://github.com/ziteh/rehype-img-size-cache
- Owner: ziteh
- License: mit
- Created: 2025-06-09T14:51:03.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-10T13:26:18.000Z (8 months ago)
- Last Synced: 2025-06-24T07:46:48.593Z (8 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@ziteh/rehype-img-size-cache
- Size: 51.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rehype-img-size-cache Plugin
A [rehype](https://github.com/rehypejs/rehype) plugin that automatically adds `width` and `height` attributes to `![]()
` with caching support, includes local and remote images.
Helps improve Cumulative Layout Shift (CLS).
## Install
```bash
npm i @ziteh/rehype-img-size-cache
# or
pnpm add @ziteh/rehype-img-size-cache
```
## Usage
```js
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import rehypeImgSizeCache from '@ziteh/rehype-img-size-cache';
const processor = unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeImgSizeCache, {
cacheFilePath: './cache/image-sizes.yaml',
processRemoteImages: true,
})
.use(rehypeStringify);
const markdown = ``;
const result = await processor.process(markdown);
console.log(result.toString());
```
Output:
```html
```
## Options
```ts
interface RehypeImgSizeCacheOptions {
cacheFilePath?: string;
processRemoteImages?: boolean;
}
declare function rehypeImgSizeCache(
options?: RehypeImgSizeCacheOptions,
): (tree: Node) => Promise;
```
### `cacheFilePath?`
Path to the cache file. Default is `'cache/image-sizes.yaml'`.
### `processRemoteImages?`
Whether to process remote images (HTTP/HTTPS). Default is `true`.
## Cache Format
The plugin stores cache in YAML format:
```yaml
- url: https://example.com/image1.jpg
width: 400
height: 300
- url: ./local/image2.jpg
width: 800
height: 600
```
## Development
```bash
pnpm install
pnpm build
pnpm test
```
## Related
- [ksoichiro/rehype-img-size: rehype plugin to set local image size properties to img tag.](https://github.com/ksoichiro/rehype-img-size)
- [potato4d/rehype-plugin-auto-resolve-layout-shift: Flexible improve CLS plugin for rehype.](https://github.com/potato4d/rehype-plugin-auto-resolve-layout-shift)
- [theMosaad/rehype-external-img-size: rehype plugin to add width and height attributes to external images](https://github.com/theMosaad/rehype-external-img-size)