'The <picture> Element in html5 shows not different images by resize

I found this code : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture

I have tried it on all my browsers and it's been working properly. But I when I copy the code and I resize my browser, Only img tag is shown. Thanks for any help.

  <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

    <picture>
       <source media="(min-width: 650px)" srcset="Blume 1.jpg">
       <source media="(min-width: 465px)" srcset="Blume 2.jpg">
       <img src="Blume 3.jpg" alt="Flowers" style="width:auto;">
    </picture>

    </body>
    </html>
htmlimageresponsive-design


Solution 1:[1]

you have to use image source properly

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<picture>
   <source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_pink_flowers.jpg">
   <source media="(min-width: 465px)" srcset="https://www.w3schools.com/html/img_white_flower.jpg">
   <img src="https://www.w3schools.com/html/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Solution 2:[2]

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 650px)" srcset="https://www.abc.net.au/news/image/8281088-16x9-940x529.jpg">
  <source media="(min-width: 465px)" srcset="https://static-news.moneycontrol.com/static-mcnews/2018/12/Google-770x433.jpg">
  <img src="https://www.irishtimes.com/polopoly_fs/1.3722378.1544095168!/image/image.jpg_gen/derivatives/box_620_330/image.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

I have tried the same example and it's working fine for me.

Solution 3:[3]

It's not recommended to use the media attribute just for providing images for multiple resolutions, use the srcset attribute instead.

If you resize the screen to a small width, the browser won't pick up a smaller image if a larger image is available in the cache. But the browser will choose the correct source properly for different device widths.

If you want to check if the srcset attribute is working properly, you can disable the cache in devtools and force the browser to load different sources by resizing the screen.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Udhay Titus
Solution 2 Manoj Kumar
Solution 3 Rafid Muhymin Wafi

Related Questions