𝔹𝕝𝕦𝕣𝕣𝕖𝕕 𝕀𝕞𝕒𝕘𝕖𝕤 𝔸𝕣𝕖 𝔼𝕧𝕖𝕣𝕪𝕨𝕙𝕖𝕣𝕖

У нас не было никаких проблем с четкостью изображения в первые годы Интернета, потому что нам не нужно было показывать веб-сайты на мобильных устройствах.

Сегодня мы наблюдаем огромный рост в мобильном веб-серфинге. Настолько, что в этом году он даже обогнал трафик на десктопах.

Большинство клиентов пытаются создать адаптивные интерфейсы для своих сайтов, чтобы они были легко доступны с любого устройства. И не кажется странным, что многие разработчики макетов начали использовать

img {
    ширина: 100%;
    высота: авто;
}

для их изображений. Таким образом, они без проблем работают в любом разрешении окна браузера, масштабируя до доступного пространства.

Концептуально все выглядит хорошо. Дизайнеры создают красивые большие изображения, и разработчики используют эти изображения для каждого устройства. В некоторых случаях разработчики создают несколько версий одного и того же изображения, поэтому для мобильных экранов загружается меньшее изображение, а для настольных компьютеров - большее изображение.

К сожалению, Chrome не хочет изменять размеры изображений так, как это делают хорошие редакторы изображений. Вместо этого он выводит изображение с той же или сходной резкостью, что и исходное изображение.

Основной причиной этого может быть производительность. Когда на веб-странице много изображений, а процессор устройства не является высокопроизводительным, дополнительная обработка изображений может привести к большим задержкам при отрисовке страницы, поэтому Chrome пропускает этот процесс как не имеющий решающего значения для конечных пользователей.

Я покажу вам несколько примеров с использованием браузера Chrome, а затем с помощью других браузеров. Вот изображение, уменьшенное до 1000 пикселей в Photoshop:

То же изображение загружено в оригинальном размере и уменьшено в размере браузером. Сравните остроту глаз собаки.

Photoshop:

Браузер:

Ситуация становится еще хуже, когда вы добавляете резкость в Photoshop после сокращения. Но в этом случае фотографии более снисходительны, так как они обычно не имеют много острых краев. Проблемы с любыми векторными иллюстрациями, сохраненными в виде изображений .png, гораздо более заметны. Частый случай - логотипы сайта.

Логотип Асаны, исходный файл:

Изменение размера в фотошопе:

Отображается в браузере:

Логотип Wecan, исходный файл:

Изменение размера в фотошопе:

Отображается в браузере:

И пара дополнительных логотипов, отображаемых браузером:

Я нашел самые забавные сравнения размытых изображений на сайтах, связанных с UX. Раздел вакансий Smashingmagazine, в браузере:

В фотошопе:

Нильсен Норман Груп, статья Empathy Mapping, представила график:

Использование Photoshop изменения размера:

Я должен признать, что эта проблема только для Chrome. IE рендерит намного лучше; заметно, что некоторые тонкие линии имеют пикселизацию, что хорошо для текста:

Firefox также имеет хороший рендеринг; сглаживание делает текст немного менее читабельным, чем в IE, но лучше для логотипов:

Что разработчики должны сделать прямо сейчас, это включить свойство авторезки webkit:

img {
    рендеринг изображений: -webkit-optimize-контраст;
}

Вот что мы получили бы, если бы он был включен:

Таким образом, прежде чем самый популярный браузер в мире реализует хороший алгоритм понижающей дискретизации изображения, мы можем использовать свойство webkit-optimize-контрастности, которое позволяет посетителям наших сайтов наслаждаться нашими фотографиями, распознавать детали товара в нашем интернет-магазине и ценить удобочитаемость наших скриншотов и диаграмм. Но будьте осторожны, в некоторых случаях это может привести к пиксельным результатам.