I've got a thing like this:
<picture>
<source media="(min-width:1200)" srcset="big.jpg">
<source media="(min-width:840)" srcset="small.jpg">
<img srcset="big.jpg" alt="Test" />
</picture>
I'm also using picturefill.
My issue is that both firefox and chrome (the 2 I'm currently testing on), will load only big.jpg, even in small screens. Checked also on console's network trace.
My css sets img as basic fluid:
img{
display: block;
max-width: 100%;
height:auto;
}
So what's wrong in my code?
As for I haz kode's comment, the answer is: my code lacked unit declaration in media queries.
As for completeness, I also write here a better code for my use case: having a default image for small screens and different one from 840px up.
<picture>
<source media="(min-width:840px)" srcset="big.jpg">
<img srcset="small.jpg" alt="Foradori">
</picture>
This will work correctly and download only the right image for the current breakpoint. Also remember we need picturefill to ensure crossbrowser support.