<twig:img> responsive images inspired by <NuxtImg>

[razbakov]

The Symfony Responsive Image Bundle is designed to address modern performance requirements, particularly Core Web Vitals. Inspired by NuxtImg

Would it be a good idea to add this to Symfony UX?

[Kocal]

That's would be a great addition, I know @WebMamba already started to work on something, but he's gone to travel the world ⛵

[razbakov]

@Kocal glad to hear that. What would be the next steps? Changing namespaces and creating PR?

[smnandre]

Wow

I remember giving Matheo some code i made a few years back on that topic... and listed all the features a "UX Image" component should have imho...

Well... your bundle does absolutely all of that, it's amazing :)

Let's open a PR and work on it!

Symfony\UX\Image would be the perfect PSR namespace !

Also we use the "now-recommanded" bundle structure .. probably simpler if you change it before opening the PR ?

[smnandre]

Hi @razbakov : still motivated about this? I have to admit this was pretty high on my to-do list for UX and I'd love to work with your proposal here...

The alternative is to start from scratch. Well... from the code/samples I showed the team almost a year ago, but it was still taken from an old project I did years ago, even before TwigComponent existed so... We'd start smaller --that can be in the "pros" column-- but we would have to redo a lot of things you already did... and redoing open source work is definitely something I'd put in the "cons" column 😅

I'm open to any suggestion: we can give you guidance/help, or dive deep and help you make this great start into a superb UX Image component. Or anything in between.

[tibobaldwin]

@razbakov Your bundle looks really great! I'm sure we can build something interesting with it.
As @smnandre mentioned, it might be better to start with something smaller and then improveit step by step.
I love section with the providers.

[razbakov]

I started working on PR. @smnandre maybe we shall convert it back to issue? :)

[razbakov]

@smnandre #3188

[alexander-schranz]

Another example of a similar issue in Sulu we have a get_image twig extension. It mostly used that every image tag is lazy by default, outputs also webp and so on by a predefined config and make writing picture tags easier.

https://github.com/sulu/web-twig/blob/2.6/docs/image.md

It's task is not about resizing, ... as all formats and its Urls are already defined in Sulu already in the object array. Sure not suitable for static usage so, but some inspiration around this.

I would see resizing, convert to web and so on separatly, and would recommend only concentrate how you can create img, picture tags easier in a first step.

There may could be keep things in mind to support rendering URLs instead for external services like:

• https://rokka.io/ (by @liip)
• https://www.cloudimage.io/

There is also a standard about image resizing https://iiif.io/api/image/3.0/. So later a iiif compatible endpoint / controller or server can be used instead. Rokka supports also the iiif standard for image manipulation for example. And I think also https://imgproxy.net/ which is a self hosted solution.

Mostly the case why we never used https://github.com/liip/LiipImagineBundle was that it works only good for static images not for dynamic or images which may are on S3 or other external resources.

Think the tricky part for such component is to support even External Images / External Image URL providers and not only concentrate on Static Images.

Also the thing why we never used https://github.com/liip/LiipImagineBundle as it was only suitable for Static cases.

Hope I could give you some views from another perspective on such component.

[smnandre]

I would see resizing, convert to web and so on separatly, and would recommend only concentrate how you can create img, picture tags easier in a first step.

It was my first idea too