Responsive Image view component

[brendt]

<x-image src="/resources/img/blog/responsive/parrot.jpg" />

Will generate a responsive image:

<img src="/resources/img/blog/responsive/parrot.jpg" srcset="/resources/img/blog/responsive/parrot-1214x809.jpg 1214w, /resources/img/blog/responsive/parrot-858x572.jpg 858w, /resources/img/blog/responsive/parrot-1487x991.jpg 1487w, /resources/img/blog/responsive/parrot-1920x1280.jpg 1920w, /resources/img/blog/responsive/parrot-1717x1144.jpg 1717w" sizes="" alt="" />

[vsergiu93]

Hey @brendt, I'm a bit confused by this issue, the scrset attribute should somehow be written by the developer, they know what sizes they have and how many versions they have, we can't really make assumptions here, or am I missing something?

Unless you want to build some sort of abstraction for users of this component, then I guess we could look at something like nuxt-image, there for example you set up the sizes prop and the module generates the proper html for it with all the goodies a plus is that the module is even able to generate the actual image files dynamically if they do not exist yet.

In short, I'm not sure if much needs to done in this issue, maybe just making sure that users of this component can indeed specify the srcset, honestly I would not autogenerate.

[brendt]

Remember that tempest views are parsed, so let's say we call it <x-responsive-image src="$path">

This component will do a couple of things:

• Take the original path, and render responsive variations for it (possibly async or in the background)
• Render a normal img tag with the srcset defined.

Sizes are optional for responsive images to work. I wrote about it here: https://stitcher.io/blog/responsive-images-done-right

[vsergiu93]

Hey @brendt, thanks for the explanation, I had a look at the link you mentioned, interesting read, it actually helps me a bit at work.

I also wonder if this should be part of the framework though, wouldn't it make more sense to come as a first party plugin/module?

I want to work on this, but please, do not assign it to me, I'm quite busy at work and also to be honest, so is best if we leave this up for grabs.