Юрий Матюхин

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

Пиратский сюжет, автор: bugpixel.
 

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

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

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

Автор: Leonard Krull
 

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

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

Автор: 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 код. Это тоже пиксель арт. После применения этого способа устройству пользователя будет легче сканировать код.

Read more!