Адаптивные изображения на основе соотношения пикселей устройства

Question

Я смущен по поводу отзывчивых изображений. Как устройство Pixel Ratio может повлиять на изображение при просмотре на мобильном устройстве.

У меня есть мобильное устройство с разрешением 480x854 с соотношением пикселей устройства, равным 1,5, т. Е. Если я отправлю изображение с шириной 320 пикселей (480/1,5), оно автоматически уместится в ширину браузера, если мы указали область просмотра как,

<meta name="viewport" content="width=device-width, initial-scale=1">

Если я предоставляю изображение шириной 480px, оно выходит за пределы реальной ширины браузера. Но, если указать это,

<style>
    img {
        width: 100%;
    }
</style>

Он отображается на 100% в ширину браузера с явно более высоким качеством, чем изображение в 320 пикселей.

Итак, что является возможным способом отображения изображения на основе соотношения пикселей устройства? Нужно ли отправлять изображение размером 320 или 480 пикселей (со 100%) для моего устройства?

Answer 1

Браузер берет на себя все необходимое масштабирование. Если у вас реальная ширина устройства 480px, виртуальная ширина 320px, содержащая изображение, масштабированное до 100% (320px по виртуальной ширине), но изображение шириной 480px, оно будет отображаться на всех 480px просто отлично, но программно будет измеряться как 320px.

В наши дни нет смысла пытаться получить изображение с идеальным разрешением. Есть много устройств со многими разрешениями. Отправьте изображение достойного качества и пусть браузер сделает всю работу за вас.