Eleventy Image v6.0.0

Notably, for maximum compatibility this package is still CommonJS (not yet ESM). Node minimum is still 18+ (unchanged from Eleventy Image v4).

Breaking Changes

• useCacheValidityInHash option has been removed #146
• Transform method will reuse existing <img width> attribute (if single integer) as eleventy:widths value #234

The following changes likely require no action on your part (but are nonetheless breaking):

• Better color support (P3, AdobeRGB, et al): images retain ICC profiles by default #244
• Dependency major upgrade: @11ty/eleventy-fetch from v4 to v5
• Dependency major upgrade @11ty/eleventy-utils from v1 to v2
• Default metadata object returned will no longer include empty format arrays { jpeg: [] } #242

Features

• Uses native fetch() (no more node-fetch, via eleventy-fetch upgrade) and works better with caching on remote urls, consistency on file names with sync methods #252 #262 #146
• returnType: "html" option will return the generated HTML directly instead of the metadata object #267
  • htmlOptions: {} are options passed to the generateHTML function
• Output format filtering (opt-out with formatFiltering option). Filters out output formats that do not support animation or transparency automatically.
  • Animation friendly formats #260
  • Transparency friendly formats #105
• Adds failOnError: true option to avoid throwing an error when image processing fails (and failing your build) #225 See also the eleventy:optional attribute below.
• Adds new transform hook for running your own sharp customizations #52 (comment) (can be used to add custom cropping!)
• Improved error messaging when incorrectly using the default export with eleventyConfig.addPlugin #263
• Concurrency auto-scales per machine resources (between 8 min and 16 max) #258
• Support full URLs in urlPath option #239
• generateHTML: Missing sizes error relaxed when using loading="lazy" HTML, swap to use sizes="auto" instead #207
• New generateHTML option (also available via htmlOptions) forfallback: "smallest" to choose smallest image for <img> fallback and width/height dimensions #265 #129

Transform Method

• Reuse existing <img width> attribute (if single integer) as eleventy:widths value #234
• Adds eleventy:optional HTML attribute so that errors in image processing will not fail the build (in different ways) #259
  1. Remove src attribute
  2. Leave as-is eleventy:optional="keep"
  3. Replace with a transparent Data URI eleventy:optional="placeholder"
• Decode file name paths #253
• Support transforming <picture> nodes #214
• Preserve attributes on img and picture elements #214 (comment) #241 #243 #251
• Fix for relative references when using permalinks with non-index.html file names #236

Full Milestone (×26 issues closed): https://github.com/11ty/eleventy-img/milestone/22?closed=1
Full Changelog (×75 commits, +2,347/-992): v5.0.0...v6.0.0

Prerelease: Eleventy Image v6.0.0-beta.5

• Fix for resize/cropping in transform callbacks #52 reported by @jens-struct on https://indieweb.social/@djenz/113789802133432912

Full v6 Milestone: https://github.com/11ty/eleventy-img/milestone/22?closed=1
Full Changelog: v6.0.0-beta.4...v6.0.0-beta.5

Prerelease: Eleventy Image v6.0.0-beta.4

Probably the last beta before v6.0.0 stable.

• Upgrades to @11ty/eleventy-fetch to v5.0.2 #262
• Breaking: upgrades @11ty/eleventy-utils from v1 to v2.0.0 requires Node 18+ #270
• Breaking: upgrades entities from v5 to v6.0.0, release notes: https://github.com/fb55/entities/releases/tag/v6.0.0

Full v6 Milestone: https://github.com/11ty/eleventy-img/milestone/22?closed=1
Full Changelog: v6.0.0-beta.3...v6.0.0-beta.4

Prerelease: Eleventy Image v6.0.0-beta.3

• Use returnType: "html" as documented in beta.1 release: https://github.com/11ty/eleventy-img/releases/tag/v6.0.0-beta.1
• Support htmlOptions.imgAttributes and htmlOptions.pictureAttributes in Image HTML Transform. Preferred to previous defaultAttributes object.

Full v6 Milestone: https://github.com/11ty/eleventy-img/milestone/22?closed=1
Full Changelog: v6.0.0-beta.2...v6.0.0-beta.3

Prerelease: Eleventy Image v6.0.0-beta.2

• Fix issue with ignore attribute not being respected when nested inside of picture <picture><img eleventy:ignore> related to #214

Full v6 Milestone: https://github.com/11ty/eleventy-img/milestone/22?closed=1
Full Changelog: v6.0.0-beta.1...v6.0.0-beta.2

Prerelease: Eleventy Image v6.0.0-beta.1

