From 56c34be578517202cdd4e5f44293c3d417fcdb92 Mon Sep 17 00:00:00 2001 From: Saneef Ansari Date: Sat, 2 Dec 2023 12:35:25 +0530 Subject: [PATCH] docs(readme): adds note about svgShortCircuit --- README.md | 47 +++++++++++++++++++++++++---------------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 4454ec8..a474fda 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ Requires **Node 14.15+**. + ## Table of Contents - [Features](#features) @@ -91,28 +92,30 @@ module.exports = function (eleventyConfig) { ### Options -| Name | Type | Default | Description | -| ---------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| eleventyInputDir | `string` | | 🚨 Required

Eleventy input directory. Should be same as Eleventy’s `dir.input`. | -| imagesOutputDir | `string` | | 🚨 Required

Output folder for optimized images. | -| urlPath | `string` | | 🚨 Required

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.

⚠️ The 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 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 `` element to enclosing `` element. | -| pictureClass | `string` | "" | Class attribute for the newly created `` 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

Eleventy input directory. Should be same as Eleventy’s `dir.input`. | +| imagesOutputDir | `string` | | 🚨 Required

Output folder for optimized images. | +| urlPath | `string` | | 🚨 Required

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.

⚠️ The 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 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 `` element to enclosing `` element. | +| pictureClass | `string` | `""` | Class attribute for the newly created `` 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