impossible to get srcset working when using Image Optimization with @astrojs/vercel ? #10623
Description
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&w=1200&h=600&f=webp"
srcset="/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=384&f=webp 384w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=640&f=webp 640w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=750&f=webp 750w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=828&f=webp 828w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=1080&f=webp 1080w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=1200&h=600&f=webp 1200w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=1200&h=600&f=webp 1920w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=1200&h=600&f=webp 2048w,
/_image?href=%2F%40fs%2Fhome%2Fanthonyhexium%2Fwithastro-astro-nrkwdl%2Fsrc%2Fpages%2Fstrapi-cms.png%3ForigWidth%3D1200%26origHeight%3D600%26origFormat%3Dpng&w=1200&h=600&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&w=1200&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.