Повышают ли SVG-изображения производительность сайта?

Повышают ли SVG-изображения производительность сайта?

От автора: в поддержку использования масштабируемой векторной графики или SVG в интернете говорит несколько положительных факторов. Относительно небольшой вес, безусловно, один из них. Однако тут есть некоторые оговорки. Давайте разбираться.

Преимущества векторных изображений

В основе растровых изображений (JPEG, PNG и т.д.) лежит сетка из квадратных пикселей. Чем больше изображение, тем больше используется пикселей, что увеличивает размер файлов.

Пиксельная графика плохо масштабируется, и это не единственный минус. Ниже представлено JPEG-изображение цветка с размерами 300 х 225px:

Повышают ли SVG-изображения производительность сайта?

А вот то же изображение, но показанное на большем разрешении:

Повышают ли SVG-изображения производительность сайта?

Обратите внимание на нечеткие края, размытие и общий спад качества изображения.

Сейчас очень много устройств с ретина-экранами, и риск получить растровые изображения такого качества очень велик. Один из выходов – хранить изображения высокого разрешения, что сильно ударит по производительности.

Элементы srcset и picture

К счастью современный HTML дает нам спасательный круг в виде адаптивных изображений (элементы srcset и picture). На момент написания статьи оба тега поддерживаются в последних версиях всех основных браузеров за исключением IE11 и Opera Mini.

Цель адаптивных изображений – обеспечить используемое устройство изображением с наилучшим качеством. Это включает в себя поддержку изображений под различные разрешения экрана. Однако браузер сам загружает именно то изображение, которое подходит под возможности доступного устройства.

Хотите подробно разобраться в этих техниках, прочитайте статью Saurabh Kirtani «создание адаптивных изображений с помощью srcset».

В коде srcset выглядит следующим образом:

Ниже представлен пример тега picture:

Насколько видно, скачиваться будет всего одна версия изображения под устройство, но вам все равно придется подготовить и загрузить на сервер множество копий изображения. Это никак не повлияет на производительность на сайте, но вы потратите свое время и загрузите сервер.

SVG не зависит от разрешения

Масштабирование лежит в основе векторной графики, а SVG – это формат векторных изображений на основе XML. SVG-изображения состоят из инструкций по геометрической графике (фигуры, линии и т.д.), которые не зависят от размера пикселей. С точки зрения размера файла нет разницы, на какой размер рендерить изображение, просто потому что инструкции не меняются.

Как еще одно следствие независимости от разрешения – не нужно делать копии одного изображения под разные устройства. Один размер подходит под любой экран и выглядит четко на всех разрешениях.

Тем не менее, есть один фактор, который может отрицательно сказаться на размере SVG-файла, и это сложность изображения. Чем сложнее инструкции к изображению, тем больше вес файла.

Предложения по увеличению производительности SVG-файлов

Вообще, в вебе используется довольно простой SVG: логотипы, карты, иконки и т.д. Скорее всего, у таких простых SVG-изображений будет маленький вес по сравнению с их растровыми копиями.

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

Парочка советов.

Заботьтесь о производительности в дизайне с самого начала

Простую SVG-графику можно кодить самому или с помощью JS-библиотек типа Snap.svg. Зачастую вы просто запускаете векторный графический редактор типа Adobe Illustrator.

Если вы работаете в графическом редакторе, подумайте об упрощении SVG-кода, это снизит риск поломки изображения после оптимизации.

Первый шаг, который можно предпринять – это задать размер холста прямо в вашем графическом редакторе. Sarah Drasner рекомендует поставить 100 х 100px, плюс минус, в зависимости от вашего проекта. Так холст будет не слишком маленьким и не будет генерировать много знаков после запятой, которые вы потом вряд ли сможете убрать, не испортив графику. С другой стороны, размер и не слишком большой. Большой холст подразумевает больше точек в маршруте.

Уменьшение количества точек маршрута играет решающую роль в снижении веса SVG-файла. То есть нужно стараться использовать фигуры вместо маршрутов там, где это возможно, а также объединять маршруты, если только вы не планируете анимировать их отдельно. В Adobe Illustrator есть панель Simplify, на которой можно убрать еще больше точек в маршруте. Быстрый урок по этой панели.

Умный экспорт SVG

Используйте все возможности по экспорту в своем графическом редакторе. Если этого не делать, можно получить SVG-код с проприетарной разметкой и мусором, который вам совсем не нужен.

Например, если у вас последняя версия Adobe Illustrator (CC 2017 на момент написания статьи), экспортируйте SVG-графику с помощью пункта Export As, выбрав при этом формат .svg:

Повышают ли SVG-изображения производительность сайта?

В панели Illustrator есть несколько настроек, с помощью которых можно снизить вес файла и очистить выходные данные. В итоге вы получите почти готовую разметку. Даже можно посмотреть код, нажав на кнопку Show Code.

Повышают ли SVG-изображения производительность сайта?

Выжмите еще больше байт с помощью инструментов по оптимизации SVG

После экспорта SVG-графику можно еще сильнее ужать с помощью одного из замечательных инструментов оптимизации SVG. SVGOMG (и его веб GUI-аналог) и SVG Editor от Peter Collingridge – самые популярные инструменты. Более подробно про SVGOMG можете прочитать в статье Guillaume Cedric Marty по оптимизации SVG-изображений.

Включите доставку сжатых SVG-файлов

Последний шаг по оптимизации SVG – активация gzip-сжатия на сервере. SVG – это всего лишь XML-разметка, поэтому она без проблем поддается сжатию.

С точки зрения сжатия выгоды значительные. В приложении J спецификации SVG 1.1 есть сравнительная таблица с примерами несжатых и сжатых SVG-файлов. В подавляющем большинстве результаты в пользу сжатия, размер файла уменьшается на 77-84%.

Заключение

SVG-графика – отличный выбор для интернета. Такая графика используется для создания простых иконок, логотипов и т.д. и зачастую имеет большую производительность, чем растровые копии. Особенно производительность будет заметна, если вы предпримите меры предосторожности, описанные в этой статье.

Автор: Maria Antonietta Perna

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: