Не могу понять как все же правильно работать с растровой графикой для адаптивного дизайна?
Доброго времени суток уважаемый Тостер! Поначитался в интернете про DPR, адаптивность графики и т.д. И теперь каша в голове которую не могу разгрести. У некоторых устройств DPR достигает 4. А мне, допустим, нужно вывести картинку 200х200. Это получается для этого устройства нужно грузить картинку аж 800х800 или я что-то не так понимаю? И как это правильно делать, допустим атрибут srcset поддерживается далеко не всеми современными браузерами. В общем помогите, пожалуйста, во всем этом разобраться.
Чтоб найти компромисс между качеством и объемом данных предлагаю делать средний размер. В твоем случае 400*400 к примеру. Косяки будут заметны или в микроскоп, если на мобиле или если на телевизоре то в случае разглядывания экран в упор с 30 см. Но так никто не делает. В остальных случаях будет везде нормально смотреться.
Как вариант сделать для больших устройств верстку таким образом чтоб картинка не открывалась во все 800 а оставалась максимумом в 400. Тогда вообще все будет идеально.
srcset не поддерживается только IE. Насколько мне известно, подобные проблемы могут возникать только с retina-дисплеями, поэтому можете юзать srcset без опасений. И да, если у Вас векторная графика, то можно вообще не беспокоиться насчет srcset, т.к. размеры ее будут идентичными на всех устройствах.
Donald_Duck, Например ? Что кроме яблока может быть с большим DPR? Уверен, что это даже не 5-10% всего рынка. Если не устраивает scrset, есть специальные медиазапросы:
@media only screen and (min-device-pixel-ratio: 2)
Но не вижу в этом особого смысла. Т.к. scrset полностью сделает то, что нужно. Т.к. где он не поддерживается будет использоваться картинка по умолчанию. Я, повторюсь, еще не встрачал устройств с большим DPR на которых используется IE или Opera Mini :)
Средний
