Підвищують SVG-зображення продуктивність сайту?

19

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

Переваги векторних зображень

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

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

Підвищують SVG-зображення продуктивність сайту?

А ось те ж зображення, але показане на більшому дозволі:

Підвищують SVG-зображення продуктивність сайту?

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

Зараз дуже багато пристроїв з ретина-екранами, і ризик отримати растрові зображення такої якості дуже великий. Один з виходів – зберігати зображення високого дозволу, що сильно вдарить по продуктивності.

Елементи srcset і picture

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

Мета адаптивних зображень – забезпечити пристрій зображенням з найкращим якістю. Це включає в себе підтримку зображення під різні дозволи екрану. Однак браузер сам завантажує саме те зображення, яке підходить під можливості доступного пристрою.

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

У коді srcset виглядає наступним чином:

Підвищують SVG-зображення продуктивність сайту?

Нижче представлений приклад тегу picture:

Підвищують SVG-зображення продуктивність сайту?

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

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-графіка – відмінний вибір для інтернету. Така графіка використовується для створення простих іконок, логотипів і т. д. і часто має більшу продуктивність, ніж растрові копії. Особливо продуктивність буде помітна, якщо ви прийміть запобіжні заходи, описані в цій статті.