Рубрики
Без рубрики

???????? ?????? ??? ???????????

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

Автор оригинала: 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, которое позволяет посетителям нашим сайтам насладиться нашими фотографиями, различными деталями элемента в нашем интернет-магазине и ценить читаемость наших скриншотов и диаграмм. Но будьте осторожны, в некоторых случаях он может привести к пикселированным результатам.