Браузер выбрал неправильное изображение из srcset для окна просмотра

Question

У меня есть адаптивный код изображения с атрибутами srcset и size.Как определение, браузер должен выбрать самое близкое маленькое изображение к каждой точке разрыва .У меня есть следующие размеры изображения:

100x100
350x350
550x550
750x750
1000x1000

Вот мой код:

<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">

Поскольку sizes, для всех sizes, должно быть загружено изображение 350x350.

Но загрузка браузера

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)

Я вижу шаблон между размерами области просмотра и размерами загружаемых изображений , но как определение srcset, шаблон должен бытьмежду размерами слотов изображений и размерами загружаемых изображений .Почему это происходит?

Answer 1

Проблема была DPR (Device Pixel Ratio) .Браузер попытается получить размер слота изображения, умноженный на DPR.Если DPR равен 2,0 или выше, исходные пиксели слота изображения будут умножены более чем на 1. Затем браузер выберет изображение большего размера из srcset.

Если мне нужно проверить изображения с точно ожидаемыми размерамиЯ должен установить DPR как 1,0