Implementing HTML <picture> tags to enable WEBP support, how to handle max-width properly

Question

I am interested in switching to HTML <picture> tags to allow both WEBP and JPEG to be supported, however, I'm running into confusing behavior regarding the max-width attribute.

test.jpg and test.webp are both 640x480

Original code (no <picture> tag, no WEBP):

<img src="test.jpg" style="max-width:80%">

Result: everything works as expected, image renders as 640x480 or scales down if browser width is shrunk

Bad code #1:

<picture>
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:80%">
</picture>

Result: Image is scaled down to 512x384 (80% of 640x480) even if browser width is not constrained

Bad code #2:

<picture style="max-width:80%">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="">
</picture>

Result: Image is rendered at correct size but does not scale down if browser window is shrunk

Bad code #3:

<picture style="max-width:80%">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:80%">
</picture>

Result: Same as #1 (image rendered as 512x384 instead of 640x480)

Decent code:

<picture style="max-width:80%">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:100%">
</picture>

Result: this seems to behave correctly in a modern browser however I'm concerned that in an older browser that doesn't support the <picture> tag, the image will scale down to 100% instead of 80%

I've also experimented with adding "width=640px" to the picture tag and/or img tag but it didn't seem to make much difference.

Answer 1

Here's the best solution I've found:

1. Set max-width on the tag to 90% (or whatever you want it to be)

2. Set width on the tag to the actual size of the image unless you want it to always be scaled

3. Set max-width of the picture tag to 100%

4. Set width of the picture tag to a number equal to or larger than the width of the img tag divided by max-width. For example, img tag width = 640 max-width = 90%, 640/0.9 = 711.111..., I set the width of the picture tag to 720 just to use a more even number, doesn't matter as long as it's larger

<picture style="max-width:100%;width:720px">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:90%;width:640px">
</picture>