Не могу понять как все же правильно работать с растровой графикой для адаптивного дизайна?

Question

[Donald_Duck]

Доброго времени суток уважаемый Тостер! Поначитался в интернете про DPR, адаптивность графики и т.д. И теперь каша в голове которую не могу разгрести. У некоторых устройств DPR достигает 4. А мне, допустим, нужно вывести картинку 200х200. Это получается для этого устройства нужно грузить картинку аж 800х800 или я что-то не так понимаю? И как это правильно делать, допустим атрибут srcset поддерживается далеко не всеми современными браузерами. В общем помогите, пожалуйста, во всем этом разобраться.

Answer 1

[DENIS Kokorev]

Чтоб найти компромисс между качеством и объемом данных предлагаю делать средний размер. В твоем случае 400*400 к примеру. Косяки будут заметны или в микроскоп, если на мобиле или если на телевизоре то в случае разглядывания экран в упор с 30 см. Но так никто не делает. В остальных случаях будет везде нормально смотреться.

Как вариант сделать для больших устройств верстку таким образом чтоб картинка не открывалась во все 800 а оставалась максимумом в 400. Тогда вообще все будет идеально.

Answer 2

[Нерон Лордов]

В тему: Нет графики @2x для ретин, имеет смысл интерполировать ее в Photoshop?

Comments

[Donald_Duck]

В общем сделал вывод, что достаточно 2x увеличения картинок, а в некоторых случаях и вовсе не увеличивать их.

[Нерон Лордов]

Donald_Duck, либо вообще не заморачивайся. Скорость загрузки критичнее.

Answer 3

[BB 8]

srcset не поддерживается только IE. Насколько мне известно, подобные проблемы могут возникать только с retina-дисплеями, поэтому можете юзать srcset без опасений. И да, если у Вас векторная графика, то можно вообще не беспокоиться насчет srcset, т.к. размеры ее будут идентичными на всех устройствах.

Comments

[Donald_Duck]

Нет, srcset еще и некоторые мобильные браузеры не поддерживают. С векторной графикой проблем нет, речь шла только о растровой.

[BB 8]

Donald_Duck, Я не встречал телефоны с ретина-дисплеем, на которых установлен OperaMini. Остальные поддерживают

https://caniuse.com/#search=srcset

[Donald_Duck]

BB 8, А причем тут именно яблочная продукция, мало что ли остальных гаджетов с dpr 2, 3 и даже 4?

[BB 8]

Donald_Duck, Например ? Что кроме яблока может быть с большим DPR? Уверен, что это даже не 5-10% всего рынка. Если не устраивает scrset, есть специальные медиазапросы:

@media only screen and (min-device-pixel-ratio: 2)

Но не вижу в этом особого смысла. Т.к. scrset полностью сделает то, что нужно. Т.к. где он не поддерживается будет использоваться картинка по умолчанию. Я, повторюсь, еще не встрачал устройств с большим DPR на которых используется IE или Opera Mini :)