Итак, я пытаюсь создать адаптивный компонент изображения, который будет загружать соответствующий размер изображения в зависимости от разрешения экрана / плотности пикселей. Насколько я понимаю, атрибут srcset был разработан именно для этого, но я не могу заставить его делать то, что я хочу. Что я делаю неправильно? Вот элемент, отображаемый в DOM:
<img src="/static/media/image2_1x.20b2e636.png" srcset="/static/media/image2_05x.198c1f0f.png 590w, /static/media/image2_1x.20b2e636.png 1180w, /static/media/image2_2x.632d77c5.png 2360w" sizes="(max-width: 1180px) 90vw, 1180px">
Я ожидаю, что этот элемент будет делать, что, когда размер экрана шире, чем 1180px, он загружает соответствующее изображение шириной 1180px. Если оно отображается на устройстве с высокой плотностью, оно может загрузить здесь 2-кратное изображение (2360 Вт), но обычно оно будет загружать 1-кратное изображение (1180 Вт), когда размер экрана меньше, он должен рассчитать значение 90 ВВт в пикселях. и выберите любое из трех изображений, наиболее подходящее с учетом плотности пикселей и количества пикселей 90vw на экране.
На самом деле происходит то, что элемент всегда загружает самое большое изображение (изображение 2360w). Даже когда я включаю адаптивный режим в моих инструментах chrome dev и уменьшаю ширину экрана до 300 пикселей, очищаю кэш и перезагружаю его, ПОСТОЯННО загружает 2x.
Я пробовал свойства нескольких размеров. Если я установлю размеры только на 500 пикселей, он будет отображать изображение шириной 500 пикселей, но он все равно будет загружать изображение в 2 раза.
Почему это происходит? Я сделал ошибку? Как сделать так, чтобы он загружал 0,5 пикселя, когда изображение будет иметь ширину 300 пикселей и не нуждается в версии с высоким разрешением?