'HTML5 Picture element does not seem to be supported by Chrome 52? Srcset not working

I just started a new webpage so there's not much markup to go over.

I set this down:

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

and it defaults to the medme.jpg picture no matter the width of the window. I set down this:

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
   <!-- <img src="images/smallme.jpg"alt="hero profile">-->
</picture>

commenting out the img fallback tag and it doesn't show anything.

I'm running Chrome 52 which should support picture element. But it seems to be acting as if it doesn't support it or something. What am I doing wrong here?

htmlimageresponsive-designpicturefill


Solution 1:[1]

The img element inside the picture element isn't optional. The picture wrapper and its source elements are there to change the img, not replace it.

Solution 2:[2]

It should work in chrome, maybe you need the viewport meta-tag to trigger the different sources? <meta name="viewport" content="width=device-width, initial-scale=1"> Here is a simple picture-tag example which works in chrome. Compare it with your site to find out what is different.

Solution 3:[3]

It sounds silly, but have you tried reverting the order? For some reason doing this made it work for me.

So, instead of:

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

try this:

<picture>
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

Solution 4:[4]

According to this source the <source> media attribute is not being supported at all...

Solution 5:[5]

You must set a max-width for the lower width image, otherwise it is the only one always served (you can see it in devtools network tab if you try).

Like this

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(max-width: 999px)"
            srcset="images/medme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

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 rspeed
Solution 2 cloned
Solution 3 Diego Fortes
Solution 4 Itay Gal
Solution 5 simonemarketti

Related Questions