Experimental Assets: Images do not seem to be optimized

[fofiu]

What version of astro are you using?

2.5.1

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

I am using the new experimental optimized asset support and the Vercel adapter and the image size is 2400.

If I import an image from ./src/assets and I add it to the page

<Image src={monogramLogo.src} alt="Monogram Logo" width={150} height={150} />

the image optimization doesn't seem to take place.

On localhost it converts it down to 640 at best, on Vercel it doesn't seem to optimize anything.

This is my Vercel adapter settings:

adapter: vercel({
	analytics: true,
	imageService: true,
	imageConfig: {
		sizes: [150, 320, 640, 1280]
	}
})

Link to Minimal Reproducible Example

https://astro-starter-kit-git-test-vercel-image-optimization-monogram1.vercel.app

Participation

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

[Princesseuh]

Please share your code.

[fofiu]

@Princesseuh Here's the repo: https://github.com/monogramdesign/astro-starter-kit
Thank you for looking into this.

[Princesseuh]

I'm not sure if that's your issue, but you're passing the wrong value to src, you're supposed to pass the entire import, not just the src, as shown here https://docs.astro.build/en/guides/assets/#image--astroassets

<Image src={monogramLogo} alt="Monogram Logo" width={150} height={150} />

I'll investigate further on Monday, sorry for the inconvenience!

[fofiu]

Ah, that was there from trying a couple of ways to add the image. I removed the .src, same behavior.

[Princesseuh]

Sorry for the late investigation, you have the wrong property name. It's imagesConfig, not imageConfig (notice the plural). It was working, but it was using the default settings, which don't allow 150 as a valid width, so it fell back to 600

I'll fix the docs