Support variable srcset options for included images?

[stevejalim]

At the moment, when we show an image, we're just showing the original-size image uploaded to Wagtail, but Wagtail can generate image renditions in any res/size we want docs - worth a skim

I wonder whether it would be possible to create a default set of specs as srcset for any image block. When we added the Split Block (#5) I temporarily skipped over the srcset option - hence this ticket now.

Thoughts are very welcome - particularly from you @craigcook + @stephaniehobson + @alexgibson :

1. Is there an image size below which srcset variations are pointless? (ie, is it silly to try to come up with a one-size-fits srcset list?)

2. Do we need to add srcset to any other Protocol components that don't currently mention it in their reference implementation? Would it be pointless or damaging if we did?

3. Do we want to trust Wagtail (well, the very mature Python Pillow library) with auto-sizing images, or would we prefer to make the editors have to upload different image variations themselves, in order to ensure high quality images? (Different orgs have different appetites for both of these routes)

[stephaniehobson]

If we are looking at automating the image resizing for specific components I think we can define a default srcset and accompanying sizes for them!

We can absolutely do this for split.**

We'd also benefit from doing it for images that are in the body content (example here) but that would be complicated by which layout theme is applied.

No need to do this for SVG images, which in my experience means we don't need to do it for the picto component.

But also, I spent 18 months not working on Protocol so others may have something more to add ;)

** This might be a good starting place for split.

[stevejalim]

Thanks @stephaniehobson! Do you thikn we'll end up with one of srcset+size combo per component, or if we can generalize to one/a few?

[stephaniehobson]

The sizes are on a component by component basis since they communicate what size the image will be displayed at at different breakpoints in the design. Though, now that I am thinking about it split has 3 different image layouts so it could need 3 different sizes options too 😬

Even if we can't do srcset and sizes automatically we should investigate generating the high-res version of the image automatically... Do you want an explainer on the image sizing stuff?

[stevejalim]

Wagtail can downsize and crop to anything we say, so I don't think we'll need to repurpose any Bedrock resizing tooling - does that render an explainer redundant, or do you also mean the what and why of our resizing? I'd happily welcome knowing more about that