Skip to content

Fixes #271 - #274

Merged
zachleat merged 1 commit into
11ty:mainfrom
jens-struct:transform-with-stats
Jul 24, 2026
Merged

zachleat merged 1 commit into
11ty:mainfrom
jens-struct:transform-with-stats

Conversation

@jens-struct

@jens-struct jens-struct commented Jan 17, 2025 •

Copy link
Copy Markdown
Contributor

@zachleat This is the PR for #271, it optimizes the js api for cropping.

I left some comments in the code to start some discussions.

optimize js api for cropping
Comment thread src/image.js
"sharpJpegOptions",
"sharpAvifOptions"
"sharpAvifOptions",
"cacheKey"

@jens-struct jens-struct Jan 17, 2025 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of this we could duplicate the logic of https://github.com/11ty/eleventy-img/blob/main/src/image.js#L142 here, but this would mean a not pretty workaround like:

    transform: {[cacheKey]: function(sharp, stats) {
      sharp.resize({
        width: stats.width,
        height: Math.floor(stats.width / cropRatio),
        fit: Sharp.fit.cover,
        position: Sharp.strategy.entropy,
      });
    }}[cacheKey],

where:

  cacheKey: 16 / 9

is way cleaner if you ask me 😅 So i arrived at the solution i pushed here, to be able to influence the hash part of the filename if needed. Please see the sample-crop.js for the usecase.

Also the naming of this option could maybe be improved, i.e. hashKey?

Comment thread sample/sample-crop.js
const src = "../test/bio-2017.jpg";
const cropRatio = 16 / 7;

async function sanitizeWidths(widths) {

@jens-struct jens-struct Jan 17, 2025 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This removes all widths that would cause upscaling of the original image.

I could probably go a step further and try to build this kind of sanitization into 11ty image.

Comment thread sample/sample-crop.js
return sanitizedWidths;
}

function getMaxCropWidth(originalWidth, originalHeight) {

@jens-struct jens-struct Jan 17, 2025 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gets the max width for cropping without upscaling the original image.

I guess this is also a nice thing to have in the core? Although an opt-in through an option is probably a good idea, as it is likely not the wanted behavior for all usecases.

@jens-struct
jens-struct marked this pull request as ready for review January 17, 2025 18:05
Comment thread src/image.js
}

await transform(sharpInstance);
await transform(sharpInstance, { ...stat });

@jens-struct jens-struct Jan 17, 2025 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably better to pass a clone instead of a reference here?

@zachleat
zachleat merged commit fc1cfb7 into 11ty:main Jul 24, 2026
@zachleat

Copy link
Copy Markdown
Member

Shipping as manualCacheKey and a limited set of width, height, format passed into the transform callback in Image v7.0.0-alpha.5.

Thank you!

