0

I have a Next.js 13 website running with proprietary images.

Some of them have IPTC Photo Metadata but Next.js Image optimization by default is removing them.

Is it possible to customize Next.js app to keep them or even better to add a predefined set of IPTC metadata on all images of the website by customizing the optimization step?

I tried to look in Next.js Image Component API documentation I see that sharp can read IPTC Metadata so I imagine it could be possible to customize the image optimization step to add IPTC metadata?

Popoto
  • 153
  • 5

2 Answers2

1

I haven't tested this, but it looks like you could use the next/image unoptimized parameter to avoid all processing of the image, which presumably would leave the metadata in-place.

Integrating support via Sharp's withMetadata() function has been suggested but not built. I suggest that you add your vote to the issue if you would like to see it added to next/image. I just did!

Brendan Quinn
  • 2,059
  • 1
  • 19
  • 22
  • Yes (I tested it) you can use the unoptimized property for image, in this case it will keep the metadata in place but you loose the srcset generation and image api usage. One possible alternative could be to manually generate all the [desired sizes](https://nextjs.org/docs/api-reference/next/image#device-sizes) for the image and use a custom loader to reference them but this is only viable for a couple of images. Best would be to have an option in image optimizer, I upvoted for the [the idea](https://github.com/vercel/next.js/discussions/39249) thanks for the link. – Popoto Jan 03 '23 at 05:06
0

In current version of Next.js (13.1.1) it is not possible to keep Image IPTC metadata with image optimization.

Sharp can be used to keep image metadata using withMetadata().
You can vote for this feature request here.

Popoto
  • 153
  • 5