CODEWITHSUNDEEP
htmlcssresponsive
Dean Johns
Dean Johns

Reputation: 498

Browser choose wrong image from srcset for the viewport

I have a responsive image code with srcset and size attributes. As the definition, browser should select the most nearest small image to each break point. I have following image sizes: 

100x100
350x350
550x550
750x750
1000x1000

Here is my code:

<img src="image1.jpg"
     srcset="image1-100x100.jpg 100w,
             image1-350x350.jpg 350w,
             image1-550x550.jpg 550w,
             image1-750x750.jpg 750w,
             image1-1000x1000.jpg 1000w"
     sizes=" (max-width:319px) 131px,
             (max-width:479px) 208px,
             (max-width:575px) 254px,
             (max-width:767px) 346px,
             (max-width:991px) 350px,
             (max-width:1199px) 205px,
             255px"
     alt="image1">

As the sizes, for all the sizes, should load 350x350 image.

But browser load 

350x350 image for 131px image slot (correct)
350x350 image for 208px image slot (correct)
550x550 image for 254px image slot (wrong)
750x750 image for 346px image slot (wrong)
750x750 image for 350px image slot (wrong)
350x350 image for 205px image slot (correct)
550x550 image for 255px image slot (wrong)

I see a pattern between viewport sizes and loading image sizes but as the srcset definition, the pattern should be between image slot sizes and loading image sizes. Why is this happening?

Upvotes: 3

Views: 896

Answers (1)

Dean Johns
Dean Johns

Reputation: 498

The problem was DPR (Device Pixel Ratio). The browser will try to get image slot size multiplied by DPR. If the DPR is 2.0 or higher, the original pixels of the image slot will be multiplied by greater than 1. Then browser will select a higher size image from srcset.

If I need to check images with exact expected sizes, I should set DPR as 1.0

enter image description here

Upvotes: 6

Related Questions