ImageResponse img src format supported?
Unanswered
ZgazenaMacka posted this in #help-forum
What formats are supported? I just tested with webp, png and jpeg, and it only rendered png image. Is there a way to use either jpeg or webp in ImageResponse img element?
7 Replies
@ZgazenaMacka What formats are supported? I just tested with webp, png and jpeg, and it only rendered png image. Is there a way to use either jpeg or webp in ImageResponse img element?
[webp is not supported](https://github.com/vercel/satori/issues/273). [i can use jpeg just fine](https://og-playground.vercel.app/?share=RY_BisMwDER_xQiWXkztXfawmGRv_YMec0liJXZxYhOrTYPxv9dNCz2JJ2ZGmgS91wgKKm1vLNLmsE6JGbSjIcUO31J-HThbrSbzQW1jcO2mWAODw3sDLOf_ZmasstPI4tLXDRiiEJUQRdij8U4fey9-pDxeAo7FsUfWqWzy-9wbREmqRHmnTODgA1k_R1AJdguoPyk5vCygfp-gsbuOoIbWReSAk7_Y8xaetWjdqeQMfqbT1KEGRcsVMwdqu6Iw6Jxf_eI05Ac)
@joulev [webp is not supported](<https://github.com/vercel/satori/issues/273>). [i can use jpeg just fine](<https://og-playground.vercel.app/?share=RY_BisMwDER_xQiWXkztXfawmGRv_YMec0liJXZxYhOrTYPxv9dNCz2JJ2ZGmgS91wgKKm1vLNLmsE6JGbSjIcUO31J-HThbrSbzQW1jcO2mWAODw3sDLOf_ZmasstPI4tLXDRiiEJUQRdij8U4fey9-pDxeAo7FsUfWqWzy-9wbREmqRHmnTODgA1k_R1AJdguoPyk5vCygfp-gsbuOoIbWReSAk7_Y8xaetWjdqeQMfqbT1KEGRcsVMwdqu6Iw6Jxf_eI05Ac>)
Yeah noticed that. Now the second problem is that I already have 200 images uploaded to firebase storage, all of them are webp. Do you maybe know a solution to for an example fetch the firebase webp image and convert it to JPEG to use in ImageRespons?
I'm trying to do a workaround of this problem I posted on stackoverflow.
https://stackoverflow.com/questions/78117711/opengraph-image-is-not-visible-when-link-is-shared-to-facebook-mobile-app-but-w
And by the way from what I can see IMDB's shared link works fine on both devices, just the mobile version is cropped which is fine
https://stackoverflow.com/questions/78117711/opengraph-image-is-not-visible-when-link-is-shared-to-facebook-mobile-app-but-w
And by the way from what I can see IMDB's shared link works fine on both devices, just the mobile version is cropped which is fine
American Crow
Two things which come to my mind reading this:
1. A Cdn for the firebase storage (i never used firebase). Some CDNs support format requesting e.g
2 Vercel OG Image Generation. Basically an edge function to create on the fly OG images. It can take another image as input or just text https://vercel.com/docs/functions/og-image-generation
1. A Cdn for the firebase storage (i never used firebase). Some CDNs support format requesting e.g
sunshine.webp?format=jpg2 Vercel OG Image Generation. Basically an edge function to create on the fly OG images. It can take another image as input or just text https://vercel.com/docs/functions/og-image-generation
@ZgazenaMacka Yeah noticed that. Now the second problem is that I already have 200 images uploaded to firebase storage, all of them are webp. Do you maybe know a solution to for an example fetch the firebase webp image and convert it to JPEG to use in ImageRespons?
you have an interesting problem there, and i honestly don't know how. there are plenty of solutions converting png/jpeg to webp but there are no solutions doing the reverse that i know of. sorry i can't be of help here
It is really easy to compress and convert the image from whatever format to either webp, png or jpeg with CompressorJS, but that works only when you upload the blob, won't work with link from firebase.
Alright thank you for your time. I think it's easier downloading all webp images from folder, import it in window application and bulk convert it to jpeg then reupload for each post, will take hour or two since the form is pretty well setup.
Alright thank you for your time. I think it's easier downloading all webp images from folder, import it in window application and bulk convert it to jpeg then reupload for each post, will take hour or two since the form is pretty well setup.
BTW, I managed to setup the whole imageResponse, generating a horizontal oriented image that will be shown on all devices when link is shared, in that horizontal form I will put the movie cover, title etc...
Here's the example.
https://www.groblje-horora.com/recenzije/kratki-pregled-pogledanog-xxix-1234
Here's the example.
https://www.groblje-horora.com/recenzije/kratki-pregled-pogledanog-xxix-1234