/ 

Масштабируемый пиксель арт

Пиратский сюжет, автор: <a href='http://bugpixel.com/' rel='nofollow'>bugpixel</a>.
Пиратский сюжет, автор: bugpixel.

Мне нравится пиксель арт. Только взгляните на этот предмет искусства выше. Восьмибитная ностальгия, красота и простота. Но с пиксель артом в вебе одна проблема — сглаживание.

Сложно передать красоту иллюстрации, когда её портит стандартное сглаживание. Это актуально для ретины и телефонов, когда исходное изображение масштабируется. Чего не хватает? Возможности управлять сглаживанием, чтобы как в фотошопе Nearest Neighbor. Этим мы и займемся.

Как пример, я возьму анимацию бегущего война. Оригинальный размер 32×32 пикселя. С таким размером нельзя демонстрировать анимацию людям, её нужно растянуть хотя бы до 256×256. И тут начинается проблема. Посмотрите как это выглядит.

Бегущий воин, pixel Art, стандартное сглаживание в браузере
Автор: Leonard Krull

Ужасно, не правда ли? Конечно можно сделать саму анимацию в размере 256×256, но это не поможет если рисунок должен масштабироваться или на него посмотрят на экранах с большой плотностью пикселей. Монитор размоет анимацию.

Но что если мы можем на это повлиять? Посмотрите на следующую анимацию.

Бегущий воин, pixel Art, улучшеное сглаживание в браузере
Автор: Leonard Krull

Другое дело, и работает в IE 7+, Safari 6+, Firefox 3.6+, Opera 12, 26+, Chrome 41+.
Впечатляет? Вот наглядная разница в масштабировании между стандартным методом и пиксельным в формате «было — стало».

Разница между двумя методами
Разница между двумя методами

Как сделать

За сглаживание в CSS отвечает свойство image-rendering. Подробнее читайте в документации, а я лучше покажу вам код:

.pixel-art {
  -ms-interpolation-mode: nearest-neighbor; /* IE 7+ (не стандартное свойство) */
  image-rendering: -webkit-optimize-contrast; /* Safari 6, UC Browser 9.9 */
  image-rendering: -webkit-crisp-edges; /* Safari 7+ */
  image-rendering: -moz-crisp-edges; /* Firefox 3.6+ */
  image-rendering: -o-crisp-edges; /* Opera 12 */
  image-rendering: pixelated; /* Chrome 41+ and Opera 26+ */
}

Минус данного метода в том, что такое сглаживание не работает в Edge и Opera Mini (поддержка). Но это в любом случае лучше чем ничего, общая доля поддержки на дату публикации составляет 84.63% в мире и 78.26% в России.

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

Еще один способ применения этого способа — QR код. Это тоже пиксель арт. После применения этого способа устройству пользователя будет легче сканировать код.

⌘ ⌘ ⌘
Поделиться
Отправить
Как называть переменные
Фронтенд

Как называть переменные

Мой взгляд на соглашения наименования переменных, функций, методов и классов

Плавный, нативный скрол
Фронтенд

Плавный, нативный скрол

Выкиньте лишние библиотеки для прокрутки внутри страницы

Адекватное подчеркивание ссылок
Фронтенд

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

Инструменты

Связывание текстового редактора с Git

Как указать текстовый редактор по умолчанию для Git. VSCode, Atom, TextMate, Nano, Sublime Text и другие