Add Symfony UX Image component

[razbakov]

Q	A
Bug fix?	no
New feature?	yes
Deprecations?	no
Documentation?	yes
Issues
License	MIT

New symfony/ux-image component providing optimized responsive image components with automatic format conversion, smart cropping, and Core Web Vitals optimization.

Components

<twig:img> - Simple responsive images

• Automatic WebP conversion
• Responsive srcset/sizes generation
• Viewport-based width configuration (100vw md:80vw lg:50vw)
• Density-based srcset support (densities="1x 2x")
• Smart cropping with ratio and focal point
• Automatic preload injection for LCP optimization

<twig:picture> - Art direction support

• Breakpoint-specific aspect ratios (ratio="sm:1:1 md:16:9")
• Ratio cascading (like CSS) - ratios inherit to larger breakpoints
• Exclusive media queries for correct aspect ratio selection
• Different crops per viewport size

Usage Examples

{# Simple responsive image #}
<twig:img
    src="/images/hero.jpg"
    alt="Hero"
    width="100vw sm:50vw md:400px"
    ratio="16:9"
    :preload="true"
/>

{# Art direction - different aspect ratios per breakpoint #}
<twig:picture
    src="/images/banner.jpg"
    alt="Banner"
    width="100vw md:80vw"
    ratio="sm:1:1 md:16:9"
/>

[tibobaldwin]

Thank you very much for adding this new component.

[smnandre]

Yeah that's very nice! Please let me the week (work work work) before i'm starting a full review...

... just to anticipate, would you be OK to trim down the component to the strict bare minimum, and then we build upon it ? (not saying it's not perfect yet, not enough time to review as I said 😅 )

Anyway... thank you for this wonderful contribution.

[WebMamba]

Pioufffff thanks a lot! It's a lot of work! 🥵 What do you think about starting a bit more simple and then iterate.
What do you think about starting just with those 3 points:

• Automatic WebP conversion
• Responsive srcset/sizes generation
• Viewport-based width configuration (100vw md:80vw lg:50vw)

Do you think we can have two components one image component and one picture component ?

[WebMamba]

Hummm that is something that we should discuss 🤔