Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task
anthonyhexium opened this issue Mar 31, 2024 · 1 comment · Fixed by #10756
Closed
1 task
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: assets Related to the Assets feature (scope)

Comments

@anthonyhexium
Copy link

anthonyhexium commented Mar 31, 2024

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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Mar 31, 2024
@anthonyhexium
Copy link
Author

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

@anthonyhexium anthonyhexium changed the title impossible to get srcset working when using Image Optimization with @astrojs/ vercel ? impossible to get srcset working when using Image Optimization with @astrojs/vercel ? Apr 1, 2024
@matthewp matthewp added feat: assets Related to the Assets feature (scope) - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs triage Issue needs to be triaged labels Apr 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: assets Related to the Assets feature (scope)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants