Responsive images

[ascorbic]

Summary

Implements opinionated best practices in Astro Image, generating srcset, sizes and styles automatically.

---
import { Image } from "astro:assets"
import rocket from "./rocket.jpg"
---
<Image src={rocket} width={800} height={600} layout="responsive" />

Links

• Rendered RFC
• Stage 2 Proposal
• Stage 1 Proposal

[Princesseuh]

This is a technical detail, but it might be the perfect time to add ImageTransform to the interfaces we allow users to extend (in packages/astro/src/types/public/extendables.ts in next) so that image services can define some other props they support.

[ascorbic]

I've updated the implementation details part of the RFC based on things I've discovered while prototyping.

[carlcs]

Hey! I‘m excited to see work being picked up again on the image components. I read the rfc and don’t really understand how values for the sizes attribute are created when „responsive“ layout is used. Is there JS being injected or how does the component know how large the image is show at different breakpoints?

[ascorbic]

@carlcs It generates a sizes attribute based on the assumption that it's the full width of the screen when downsized. You'd need to pass your own if this is incorrect.

[carlcs]

@ascorbic that‘s perfect if we can still set sizes manually! You might want to change docs a bit because this part is a bit misleading.

		 * The following `<Image />` component properties should not be used with responsive images as these are automatically generated:
		 * 
		 * - `densities`
		 * - `widths`
		 * - `sizes` 		 

[ascorbic]

@carlcs withastro/astro#12482