От автора: в поддержку использования масштабируемой векторной графики или SVG в интернете говорит несколько положительных факторов. Относительно небольшой вес, безусловно, один из них. Однако тут есть некоторые оговорки. Давайте разбираться.
Преимущества векторных изображений
В основе растровых изображений (JPEG, PNG и т.д.) лежит сетка из квадратных пикселей. Чем больше изображение, тем больше используется пикселей, что увеличивает размер файлов.
Пиксельная графика плохо масштабируется, и это не единственный минус. Ниже представлено JPEG-изображение цветка с размерами 300 х 225px:
А вот то же изображение, но показанное на большем разрешении:
Обратите внимание на нечеткие края, размытие и общий спад качества изображения.
Сейчас очень много устройств с ретина-экранами, и риск получить растровые изображения такого качества очень велик. Один из выходов – хранить изображения высокого разрешения, что сильно ударит по производительности.
Элементы srcset и picture
К счастью современный HTML дает нам спасательный круг в виде адаптивных изображений (элементы srcset и picture). На момент написания статьи оба тега поддерживаются в последних версиях всех основных браузеров за исключением IE11 и Opera Mini.
Цель адаптивных изображений – обеспечить используемое устройство изображением с наилучшим качеством. Это включает в себя поддержку изображений под различные разрешения экрана. Однако браузер сам загружает именно то изображение, которое подходит под возможности доступного устройства.
Хотите подробно разобраться в этих техниках, прочитайте статью Saurabh Kirtani «создание адаптивных изображений с помощью srcset».
В коде srcset выглядит следующим образом:
|
1 |
<img srcset="image_3x.jpg 3x, image_2x.jpg 2x, image_1-5.jpg 1.5x" src="image.jpg" alt="image"> |
Ниже представлен пример тега picture:
|
1 2 3 4 5 |
<picture> <source media="orientation:landscape" srcset="retina-horizontal-image.jpg 2x, horizontal-image.jpg"> <source media="orientation:portrait" srcset="retina-vertical-image.jpg 2x, vertical-image.jpg"> <img src="image.jpg" alt="image"> </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:
В панели Illustrator есть несколько настроек, с помощью которых можно снизить вес файла и очистить выходные данные. В итоге вы получите почти готовую разметку. Даже можно посмотреть код, нажав на кнопку Show Code.
Выжмите еще больше байт с помощью инструментов по оптимизации 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.
