Repository navigation
Fixes #271 - #274
Fixes #271#274
Conversation
| "sharpJpegOptions", | ||
| "sharpAvifOptions" | ||
| "sharpAvifOptions", | ||
| "cacheKey" |
There was a problem hiding this comment.
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 / 9is 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?
| const src = "../test/bio-2017.jpg"; | ||
| const cropRatio = 16 / 7; | ||
|
|
||
| async function sanitizeWidths(widths) { |
There was a problem hiding this comment.
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.
| return sanitizedWidths; | ||
| } | ||
|
|
||
| function getMaxCropWidth(originalWidth, originalHeight) { |
There was a problem hiding this comment.
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.
| } | ||
|
|
||
| await transform(sharpInstance); | ||
| await transform(sharpInstance, { ...stat }); |
There was a problem hiding this comment.
Probably better to pass a clone instead of a reference here?
|
Shipping as Thank you! |
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 (@​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 [@​sentience](https://github.com/sentience), [@​valadaptive](https://github.com/valadaptive), [@​kirthi-b](https://github.com/kirthi-b), [@​jens-struct](https://github.com/jens-struct), and [@​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. [#​351](11ty/image#351) - The package is now ESM. This is unlikely to require any changes as the Node minimum now supports `require(esm)`. [#​300](11ty/image#300) - ESM: `import Image from "@​11ty/eleventy-img"` - CommonJS friendly: `const Image = await import("@​11ty/eleventy-img")` - Upgrades sharp from v0.33 to v0.35 [#​352](11ty/image#352), [#​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. [#​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). [#​211](11ty/image#211) [#​295](11ty/image#295) - Removes the `<eleventy-image>` WebC component (use the transform method instead) [#​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 #​212](11ty/image#212 (comment)). Also [#​133](11ty/image#133), [#​183](11ty/image#183), [#​309](11ty/image#309) - New `eleventy:sizes` attribute allows overriding any `sizes` attribute in markup [#​306](11ty/image#306) - New `manualCacheKey` option to improve the cropping API [#​271](11ty/image#271) [#​274](11ty/image#274) by [@​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 [@​sentience](https://github.com/sentience) in [#​313](11ty/image#313) and [@​jornmineur](https://github.com/jornmineur) in [#​302](11ty/image#302) [#​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 ([#​298](11ty/image#298)). - Fixes `eleventy:ignore` appearing in output on `<img>` tags inside `<picture>` elements — by [@​valadaptive](https://github.com/valadaptive) in [#​303](11ty/image#303). - Decodes HTML entities on `<img src>` when read back from HTML, by [@​kirthi-b](https://github.com/kirthi-b) [#​349](11ty/image#349) [#​307](11ty/image#307) #### Internals - Swaps the debug dependency for obug ([#​356](11ty/image#356)). - Major version dependency upgrade: upgrades p-queue from v6.6 to v8.1. [#​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
@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.