Image optimizer/sharp: option for including metadata

[julianklotz]

Describe the feature you'd like to request

I’m dealing with photos by different photographers and it is important to me that meta data is included in image files, so it’s easier to trace back copyright, photographer, etc.

This is supported by sharp using withMetadata(). This can be used to include metadata.

Describe the solution you'd like

I’d like to see a configuration option in next that allows me to hook in between sharp('input.jpg') and saving the file (.toFile('output-with-metadata.jpg). This kind of configuration option allows even more fine-grained control, if necessary.

Sharp’s API is chainable, so other calls than withMetadata() are possible, too.

Something like:

imageOptions: (img) => {
    return img.withMetadata()
    // or: return img.withMetadata({ exif: IFD0: { Copyright: 'Wernham Hogg' }})
}

Describe alternatives you've considered

There’s no viable alternatives other than not using next/image.

[Popotojs]

I think an option to keep the original metadata of the image would be very useful.
Google uses IPTC metadata in Google image search results.

Adding an option to keep the metadata should not be too intrusive:

• Add an option withMetadata in next\packages\next\src\shared\lib\image-config.ts

export type ImageConfigComplete = {
  ...
+  /** @see [WithMetadata](https://nextjs.org/docs/api-reference/next/image#withMetada) */
+  withMetadata: boolean
}
...
export const imageConfigDefault: ImageConfigComplete = {
...
+  withMetadata: false,
}

• Add call to sharp withMetadata() in next\packages\next\src\server\image-optimizer.ts

withMetadata:
Include all metadata (EXIF, XMP, IPTC) from the input image in the output image. This will also convert to and add a web-friendly sRGB ICC profile unless a custom output profile is provided.

export async function optimizeImage({
  buffer,
  contentType,
  quality,
  width,
  height,
  nextConfigOutput,
+  withMetadata,
}: {
  buffer: Buffer
  contentType: string
  quality: number
  width: number
  height?: number
  nextConfigOutput?: 'standalone'
+  withMetadata?: boolean
}): Promise<Buffer> {
  let optimizedBuffer = buffer
  if (sharp) {
    // Begin sharp transformation logic
    const transformer = sharp(buffer)
+
+    if (withMetadata) {
+      transformer.withMetadata()
+    }

    transformer.rotate()
...}
}

Note that there is an alternative, you can add the image metadata in Google structured data in your page. But it would be nice to have IPTC data in file in case it is dowloaded or used elswhere.

[GabenGar]

Consider using the hashes of the files for authorship instead. Storing metadata directly in the files will never work because it can be easily edited/stripped out by a third party, whereas the hashes are way harder to break in a timely manner. Not to mention way faster and easier to store and map on per-author basis.

[FezVrasta]

I’m dealing with AI-generated content and, under the EU AI Act, I’m required to include C2PA provenance tags and related disclosures. This compliance requirement is very important to me.