impossible to get srcset working when using Image Optimization with @astrojs/vercel ?

[anthonyhexium]

Astro Info

Astro                    v4.5.12
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   server
Adapter                  @astrojs/vercel/serverless
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Hello 👋

First, I don't know if this is a bug or a misunderstanding of the documentation.

What I am trying to achieve is to get the image optimized depending of the screen size (exactly how next/image does). So I am pretty satisfied as soon as I use built-in image optimization. As you can see below I get all my srcset 👍

<img src="/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=1200&amp;h=600&amp;f=webp" 
srcset="/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=384&amp;f=webp 384w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=640&amp;f=webp 640w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=750&amp;f=webp 750w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=828&amp;f=webp 828w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=1080&amp;f=webp 1080w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=1200&amp;h=600&amp;f=webp 1200w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=1200&amp;h=600&amp;f=webp 1920w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=1200&amp;h=600&amp;f=webp 2048w, 
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&amp;w=1200&amp;h=600&amp;f=webp 3840w" data-image-component="true" 
alt="Test for astro" style="max-width: 600px; object-fit: cover;" width="1200" height="600" loading="lazy" decoding="async" data-astro-source-file="/home/anthonyhexium/withastro-astro-nrkwdl/node_modules/astro/components/Image.astro" data-astro-source-loc="38:2">

However, if I uncomment the configuration around vercel adapter, I don't see anymore these optimizations (even using sharp). And even when it's live.

Here is an extract of the HTML

<img src="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1200x600%2F668ce2e67d%2Fstrapi-cms.png&amp;w=1200&amp;q=75" alt="Image de présentation du CMS Strapi avec le logo" widths="384,640,750,828,1080,1200,1920,2048,3840" style="max-width: 600px; object-fit: cover;" width="1200" height="600" loading="lazy" decoding="async">

Please note that here is a extract of my production project which use a distant image. However, same problem happens when I use local image.

What's the expected result?

Having the same srcset as using "native" image optimization.

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/anthonyhexium/withastro-astro-nrkwdl

Participation

• I am willing to submit a pull request for this issue.

[anthonyhexium]

Also, let me know if you want me to deploy on vercel the code provided on stackblitz.