Иногда w основывается на плотности пикселей, иногда нет, другие просто ломаются.

Question

Вот код HTML, который я написал:

<img src="Images/small.jpg"
 srcset="Images/small.jpg 200w,
         Images/large.jpg">

Итак, я хочу, чтобы small.jpg использовался до экрана шириной 200, а затем я хотел бы использовать large.jpg вместо него. Проблема заключается в том, что в инструментах для разработчиков отключен кэш и обновляется страница каждый раз, когда этот код не работает с плотностью пикселей 1x, с 2x и 3x он работает нормально, соблюдая ограничение в 200 пикселей независимо от плотности.

И если я использую 3 изображения, например:

<img src="Images/small.jpg"
 srcset="Images/small.jpg 200w,
         Images/large.jpg 400w,
         Images/huge.jpg 800w">

В зависимости от плотности пикселей теперь может отображаться изображение меньшего размера.

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

Ps. Я не могу найти что-нибудь онлайн на устройстве W

Answer 1

Как вы это тестируете?

Чтобы понять, как 200w / 400w / 800w взаимодействует, вы можете использовать Chrome.

Щелкните правой кнопкой мыши на вашем нажмите «проверить», затем нажмите значок телефона / планшета (синим на скриншоте ниже):

Затем в центре, на В верхнем меню вы можете изменить устройство, которое вы «олицетворяете»:

Ваш код работает.

Это демонстрируется переключением между iPhone 5/SE и Laptop with HiDPI screen (или Pixel 2).

Работа устройства w выглядит следующим образом:

Браузер выполняет итерацию по вашему исходному набору изображений, а затем выполняет расчет.

Для целей этого предположим, что устройство, на котором вы находитесь, имеет ширину 450 пикселей и является 1-кратным дисплеем (не сетчатки) ...

Браузер рассчитает:

200/450 = 0.44...

400/450 = 0.88...

800/450 = 1.77...

Поскольку вы используете 1-кратный дисплей без сетчатки, самый близкий - 400 Вт (400/450), и, таким образом, он будет загружать большой JPEG, поскольку он ближе всего к 1 (1-кратный дисплей -> 1,0).

Надеюсь, это поможет.