@zachleat zachleat added this to the Eleventy Image v7.0.0 milestone Jul 24, 2026
robbevp pushed a commit to robbevp/website-robbevanpetegem that referenced this pull request Oct 17, 2026
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@11ty/eleventy-img](https://github.com/11ty/image) | dependencies | major | [`^6.0.4` -> `^7.0.0`](https://renovatebot.com/diffs/npm/@11ty%2feleventy-img/6.0.4/7.0.0) |

---

### Release Notes

<details>
<summary>11ty/image (@&#8203;11ty/eleventy-img)</summary>

### [`v7.0.0`](https://github.com/11ty/image/releases/tag/v7.0.0): Image v7.0.0: The Memory Efficiency Release

[Compare Source](11ty/image@v6.0.4...v7.0.0)

**TL;DR: ESM-only, Node 22+ minimum, and huge memory and performance wins over v6.**

Thank you to [@&#8203;sentience](https://github.com/sentience), [@&#8203;valadaptive](https://github.com/valadaptive), [@&#8203;kirthi-b](https://github.com/kirthi-b), [@&#8203;jens-struct](https://github.com/jens-struct), and [@&#8203;jornmineur](https://github.com/jornmineur) for their contributions to this release!

Issue Milestone: https://github.com/11ty/eleventy-img/milestone/25?closed=1
Full Changelog: [v6.0.4...v7.0.0](11ty/image@v6.0.4...v7.0.0)

#### Breaking changes

- Node 22 or newer is required. This matches Core v4. [#&#8203;351](11ty/image#351)
- The package is now ESM. This is unlikely to require any changes as the Node minimum now supports `require(esm)`. [#&#8203;300](11ty/image#300)
  - ESM: `import Image from "@&#8203;11ty/eleventy-img"`
  - CommonJS friendly: `const Image = await import("@&#8203;11ty/eleventy-img")`
- Upgrades sharp from v0.33 to v0.35 [#&#8203;352](11ty/image#352), [#&#8203;289](11ty/image#289)
  - You can review the upstream [v0.34](https://sharp.pixelplumbing.com/changelog/#v0340---4th-april-2025) and [v0.35](https://github.com/lovell/sharp/releases/tag/v0.35.0) changelogs.

And a few breaking changes that are unlikely to affect most projects:

- If you use the Transform method and set both `width` and `eleventy:widths` on the same element, note that `eleventy:widths` now takes priority. [#&#8203;314](11ty/image#314)
- `Image.statsSync` and `Image.statsByDimensionsSync` have been removed after being deprecated in 2024. Use the `statsOnly` feature instead, like so: `await Image(src, { statsOnly: true, /* …options */ })`. Helpful error messaging is provided if your project uses these (so don’t worry about it until you run into it, they weren’t commonly used). [#&#8203;211](11ty/image#211) [#&#8203;295](11ty/image#295)
- Removes the `<eleventy-image>` WebC component (use the transform method instead) [#&#8203;305](11ty/image#305)

#### New Features

- New passthrough format (usage: `formats: ["passthrough"]`) copies and uses the source file directly, while still adding width and height attributes to the generated output. Useful when you've already optimized your source images and want to skip the optimization pipeline — about 20× faster in local benchmarks. [Example on #&#8203;212](11ty/image#212 (comment)). Also [#&#8203;133](11ty/image#133), [#&#8203;183](11ty/image#183), [#&#8203;309](11ty/image#309)
- New `eleventy:sizes` attribute allows overriding any `sizes` attribute in markup [#&#8203;306](11ty/image#306)
- New `manualCacheKey` option to improve the cropping API [#&#8203;271](11ty/image#271) [#&#8203;274](11ty/image#274) by [@&#8203;jens-struct](https://github.com/jens-struct)

#### Bug Fixes

<img width="622" height="399" alt="Line chart showing memory issues in v6, better performance in v5, but far improved performance in v7" src="https://github.com/user-attachments/assets/230f3267-866f-4789-9ac4-66f60670110b" />

- Huge memory usage improvements from [@&#8203;sentience](https://github.com/sentience) in [#&#8203;313](11ty/image#313) and [@&#8203;jornmineur](https://github.com/jornmineur) in [#&#8203;302](11ty/image#302) [#&#8203;319](11ty/image#319) (v6 had issues, but we’ve eclipsed v5 performance with this release 🏆)
- Removes the `w` descriptor when only one size is used in srcset, fixing valid HTML output when only one width is used and no sizes is present ([#&#8203;298](11ty/image#298)).
- Fixes `eleventy:ignore` appearing in output on `<img>` tags inside `<picture>` elements — by [@&#8203;valadaptive](https://github.com/valadaptive) in [#&#8203;303](11ty/image#303).
- Decodes HTML entities on `<img src>` when read back from HTML, by [@&#8203;kirthi-b](https://github.com/kirthi-b) [#&#8203;349](11ty/image#349) [#&#8203;307](11ty/image#307)

#### Internals

- Swaps the debug dependency for obug ([#&#8203;356](11ty/image#356)).
- Major version dependency upgrade: upgrades p-queue from v6.6 to v8.1. [#&#8203;120](11ty/image#120) This dependency became [ESM-only in v7](https://github.com/sindresorhus/p-queue/releases/tag/v7.0.0) and [Node 18+ in v8](https://github.com/sindresorhus/p-queue/releases/tag/v8.0.0).

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS42MS4wIiwidXBkYXRlZEluVmVyIjoiNDEuNjEuMCIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->

Reviewed-on: https://git.robbevp.be/robbevp/website-robbevanpetegem/pulls/515
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants