Веб-графика: будущее «растра»

До поры до времени растровая графика в вебе была представлена лишь тремя классическими форматами — GIF, JPEG и PNG, которым мы уделили внимание в одной из более ранних статей. В этой нише относительно долго наблюдалось определенное затишье, но в последнее время даже в означенном «море спокойствия» наметилось некоторое шевеление.

Можно выделить по меньшей мере три технологии, которые в обозримом будущем смогут составить серьезную конкуренцию традиционным растровым форматам:

  • WebP (читается как weppy) — растровый графический формат, предложенный компанией Google;
  • Canvas — HTML5-элемент и специализированные API для отрисовки растровых изображений на веб-страницах при помощи JavaScript;
  • модули CSS3, ответственные за реализацию скругленных уголков, теней, градиентов, линейных преобразований и прочего, позволяющие добиться сложных визуальных эффектов без применения графики как таковой.

Один против троих

WebP, представленный компанией Google в 2010 году — новый открытый формат растровой графики для веба. В основе формата лежит алгоритм, используемый для сжатия ключевых кадров в видеокодеке VP8, который, в свою очередь, является главной составляющей открытого видеоформата WebM, получившего в последнее время широкую нативную поддержку в браузерах.

WebP поддерживает сжатие как с потерями, так и без потерь качества. По данным самих разработчиков формата, WebP в варианте без потерь обеспечивает в среднем на 28% меньший объем файла картинки по сравнению с PNG. Изображения в формате WebP при использовании сжатия с потерями на 25—34% «легче» файлов в формате JPEG при сопоставимом качестве картинок.

WebP поддерживает альфа-каналы в изображениях (что, напомним, позволяет создавать области дробной прозрачности). Альфа-каналы, согласно исследованиям разработчиков формата, увеличивают объем файлов картинок всего на 22%.

В числе прочих поддерживаемых в формате WebP возможностей — анимация, внедрение ICC-профилей и XMP-метаданных, независимое декодирование содержимого отдельных блоков без необходимости ожидания полной загрузки изображения.

Доступны библиотека для работы с форматом WebP, утилиты-конверторы (из PNG и JPEG в WebP и обратно из WebP в PNG), кодек для Windows. Для главного графического пакета всех времен и народов — Photoshop — разработан плагин с открытым исходным кодом, обеспечивающий поддержку формата WebP.

Что касается браузеров и мобильных платформ, на момент публикации этой статьи нативная поддержка WebP была реализована в Chrome и Opera, а также под Android.

На официальном сайте, посвященном формату WebP, можно посмотреть примеры WebP-изображений в сравнении с PNG- и JPEG-картинками аналогичного содержания.

Холст без масла

В спецификации HTML5 определяется новый элемент <canvas> («холст»), предназначенный для размещения внутри себя растрового изображения, динамически формируемого при помощи JavaScript.

Визуализация в пределах одного элемента <canvas> может осуществляться с применением одного или нескольких API, описываемых в самостоятельных спецификациях. Конкретный используемый API определяется так называемым контекстом элемента <canvas>.

Наиболее общеупотребительным в обозримой перспективе будет, очевидно, являться API, описываемый в спецификации HTML Canvas 2D Context и предназначенный для создания двумерной графики. Предложен также API для трехмерной визуализации с использованием аппаратных ресурсов видеокарты — WebGL, основывающийся на OpenGL ES.

Спецификация HTML Canvas 2D Context описывает относительно низкоуровневые методы для рисования отрезков прямых и дуг окружностей, квадратичных и кубических кривых Безье, прямоугольников с возможностью определять толщину и цвет линий, цвет заливки замкнутых контуров и прочие параметры. Казалось бы, похоже на векторную графику, но отличие состоит в том, что в случае Canvas отрисовка осуществляется в директивном порядке наподобие: «переместиться в такую-то точку» — «задать цвет линии» — «задать толщину линии» — «провести линию в такую-то точку». Ранее отрисованный объект никак не «запоминается», к нему нельзя обратиться впоследствии с целью, например, изменения размеров или цвета — для этого придется полностью перерисовать соответствующую область «холста». В том же SVG, напротив, каждый изображенный объект описывается соответствующим элементом XML-разметки, к которому в любой момент можно обратиться для изменения атрибутов или же применить обработчик события.

Существуют, разумеется, JavaScript-библиотеки, по сути своей являющиеся эдакими «надстройками», позволяющие оперировать сложными объектами Canvas на более высоком уровне. Более того, существуют также частичные реализации SVG на основе Canvas (актуальные для браузеров, поддерживающих Canvas, но не поддерживающих SVG).

Canvas, благодаря тесной взаимосвязи с JavaScript, часто используется для отрисовки изображений, описывающихся строгими математическими уравнениями (графики зависимостей, разные красивые фракталы…), а также для создания интерактивных и насыщенно анимированных сцен (скажем, игр).

Приведем простейший пример использования Canvas для понимания взаимосвязи конструкций HTML и JavaScript:

<canvas id="example" width="100" height="100">Ваш браузер не поддерживает Canvas!</canvas>
<script>
var canvas = document.getElementById("example");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255, 204, 0)";
context.fillRect(10, 10, 80, 80);
</script>

Содержимое элемента <canvas> — предупреждающая надпись — отображается только в тех браузерах, которые не поддерживают Canvas.

«Рисование на холсте» может осуществляться только после того, как «холст» уже создан, поэтому элемент <script>, в рамках которого вызываются нужные нам методы графического API, в вышеприведенном примере располагается после соответствующего элемента <canvas> в коде разметки. Объект canvas соответствует нашему элементу <canvas> с идентификатором example. Далее задается контекст (объект context) — ключевое слово 2d соответствует API, описанному в спецификации HTML Canvas 2D Context. В рамках контекста применяется метод fillRect(), отрисовывающий квадрат с заданными координатами левого верхнего угла и размерами. Цвет заливки определяется перед вызовом метода заданием соответствующего значения свойству fillStyle нашего контекста.

Намного более сложные и интересные примеры использования Canvas можно посмотреть на сайте Canvas Demos.

Графические эффекты без графики

На фоне складывающейся благоприятной ситуации с поддержкой в современных браузерах тех или иных возможностей CSS3, некоторые веб-разработчики взяли курс на минимизацию использования графики в своих проектах. Такие свойства CSS3, как border-radius (радиус скругления рамки блока), box-shadow (тень блока), opacity (прозрачность), transform (трансформации, в том числе поворот элемента на определенный угол); image-значения linear-gradient (линейный градиент) и radial-gradient (радиальный градиент) могут с успехом использоваться не только для декорирования блоков контента в рамках информационного дизайна, но и для создания самостоятельных элементов оформления, близких по духу растровым или векторным картинкам. Не могу (в который раз уже) обойти вниманием прекрасную демку за авторством Романа Комарова, похожую на нечто в духе компьютерных игр 1990-х и реализованную только лишь средствами HTML и CSS без применения JavaScript, Canvas, SVG, растровой графики и как бы то ни было еще технологий в любом виде. Рекомендую также доклад Романа о «бесчеловечных экспериментах» над CSS, прозвучавший на московской встрече Web Standards Days в декабре прошлого года.

Артемий Ломов, WebHiTech