• returnType: "html" option will return the generated HTML directly instead of the metadata object #267
  • htmlOptions: {} are options passed to the generateHTML function
• Output format filtering (opt-out with formatFiltering option). Filters out formats that do not support animation or transparency automatically.
  • Animation friendly formats #260
  • Transparency friendly formats #105
• Adds errorOnFail: true option to avoid throwing an error when image processing fails (and failing your build) #225 See also the eleventy:optional attribute below.
• Keep ICC profiles by default to retain all the colors of Display-P3 and AdobeRGB images #244
• Adds new transform hook for running your own sharp customizations #52 (comment) (can be used to add custom cropping!)
• Improved error messaging when incorrectly using the default export with eleventyConfig.addPlugin #263
• Concurrency autoscales per machine resources (between 8 min and 16 max) #258
• Upgrade eleventy-fetch dependency to use platform native fetch and work better with caching on remote urls, consistency on file names with sync methods #252 #262 #146
• Support full URLs in urlPath option #239

generateHTML

• Missing sizes error relaxed when using loading="lazy" HTML, swap to use sizes="auto" instead #207
• New generateHTML option (also available via htmlOptions) forfallback: "smallest" to choose smallest image for <img> fallback and width/height dimensions #265 #129

Transform Method

• Adds eleventy:optional HTML attribute so that errors in image processing will not fail the build (in different ways) #259
  1. Remove src attribute
  2. Leave as-is
  3. Replace with a transparent Data URI
• Decode file name paths #253
• Support <picture> transformations #214
• Preserve attributes on img and picture elements #214 (comment) #241 #243 #251
• Reuse existing <img width> attribute (if single integer) as eleventy:widths value #234
• Fix inconsistent <picture> usage when formats were filtered #242
• Fix for relative references when using permalinks with non-index.html file names #236

Full Milestone: https://github.com/11ty/eleventy-img/milestone/22?closed=1
Full Changelog: v5.0.0...v6.0.0-beta.1

Fast-follow v6.0.0-beta.2 already released: https://github.com/11ty/eleventy-img/releases/tag/v6.0.0-beta.2

Eleventy Image v5.0.0

Full Milestone: https://github.com/11ty/eleventy-img/milestone/21?closed=1
Full Changelog: v4.0.2...v5.0.0

Install / Upgrade

npm install @11ty/eleventy-img@latest

What's Changed

• Works great with the brand new Eleventy v3.0.0 release: https://github.com/11ty/eleventy/releases/tag/v3.0.0
• Ships new Transform method for automatic Image transformation: https://www.11ty.dev/docs/plugins/image/#optimize-images-on-request (including on-request transformation for local development) #223
• Fix: Transform method ignores data: URIs by default #238
• Fix for #220 where SVG as broken because the Buffer is Uint8Array. by @maliMirkec in #221
• Performance improvement: Avoid utf8 encoding binary image files in getHash. by @fqueze in #226

New Contributors

• @maliMirkec made their first contribution in #221
• @fqueze made their first contribution in #226

Eleventy Image v5.0.0-beta.10

• Fixes issue with on-request image optimization plugin double decoding URLs.

Eleventy Image v4.0.0

Full Milestone: https://github.com/11ty/eleventy-img/milestone/20?closed=1
Full Changelog: v3.1.8...v4.0.0

Install / Upgrade

npm install @11ty/eleventy-img@latest

What's Changed

• BREAKING Node.js minimum is now 18+.
• Adds fixOrientation option (default: false) to rotate images to ensure correct orientation by @nosecreek in #158
• Adds minimumThreshold (default: 1.25) option to ensure original size is included if smaller than largest specified width by threshold amount, help from @JaredReisinger in #190
• Adds new Eleventy Transform plugin (compatible with Eleventy v3.0.0-alpha.5 or newer) for zero-configuration image optimization #208
• Fix incorrectly large reported height for animated gifs by @Gyanreyer in #182
• Make gif eligible for lowest priority source by @GHF in #195
• Bake input orientation into output image by @GHF in #194
• Use srcset and sizes on img element in picture by @adamwolf in #191
• Create directories on demand when writing images to disk by @danburzo in #176

New Contributors

• @Gyanreyer
• @nosecreek
• @GHF
• @adamwolf
• @JaredReisinger
• @danburzo

Eleventy Image v3.1.8: `svgShortCircuit: "size"`

Full Changelog: v3.1.0...v3.1.8

Adds support for the new svgShortCircuit: "size" option (with svgCompressionSize: "br" to use Brotli compressed sizes for comparison).

Read more: Eleventy Image: Options for SVG