feat(sharp): add kernel option to image service config

[mark-ignacio]

Changes

Adds a kernel option to the default sharp image service to allow selecting something other than the default lanczos3. Resize kernel selection can be quite noticeable depending on various characteristics of the source image - you can see some examples in https://johncostella.com/magic/

export default defineConfig({
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp',
      config: {
        kernel: "mks2021"
      }
  }
})

Testing

Tested manually using pnpm link to a separate repository and adding a dumb little console.log(), modifying the kernel property inside of config.

kernel: undefined
11:36:43 [200] /_image 44ms
kernel: undefined
11:36:43 [200] /_image 33ms
[...]
kernel: mks2021
11:34:33 [200] /_image 83ms
kernel: mks2021
kernel: mks2021
11:34:33 [200] /_image 96ms
11:34:33 [200] /_image 68ms

Docs

The sharp image service isn't really documented in the docs, so uh...

/cc @withastro/maintainers-docs for feedback!

[changeset-bot]

🦋 Changeset detected

Latest commit: 80f6b52

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

Merging this PR will not alter performance

✅ 9 untouched benchmarks

---

_{Comparing mark-ignacio:sharp-config (80f6b52) with main (967f69d)}

[Princesseuh]

That's ok with me! I think people will inevitably ask to be able to set it per image, but I'd rather we start with just this for now.

[sarah11918]

Thanks for this new feature, @mark-ignacio !

The sharp image service isn't really documented in the docs, so uh...

I'm going to tag @ArmandPhilippot in on this one, because we do document image.service (and image.service.config.limitInputPixels in our configuration reference. We say that you need to configure an entrypoint and optionally a config, but then we only document one config item. (And, I honestly don't know whether there are more that we don't.)

My gut says that we probably do want to include this alongside limitInputPixels, in which case, this would be a new JSDoc entry in the public types file, but I'll let @ArmandPhilippot and @Princesseuh make the call on that.

As for the changeset, comment below!

[sarah11918]

Lucky you, this is a minor feature so... that means time to hype! 🥳

For a minor release of a new feature, we'd usually hype it up a bit more, focusing on what a user can now do (with an example usage shown) rather than implementation details. You can see a model of this in our contributing docs:

• Quick sentence to shout "New! Shiny!" and grab people's attention without a lot of visual clutter
• describe the problem it solves or ability it unlocks and why that's cool
• show an example that people could copy into their projects right away to try it out so that it's easy for them to get started
• link to the docs for the new thing

So maybe something like... (just rough wording to get the idea of the structure across! This will likely need correcting as I don't know how to use all the relevant vocab properly)

Suggested change

	Adds kernel option to select resize algorithm in the sharp image service
	Adds a new `kernel` configuration option to select a resize algorithm in the Sharp image service
	By default, Sharp's resizes uses the `lanczos3` downsizing kernal. This property allows you to configure your default resizing algorithm with any resizing option supported by Sharp](https://sharp.pixelplumbing.com/api-resize/#resize) (e.g. `linear`, `mks2021`).
	Resize kernel selection can produce quite noticeable differences depending on various characteristics of the source image, so this gives you more control over the appearance of images on your site:
	```
	export default defineConfig({
	image: {
	service: {
	entrypoint: 'astro/assets/services/sharp',
	config: {
	kernel: "mks2021"
	}
	}
	})
	```
	This selection will apply to all images on your site, and is not configurable on a per-image basis. For more information, see [Sharps documentation on resizing images](https://sharp.pixelplumbing.com/api-resize/#resize).

(alternatively, if we do document this, then the "for more info" link should go to our own docs reference entry)

[ArmandPhilippot]

Sarah's suggestion makes sense to me!
Even if this just for Sharp and not any image service, the Configuration Reference is certainly the right place. This is not controlled in withastro/docs but in this repo. So you can update src/types/public/config.ts and add a new JSDoc comment next to image.service.config.limitInputPixels:

astro/packages/astro/src/types/public/config.ts

Lines 1301 to 1314 in 27d7ffb

	service?: ImageServiceConfig;
	/**
	* @docs
	* @name image.service.config.limitInputPixels
	* @kind h4
	* @type {number | boolean}
	* @default `true`
	* @version 4.1.0
	* @description
	*
	* Whether or not to limit the size of images that the Sharp image service will process.
	*
	* Set `false` to bypass the default image size limit for the Sharp image service and process large images.
	*/