Как можно указать плотность пикселя?

Question

[wakenbyWork]

Нашел такой пример который подходит под мои задачи, так как сейчас все фотографии в 2x используются.

<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

Но возник такой вопрос, можно ли прописать плотность пикселя меньше чем 2x?

Я знаю что ретина это 2x. Но есть же множество телефонов у которых плотность пикселя больше чем 1, но на сколько больше я не знаю.

Я проверял фотографии на 2-х android телефонах, и у них плотность пикселя как показала практика больше чем 1 а там не retina. Как я это понял: Использовал два изображения, одно в 1x вторая в 2x. И первая там мылилась, а вторая в 2x была четкой.

Я склоняюсь к тому что я что-то не понимаю))

Можете объяснить как грузить изображения в 2x через picture точно для всех устройств которые этого требуют?

Comments

[Ankhena]

Поменять 2 на 3.
Или или добавить для 3 по аналогии.

Только зачем вы два раза про дефолтные написали не вполне ясно, лишний source можете убрать.

[wakenbyWork]

Ankhena, Исправил) А если прописать так?

<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 1.1x" media="(max-width: 768px)">
    <img srcset="default.jpg, default_retina.jpg 1.1x" alt="picture">
</picture>

Т.е 1.1 и тогда изображение в большем разрешении будет грузиться для всех устройств где плотность пикселя больше чем 1? И нормально так делать?

[Ankhena]

wakenbyWork, давайте я вас научу.
Открываете инструменты разработчика, адаптивный режим, меняете плотность пикселей и на вкладке Network смотрите что и когда загружается.
Развлекайтесь.

Answer 1

[Иван Кулаков]

Ну пишите не 2x, а 1.1x или 1.5x

Comments

[wakenbyWork]

Я правильно понял если прописать 1.1x то фотография большего разрешения будет грузиться для всех устройств где плотность пикселя больше чем 1.1x? И нормально так делать?

[Иван Кулаков]

wakenbyWork, да

[wakenbyWork]

Иван Кулаков, Спасибо!