Skip to content

Commit

Permalink
docs(readme): adds note about svgShortCircuit
Browse files Browse the repository at this point in the history
  • Loading branch information
@saneef
saneef committed Dec 2, 2023
1 parent 278aa5e commit 56c34be
Showing 1 changed file with 25 additions and 22 deletions.
47 changes: 25 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Requires **Node 14.15+**.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

## Table of Contents

- [Features](#features)
Expand Down Expand Up @@ -91,28 +92,30 @@ module.exports = function (eleventyConfig) {

### Options

| Name | Type | Default | Description |
| ---------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| eleventyInputDir | `string` | | 🚨 Required<br><br>Eleventy input directory. Should be same as Eleventy’s `dir.input`. |
| imagesOutputDir | `string` | | 🚨 Required<br><br>Output folder for optimized images. |
| urlPath | `string` | | 🚨 Required<br><br>URL prefix for images src URLS. It should match with path suffix in `imagesOutputDir`. Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/` |
| extensions | `array` | `["jpg", "png", "jpeg"]` | File extensions to optmize. |
| formats | `array` | `["avif", "webp", "jpeg"]` | Formats to be generated.<br><br>⚠️ The <source> tags are ordered based on the order of formats in this array. Keep most compatible format at the end. The path of the last format will be populated in the 'src' attribute of fallback <img> tag. |
| sizes | `string` | `"100vw"` | Default image [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) attribute |
| minWidth | `number` | `150` | Minimum image width to be generated |
| maxWidth | `number` | `1500` | Maximum image width to be generated |
| hoistImgClass | `boolean` | `false` | Move `class` attribute on `<img>` element to enclosing `<picture>` element. |
| pictureClass | `string` | "" | Class attribute for the newly created `<picture>` elements |
| widthStep | `number` | `150` | Width increments between each generated image |
| fetchRemote | `boolean` | `false` | Fetch, cache, and optimize remote images. |
| dryRun | `boolean` | `false` | Don't generate image files. Only HTML tags are generated. |
| 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. |
| cacheOptions | `object` | `{}` | Cache options passed to [`eleventy-cache-assets`](https://www.11ty.dev/docs/plugins/cache/). |
| sharpOptions | `object` | `{}` | Options passed to [Sharp constructor](https://sharp.pixelplumbing.com/api-constructor#parameters). |
| sharpWebpOptions | `object` | `{}` | Options passed to [Sharp image format converter] for webp(https://sharp.pixelplumbing.com/api-output#webp). |
| sharpPngOptions | `object` | `{}` | Options passed to [Sharp image format converter for png](https://sharp.pixelplumbing.com/api-output#png). |
| sharpJpegOptions | `object` | `{}` | Options passed to [Sharp image format converter for jpeg](https://sharp.pixelplumbing.com/api-output#jpeg). |
| sharpAvifOptions | `object` | `{}` | Options passed to [Sharp image format converter for avif](https://sharp.pixelplumbing.com/api-output#avif). |
| Name | Type | Default | Description |
| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| eleventyInputDir | `string` | | 🚨 Required<br><br>Eleventy input directory. Should be same as Eleventy’s `dir.input`. |
| imagesOutputDir | `string` | | 🚨 Required<br><br>Output folder for optimized images. |
| urlPath | `string` | | 🚨 Required<br><br>URL prefix for images src URLS. It should match with path suffix in `imagesOutputDir`. Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/` |
| extensions | `array` | `["jpg", "png", "jpeg"]` | File extensions to optmize. |
| formats | `array` | `["avif", "webp", "jpeg"]` | Formats to be generated.<br><br>⚠️ The <source> tags are ordered based on the order of formats in this array. Keep most compatible format at the end. The path of the last format will be populated in the 'src' attribute of fallback <img> tag. |
| sizes | `string` | `"100vw"` | Default image [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) attribute |
| minWidth | `number` | `150` | Minimum image width to be generated |
| maxWidth | `number` | `1500` | Maximum image width to be generated |
| hoistImgClass | `boolean` | `false` | Move `class` attribute on `<img>` element to enclosing `<picture>` element. |
| pictureClass | `string` | `""` | Class attribute for the newly created `<picture>` elements |
| widthStep | `number` | `150` | Width increments between each generated image |
| fetchRemote | `boolean` | `false` | Fetch, cache, and optimize remote images. |
| dryRun | `boolean` | `false` | Don't generate image files. Only HTML tags are generated. |
| svgShortCircuit | `boolean \| "size"` | `"size"` | See [Eleventy Image Documentation](https://www.11ty.dev/docs/plugins/image/#skip-raster-formats-for-svg) |
| svgCompressionSize | `undefined \| "br"` | `undefined` | See [Eleventy Image Documentation](https://www.11ty.dev/docs/plugins/image/#skip-raster-formats-for-svg) |
| 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. |
| cacheOptions | `object` | `{}` | Cache options passed to [`eleventy-cache-assets`](https://www.11ty.dev/docs/plugins/cache/). |
| sharpOptions | `object` | `{}` | Options passed to [Sharp constructor](https://sharp.pixelplumbing.com/api-constructor#parameters). |
| sharpWebpOptions | `object` | `{}` | Options passed to [Sharp image format converter] for webp(https://sharp.pixelplumbing.com/api-output#webp). |
| sharpPngOptions | `object` | `{}` | Options passed to [Sharp image format converter for png](https://sharp.pixelplumbing.com/api-output#png). |
| sharpJpegOptions | `object` | `{}` | Options passed to [Sharp image format converter for jpeg](https://sharp.pixelplumbing.com/api-output#jpeg). |
| sharpAvifOptions | `object` | `{}` | Options passed to [Sharp image format converter for avif](https://sharp.pixelplumbing.com/api-output#avif). |

### Remote images

Expand Down

0 comments on commit 56c34be

Please sign in to comment.