Next/Image should take an optional, arbitrary options parameters

[EricWVGG]

Goals

Popular image CDNs are capable of all sorts of transforms and custom parameters. The best way to feed these directions to the CDN request would be via the Next/Image loader, but it only accepts a limited number of parameters.

ex.

1. have the image returned with an SEO-friendly filename
2. have the image cropped to a determined hotspot
3. use AI to return a photo with a transparent background

Non-Goals

No response

Background

My CDN is capable of doing cool stuff like serving SEO-friendly filenames, using AI to alter images on the fly, cropping to specified hotspots, etc. Currently I have to jump through some pretty crazy hoops to get this working with Next/Image. Given that I have a customer image loader, I believe that's the logical place to take advantage of these abilities.

ex. of CDN abilities:
https://imagekit.io/docs/ai-transformations

Proposal

The custom loader for my CDN works something like this…

export const loader = (
  {src, width, quality}: NextImageParams
) => {
  let cdnUrl =  src.replace(`https://sanity.io/images/xxxxxx/production`, `https://ik.imagekit.io/yyyyyy/images/__TRANSFORMS__`))
  // ^ this remaps the URL of my CMS-uploaded asset to the CDN

  const transforms = [`w-${width}`, 'f-webp', `q=${quality}`]
  cdnUrl = cdnUrl.replace('__TRANSFORMS__', `tr:${transforms.join(',')}`)
  // ^ this feeds the standard width and quality figures to the CDN, as well as a request for webp images
  
  return cdnUrl
}

With a custom options bundle, I could take greater advantage of my CDN’s capabilities. An example follows:

interface MyLoaderOptions {
  seoFilename?: string
  removeBackground?: boolean
  faceCrop?: boolean
}

export const loader = (
  {src, width, quality}: NextImageParams,
  options: MyLoaderOptions
) => {
  let cdnUrl =  src.replace(`https://sanity.io/images/xxxxxx/production`, `https://ik.imagekit.io/yyyyyy/images/__TRANSFORMS__`))

  const transforms = [`w-${width}`, 'f-webp', `q=${quality}`]

  if (options.removeBackground) {
    // trendy AI magic!
    transforms.push(`e-removedotbg`)
  }

  if (options.faceCrop) {
    // trendy AI magic!
    transforms.push(`fo-face`)
  }

  cdnUrl = cdnUrl.replace('__TRANSFORMS__', `tr:${transforms.join(',')}`)
  
  if (options.seoFilename) {
    cdnUrl = `${cdnUrl}/${options.seoFilename}`
  }

  return cdnUrl
}

// usage
import NextImage from 'next/image'

<NextImage
  src={asset.metadata.url}
  width={asset.metadata.width}
  height={asset.metadata.height}
  quality={9}
  options={{
    seoFilename: asset.metadata.uploadedFilename,
    removeBackground: true
  }}
/>

I believe that CDNs would be highly incentivized to provide their own loaders that make these abilities easily surfaced to their users. It would make Next/Image capable of magic.

Yes, I am interested in contributing.