0

I'm trying to figure out why in my code bellow, the browser is loading the large and small images when my resolution is around 400px. If I'm in a small resolution, I just need to load the small image, right? Even in retina display, which should load the medium image.

In the last few hours, I've been trying to study this.

<img    
    srcset="https://s18.postimg.org/t9xyf7mix/small.jpg  320w,
            https://s18.postimg.org/w5b1m2qix/medium.jpg 640w,
            https://s18.postimg.org/ues0kl8zt/large.jpg  1024w" 

    sizes= "(min-width: 1024px) 50vw,
            (min-width:  640px) 50vw,
            (min-width:  320px) 50vw"

    src="https://s18.postimg.org/t9xyf7mix/small.jpg"
    alt="Test image behavior" 
/>

Link to JSFiddle: https://jsfiddle.net/italoborges/v8yftgj2/2/

What am I doing wrong?

Thanks.

Italo Borges
  • 2,355
  • 5
  • 34
  • 45

1 Answers1

1

Here's a nice explanation and demonstration of the math behind this decision making:
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Plus, here you can find a nice automatic responsive breakpoints generator that uses advanced analytics to extract the best optimized set of breakpoints for a specific image:
http://www.responsivebreakpoints.com/

Nadav Ofir
  • 778
  • 4
  • 6
  • While testing you need to consider following things: http://nilesh2git.com/Blog/2017/06/10/responsive-image-lessons/#testing-srcset – Nilesh Modak Jun 17 '17 at 13:50