Оптимізуємо графіку з допомогою WebP



За даними сайту Web Perfomance Today, середній вага сторінки в 2015 році 1109 КБ. За прогнозами, до 2018 буде близько 2 МБ. Завантаження зображень займає в середньому 64% (711 КБ) всього часу завантаження сторінки. Тому починати оптимізацію швидкості завантаження сторінки потрібно саме з графіки.

Графіка оптимізується в двох напрямках:
  • зменшення кількості запитів
  • зменшення ваги графіки
Для зменшення запитів використовуються спрайт і вставка графіки через
base64
. Для зменшення ваги графіка стискається (з і без втрати якості).
На жаль, стиснення часто призводить до поганої якості і невеликого виграшу в розмірі. Можливо тому Google в 2010 році створив свій формат стиснення зображень — WebP.

Підтримка
Повіримо Can I Use, який каже що WebP підтримується 64,77% у світі і 56,22% в Росії, що дає нам підставу використовувати його. З браузерів це Chrome, Opera, Opera Mini, Mozilla, Chrome для Android.

Тестуємо стиснення
Перед використанням WebP, перевіримо наскільки це ефективно. Я скачав по 12 зображень
png
та
jpg
. І порівняв розміри до і після оптимізації:

  • Оригінальні файли — 6,7 МБ
  • Після стиснення — 5,4 МБ
  • Оригінальні у форматі WebP — 1,6 МБ
  • Після стиснення в форматі WebP — 1,8 МБ


Виграш у розмірі вийшов 3.8 МБ, тобто 70.3%. Оскільки зображення в середньому це 64%, то виграш в швидкості завантаження сторінки складе ~44.8% для користувачів, чиї браузери підтримують WebP!

Використовуємо WebP
Використовувати новий формат можна через тег
img
і через
css
властивість
background
. Звичайно, не забудемо про користувачів без підтримки цього формату.

Щоб визначити підтримку WebP, можна скористатися Modernizr або снипетом. Після цього написати fallback:

.no-webp .logo { background-image: url(logo.png); }
.webp .logo { background-image: url(logo.webp); }

Через
img
здавалося б, можна теж зробити два зображення, і приховувати одне з них. Але проблема в тому, що браузер все одно запросить і PNG і WebP, що навпаки збільшить час завантаження сторінки.

Ще один спосіб — запитувати зображення у форматі WebP, якщо воно не загрузиться, то показувати PNG.

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">

У цього способу схожа проблема — якщо браузер не підтримує WebP, він буде робити по 2 запиту на кожну картинку, що збільшить час завантаження.

Інший варіант
Не знайшовши нативного рішення, я написав невелику бібліотеку simple-webp, яка вирішує проблему двох запитів.

Приклад використання:
  • Додати в шапку
    <script async src="simple-webp.min.js">
  • Замість стандартних зображень, написати по шаблону
    <noscript data-webp><img src="example.png" alt=""></noscript>


Бібліотека перевіряє підтримку формату WebP, після цього додає/прибирає клас
webp/no-webp
до
html
і якщо браузер підтримує WebP, то бібліотека замінить розширення вашого зображення на
.webp
і завантажить його. Інакше браузер завантажить зображення в оригінальному форматі.

Наприклад якщо браузер підтримує WebP, то замість
example.png
завантажиться
example.webp
якщо немає —
example.png
.

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

Бібліотека знаходиться в публічному доступі на Github, займає 2 КБ в стислому вигляді.

P. S. У прикладах для оптимізації я використовував додаток під OS X — ImageOptim. Для конвертації в WebP — WebPonoize.

P. S. S. Завантажити архів з зображеннями, на яких я робив порівняння можна посилання.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.