Не могу понять, как запретить браузерам загружать изображения с более высоким разрешением, чем у моего целевого размера страницы (например, 3x + разрешение изображения)
Например: у меня 4 файла изображения: 600 Вт (2x),300 Вт (1x), 200 Вт (2x) и 100 Вт (1x).
- При ширине области просмотра 770 пикселей и выше, должно отображаться изображение размером 300 пикселей.
- Ниже ширины области просмотра 770 пикселей, изображение в 100px должно отображаться.
На первый взгляд ответ может показаться таким:
<img srcset="600w.png 600w, 300w.png 300w, 200w.png, 100w.png" sizes="(min-width: 770px) 300px, 100px">
, который прекрасно работает для устройств 1x и 2x dppx.Проблемы начинаются, когда я считаю, что существуют устройства, поддерживающие 3x dppx или более.Как я могу запретить браузеру загружать изображения большего размера, чем я намереваюсь?Я хочу ограничить браузер разрешением 2х.Как я могу сделать это?Устройство с разрешением 3x или более может значительно ухудшить размер страницы.Заранее спасибо!