Автор оригинала: FreeCodeCamp Community Member.
Артем Сызоненко
У нас не было проблем с резкостью изображения в первые годы Интернета, потому что нам не нужно было отображать сайты на мобильных устройствах.
Сегодня мы видим огромный рост мобильных веб-серфинга. Так много так, что в этом году он даже охватил трафик на настольных компьютерах.
Большинство клиентов пытаются создать отзывчивые интерфейсы для своих веб-сайтов, чтобы их легко доступны из любого типа устройства. И не кажется странным, что многие разработчики макета начали использовать
img { width: 100%; height: auto;}для их изображений. Таким образом, они беспрепятственно работают через любое разрешение окна браузера, масштабируя до имеющегося пространства.
Концептуально все выглядит хорошо. Дизайнеры создают красивые большие изображения, а разработчики используют эти изображения для каждого устройства. В некоторых случаях разработчики создают несколько версий одного и того же изображения, поэтому для мобильных экранов загружается меньшее изображение, а также большее изображение для настольных компьютеров.
К сожалению, Chrome не хочет изменить размер изображения так, как делают хорошие редакторы изображений. Вместо этого он выводит изображение не одинаково, либо аналогично, резкость в качестве исходного изображения.
Основная причина этого может быть производительность. Когда веб-страница имеет много изображений, и процессор устройства не очень продуктивна, дополнительная обработка изображений может привести к большему отставаниям на рендеринга страницы, поэтому Chrome опустите этот процесс, как не имеет решающее значение для конечных пользователей.
Я покажу вам несколько примеров, используя Chrome Browser, а затем с помощью других браузеров. Вот изображение, сокращенное до 1000 PX в Photoshop:
Одно и то же изображение загружено в оригинальном размере и вниз по браузеру. Сравните резкость глаз собаки.
Фотошоп:
Браузер:
Вещи еще хуже, когда вы добавляете резкость в Photoshop после сокращения. Но фотографии более прощают в этом случае, так как они обычно не имеют много острых краев. Проблемы с любыми векторными иллюстрациями, сохраненными в виде изображений .png намного более заметны. Частое дело – логотипы сайта.
Асана Логотип, начальный файл:
Изменял размещение в Photoshop:
Визуализируется в браузере:
WECAN Логотип, начальный файл:
Изменял размещение в Photoshop:
Визуализируется в браузере:
И пару дополнительных браузерных логотипов:
Я нашел наиболее забавные сравнения размытых изображений на веб-сайтах, связанных с UX. SmashingMagazine Работа в разделе , в браузере:
В фотошопе:
Nielsen Norman Group , Сопоставление картирования Статья, оказанный график:
Использование размера Photoshop:
Я должен признать, что эта проблема хромирована. Т.е. оказывает гораздо лучше; Заметно, что некоторые тонкие линии пикселируются, что в порядке для текста:
Firefox имеет хороший рендеринг; Сглаживание делает текст немного менее читаемым, чем в IE, но лучше для логотипов:
Какие разработчики должны сделать прямо сейчас – включить свойство WebKit Auto-Sharping:
img { image-rendering: -webkit-optimize-contrast;}Это то, что мы получили, если бы он был включен:
Итак, до того, как самый популярный браузер в мире реализует хороший алгоритм отбора проб изображения, мы можем использовать свойство WebKit-Optimize-Contrast, которое позволяет посетителям нашим сайтам насладиться нашими фотографиями, различными деталями элемента в нашем интернет-магазине и ценить читаемость наших скриншотов и диаграмм. Но будьте осторожны, в некоторых случаях он может привести к пикселированным результатам.