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.

Improve this question

1 Answer 1

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

While testing you need to consider following things: nilesh2git.com/Blog/2017/06/10/responsive-image-lessons/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.