Всем доброе утро! Желаю Всем продуктивного рабочего дня!
В своей очередной статье записок верстальщика хотелось бы рассказать Вам о своем небольшом исследовании касательно иконок, картинок, спрайтов и проблем с ними.
Дело в том, что в наше время, в эру адаптивных сайтов, очень важное место в разработке занимает оптимизация картинок. Проблема, которой я хотел бы посвятить этот пост, заключается в том, что я нашел один баг в отображении картинок в браузере Chrome.
Постараюсь его описать: с появлением RETINA-дисплеев, всё чаще и чаще многие разработчики переходят на использование всей графики в SVG-формате. Но что же делать, если таких картинок у нас нет? Или дизайн не умеет работать с векторной графикой? Выход есть - делать эти картинки в два раза больше, и стилями уменьшать их размер в два раза. Или второй вариант - делать две версии картинок, и для Retina-дисплеев показывать вариант картинок, которые в два раза большие.
Я хотел бы остановиться на первом варианте: дело в том, что Chrome оказался очень привиредливым к размерам картинок. К примеру, если у нас есть картинка размером 640x390 px - то для корректного её отображения в Chrome, мы можем уменьшить её только в 2,4,8 раз. И ровно в столько! То есть, если нам нужно эту картинку уменьшить, скажем, до 300px по ширине (не ровно в два раза), то мы увидим, что картинка будет размытая:
В нашей ситуации мы можем использовать ширину 320px, или 160px и так далее. В таких ситуациях картинка в хроме будет выглядеть чётко:
Ещё один хак, который позволяет иногда справиться с багом в хроме, это изменение типа отрисовки картинки. В CSS есть одно не самое распространенное свойство для этого: image-rendering:pixelated - иногда, с не самыми замысловатыми картинками, это свойство помогает нам чётко отобразить картинку в хроме, даже если мы не чётко в 2,4 раза уменьшили наше изображение.
Даже с условим image-rendering:pixelated видно плохое сглаживание в вашем примере.
Я бы все таки лучше изначально подгонял картинку под разришение которое мне нужно будет уменьшить ровно в два или 4 раза.
Ну а вообще спасибо, я не знал про такое.
Хотя в том же wordpress, когда редактируешь публикуемую статью инлайном в редакторе и ставишь допустим картинка была 1024х768.
А мы ставим ей < img src="mysite/img/slide.jpg" style=width="800" />
то она все равно нормально отображается. Можете это объяснить?
Я предполагаю, что это частный случай. Бывают ситуации, когда при перезагрузке страницы картинка выглядит размытой, и через 1сек. рендерится чётко. Однако, это тоже бросается в глаза.