feat(enhanced-img): add configurable image defaults and imagetools options

[blt-r]

closes #12615
closes #13085
closes #14834 (the imagetools.include option).
closes #14991

Example Usage

enhancedImages({
  // Just use avif and webp
  defaultFormats: () => 'avif;webp',

  // Mimic nextjs <Image /> default behavior
  defaultWidths: (_width, sizes) => {
    const small = '32;48;64;96;128;256;384';
    const big = '640;750;828;1080;1200;1920;2048;3840';
    const w = sizes ? `${small};${big}` : big;
    return { w };
  },

  // Configure vite-imagetools
  imagetools: {
    include: './src/**/*.{jpeg,webp,png}',
    exclude: './static/**/*',
    removeMetadata: true,
    cache: {
      dir: './node_modules/.cache/imagetools'
    }
  }
})

Ooptions

• defaultFormats(meta) => string

  • Used only for ?enhanced images.
  • Takes Metadata object from sharp.
  • Must return a ;-separated format list for imagetools format (e.g. avif;webp;jpg).

• defaultWidths(width, sizes) => { w: string; basePixels?: string }

  • Used only for ?enhanced images.
  • Takes the intrinsic width of the image and image's sizes attribute.
  • Returns imagetools width directives:
    • w: ;-separated output widths
    • basePixels (optional): enables density (x) descriptors

• imagetools?: VitePluginOptions

  • Pass-through config to vite-imagetools.

• imagetools.defaultDirectives: If URL has ?enhanced then user-provided imagetools.defaultDirectives is ignored, otherwise it is used.

---

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

• Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

[changeset-bot]

🦋 Changeset detected

Latest commit: b728595

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

This PR includes changesets to release 1 package

Name	Type
@sveltejs/enhanced-img	Minor

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

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-kit-15354-svelte.vercel.app/

[blt-r]

just rebased on main. can someone review this pls