Need help on this Picturefill srcset

Question

I have the following laravel code:

<img sizes="(min-width:600px)100vw, (max-width:601px)100vw"
      srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />

What I'm trying to do is to display the 600x600 image for width < 600px, and the 410x620 for width > 600px.

The code above works on desktop. But on a iPhone (iOS 8.1.2, safari/chrome), it displays the 410x620 image instead. It works properly (both desktop and mobile) without Picturefill included, except IE9 - IE11.

Is there something I'm missing here?

Solution:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" media="(max-width: 600px)">
  <source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" media="(min-width: 601px)">
  <!--[if IE 9]></video><![endif]-->
  <img sizes="100vw" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
</picture>

score 0 · Accepted Answer · answered Jan 10 '15 at 14:34

There are multiple errors:

sizes="(min-width:600px)100vw, (max-width:601px)100vw" doesn't make any sense The default value of sizes is 100vw. So your sizes is computed, if min-width: 600px matches, use 100vw, if max-width: 601px use 100vw, otherwise use 100vw
You set the descriptor 601w for an 410 pixel wide image. This is just wrong.
I don't know, but it seems that you don't use the same image in different sizes, but you use 2 different images (one is 600x600 the other is 410x620). This means, that you don't want to offer different candidates, where the browser can choose from, it means you want different images depending on your layout??? And in that case you should use picture


<picture>
    <source media="(min-width:600px)" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" />
    <source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" />
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</picture>

Thanks. But can't I use different images without the `` tag? The example in [Picturefill](http://scottjehl.github.io/picturefill/#examples) does use different image too. `` — resting, Jan 11 '15 at 04:43
Not sure what you mean with different images. They are using the same image in different sizes (exact same image but different amount of pixels), but you have a different aspect ratio. This means you have cropping or something else involved and then you need to use the picture element. Have a look here: https://github.com/aFarkas/respimage#markup-examples — alexander farkas, Jan 11 '15 at 09:08
I meant different image files when I said different image. I tried using the `` tag and it works. Thanks. — resting, Jan 11 '15 at 14:59

Need help on this Picturefill srcset

1 Answers1