Is it possible to configure a Next.js application to automatically add IPTC data on all website images by customizing the Image Optimization step?

Question

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?

Answer 1

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

• It is possible to turn off optimization per image or for all images to keep original file metadata.
• Another possibility is to manually create different sizes of the image and use a cutom loader to serve them.
• If the goal is to have images IPTC metadata in Google indexation it is possible to use Google structured data in pages where the images are used.

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

Answer 2

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!