<picture> vs img srcset

[strom-und-spiele]

Hello Johannes,

first-off thanks for your work - I'm a fan of stdimage.

Reading through the features on djanog-pictures I wondered why you choose to use <picture> instead of img srcset in the templates.
I'm new to both techniques but reading the mdn web docs as well as this cloud4 post I think I understood that <picture> is for Art direction (showing different parts of a picture based on the view port) whereas img srcset solves the resolution switching issue (selecting the correct resolution of the same picture based on the view port).

Now stdimage (and as far as I got it django-pictures as well) generates solutions for the resolution switching issue, so I'd gravitate towards using it with img srcset.

Would love to hear your thoughts on this.

[codingjoe]

Hi @strom-und-spiele,

First, thanks for your kind words. They mean a lot.

I'll start with a little deep dive into a responsive image-serving, to better explain my decision making later on.

You are right, the srcset attribute is meant to serve images of different sizes / resolution, depending on the viewport via the sizes. Both must actually be present and they alone do what you describe as size control and art direction.

All of this doesn't require using the picture tag. That only comes in handy if you want to serve different sources, as in, different file types. If you are OK only serving WebP, we could add a template tag, that renders as an image tag. But if you want to serve IE or recent WebKit versions, you might want to serve AVIF and JPEG. Or you love MPEG and want to serve JPEG2000...

Bottom line, we could totally add a tag for a single file type that renders as an img-tag.

Maybe you could make a suggestion, on how that might look like? Anyhow, I hope this at least answes your question.

Cheers,
Joe

[strom-und-spiele]

I marked your reply as an answer.

What you helped me understand is that

if you want to serve different sources [the picture tag is required].

As far as I understood from the README example, the default behavior is that uploading an *.jpg will result in serving webp if possible and falling back to .jpg all with the help of the picture tag.

[codingjoe]

True, the README isn't great in that regard. I'll update it, to include multiple source, once AVIF becomes available via mainstream Pillow.