I've just learned about responsive images, i.e. srcset and sizes and I'm trying to apply them in a simple example.
I got two images; foo.webp that is 463px wide and foo@sm.webp that is 325px.
Then I implement it like this:
<img src="foo.webp" srcset="foo@sm.webp 325w," sizes="(min-width: 768px) 463px">
The problem here is that the smallest image is always being used no matter what I set in sizes. I want it to just use foo.webp.
If I add foo.webp to srcset as well like so:
<img src="foo.webp" srcset="foo@sm.webp 325w," sizes="(min-width: 0) 325px, (min-width: 768px) 463px">
Then it will only use foo.webp instead of switching to foo@sm.webp on mobile...
Is this a DPI issue or something? Or am I just completely misunderstanding how this whole thing works?