#next/og webp support

1 messages · Page 1 of 1 (latest)

sweet saffronBOT
#

Hi @lost pewter. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I'm sorry, but according to the most recent and relevant knowledge sources, Next.js does not support using .webp files for OpenGraph (OG) image generation via the opengraph-image file convention. Only .jpg, .jpeg, .png, and .gif formats are officially supported. Attempts to use .webp files are silently ignored or result in errors, as confirmed by both the documentation and user reports. This is a known issue and has been clarified in the documentation and related GitHub issues [opengraph-image and twitter-image](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image) Docs: Incorrect .webp support claim for OpenGraph images [bug] opengraph-image.webp is silently ignored.

There is currently no documented workaround to enable .webp support for OG image generation using the file convention. If you attempt to use a .webp file, you may encounter errors such as "Image size cannot be determined. Please provide the width and height of the image," or the image will simply not be used.

Recommendation:
Convert your .webp images to one of the supported formats (.jpg, .jpeg, .png, or .gif) for use as OpenGraph images in Next.js.

If you need to generate OG images programmatically, you can use a JavaScript/TypeScript file (e.g., opengraph-image.tsx) and export the required metadata, but the output image itself must still be in a supported format [opengraph-image and twitter-image](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image).

#

If you need .webp support, you may want to follow the related GitHub issues for updates, but as of now, there is no official workaround.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@lost pewter Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the provided knowledge sources, there is currently no official workaround to enable .webp support for Open Graph (OG) image generation in Next.js using the opengraph-image file convention. Only .jpg, .jpeg, .png, and .gif formats are supported. Attempts to use .webp files are either ignored or result in errors, as confirmed by user reports and GitHub issues [Docs: Incorrect .webp support claim for OpenGraph images](https://github.com/vercel/next.js/issues/81529) [bug] opengraph-image.webp is silently ignored.

If you try to use a .webp file, you may encounter errors such as "Image size cannot be determined. Please provide the width and height of the image." The recommended approach is to convert your .webp images to one of the supported formats before using them for OG image generation.

If you need to generate OG images programmatically, you can use a JavaScript/TypeScript file (e.g., opengraph-image.tsx) and ensure the output is in a supported format, but direct .webp support is not available [opengraph-image and twitter-image](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image).

Summary:
There is no documented workaround for .webp OG images in Next.js at this time. Use .jpg, .jpeg, .png, or .gif instead.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@lost pewter Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

I'm sorry, but the provided knowledge sources do not contain any information about the GitHub pull request at https://github.com/linebender/resvg/pull/747 or its relevance to Next.js. Therefore, I cannot answer your question based on the available documentation. If you have a question specifically about Next.js or its image/OG image handling, please let me know!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: