15

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?

Aslan French
  • 520
  • 2
  • 6
  • 23

6 Answers6

30

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.

rspeed
  • 1,612
  • 17
  • 21
  • 4
    EXACTLY what i needed. That totally got me. I thought the `img` tag was for compatibility fallback, but it's actually used for the render. – inostia Apr 29 '20 at 22:33
  • 1
    omg I've just wasted so much time, just because everywhere in the internet it is written (and stressed out) that is for fallback. While actually it is the one obligatory element inside .... Thanks @rspeed – prk_001 Apr 16 '21 at 14:32
  • But it does not work. It always renders the image in the img src, ignoring the others. – Chinmay Ghule Sep 12 '21 at 06:21
  • @ChinmayGhule Make sure the `img` is the *last* child of the `picture` element. – rspeed Sep 16 '21 at 16:10
  • @rspeed I did do that but it still didn't work. – Chinmay Ghule Sep 18 '21 at 04:20
4

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.

cloned
  • 6,346
  • 4
  • 26
  • 38
  • 1
    I'm actually copy pasting from that example website :/ idk what's up with it. I eventually got it to work, but it still is acting in an unexpected way. I don't know why – Aslan French Sep 01 '16 at 16:01
4

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>
Diego Fortes
  • 8,830
  • 3
  • 32
  • 42
  • 2
    Great idea, this got me because it WAS changing the image as expected but does NOT change the image's path in the `` tag. Don't get tricked! – Ben Racicot Apr 02 '22 at 15:31
1

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>
simonemarketti
  • 23
  • 5
0

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

Itay Gal
  • 10,706
  • 6
  • 36
  • 75
0

According to caniuse, support is conditional on enabling experimental Web Platform features in chrome://flags

SamAct
  • 529
  • 4
  • 23