Записки HTML-верстальщика: если нет SVG иконок - что делать?
Всем доброе утро! Желаю Всем продуктивного рабочего дня!
В своей очередной статье записок верстальщика хотелось бы рассказать Вам о своем небольшом исследовании касательно иконок, картинок, спрайтов и проблем с ними.
Дело в том, что в наше время, в эру адаптивных сайтов, очень важное место в разработке занимает оптимизация картинок. Проблема, которой я хотел бы посвятить этот пост, заключается в том, что я нашел один баг в отображении картинок в браузере Chrome.
Постараюсь его описать: с появлением RETINA-дисплеев, всё чаще и чаще многие разработчики переходят на использование всей графики в SVG-формате. Но что же делать, если таких картинок у нас нет? Или дизайн не умеет работать с векторной графикой? Выход есть - делать эти картинки в два раза больше, и стилями уменьшать их размер в два раза. Или второй вариант - делать две версии картинок, и для Retina-дисплеев показывать вариант картинок, которые в два раза большие.
Я хотел бы остановиться на первом варианте: дело в том, что Chrome оказался очень привиредливым к размерам картинок. К примеру, если у нас есть картинка размером 640x390 px - то для корректного её отображения в Chrome, мы можем уменьшить её только в 2,4,8 раз. И ровно в столько! То есть, если нам нужно эту картинку уменьшить, скажем, до 300px по ширине (не ровно в два раза), то мы увидим, что картинка будет размытая:
В нашей ситуации мы можем использовать ширину 320px, или 160px и так далее. В таких ситуациях картинка в хроме будет выглядеть чётко:
Ещё один хак, который позволяет иногда справиться с багом в хроме, это изменение типа отрисовки картинки. В CSS есть одно не самое распространенное свойство для этого: image-rendering:pixelated - иногда, с не самыми замысловатыми картинками, это свойство помогает нам чётко отобразить картинку в хроме, даже если мы не чётко в 2,4 раза уменьшили наше изображение.
