Використовуємо WebP сьогодні


Це переклад статті хлопців з Aristotle Interactive.
Кажуть, фотографія коштує тисячі слів. Але в мережі, фотографія може займати тисячу кілобайт і більше! За даними HTTP Archive, зображення в середньому займають до 64% веб-сторінки. Враховуючи це, оптимізація зображень — вкрай важливий аспект, особливо беручи до уваги те, що багато користувачів просто підуть з сайту, якщо він не завантажиться за кілька секунд.

Проблема з оптимізацією зображень у тому, що ми хочемо зберегти розмір зображень, не жертвуючи при цьому якістю. Попередні спроби створити типи файлів, які б оптимізували зображення краще, ніж стандартні JPEG, PNG і GIF, успіху не мали.
Знайомимося з WebP
WebP — формат зображень, створений в 2010 році і розвивається компанією Google. Цей формат забезпечує стиснення зображень як з втратами та без втрат. Деякі великі компанії, такі як Google, Facebook та eBay, радять використовувати цей формат для стиснення зображень.
У нашій компанії ми завжди шукаємо методами поліпшення продуктивності сайтів. Ми запустили кілька A/B-тестів для розуміння впливу WEBP на якість зображення і яким способом його краще впровадити в проекти наших клієнтів.
Головна причина, чому ми почали впроваджувати WebP зменшення розміру файлу.
Згідно з Google:
  • WebP стискає зображення без втрат на 26% краще, ніж PNG.
  • WebP стискає зображення з втратами краще, ніж JPEG на 25-34% при однаковому індекс структурного подібності (SSIM)
  • WebP підтримує прозорість без втрат (відому, як альфа-канал) при всього лише 22% додатковому розмірі.
Наші тести показали переваги і недоліки формату зображень WebP:





Переваги Недоліки Менший розмір файлу Погана підтримка браузерами Покращений алгоритм стиснення Спотворення має пластиковий вигляд Більш якісний переходи кольору Незручний інтерфейс експорту Маска альфа-каналу
Якість зображеньWebP використовує новий алгоритм стиснення, тому спотворення (тобто деформація і погіршення якості) виглядають інакше щодо інших типів файлів. WebP залишає чіткі краю фотографії, але при цьому погіршується деталізація і текстура, що неминуче при стиску з втратами. У той час як порівнянний JPEG-файл показує тремтіння на суцільних ділянках зображення, WEBP може похвалитися гладкими переходами навіть на найнижчих налаштуваннях якості. Недолік цього у тому, що обличчя людей можуть виглядати пластиковими або постеризированными при низькій налаштування якості.
Difference in quality between JPEG and WebP
Різниця в якості між JPEG і WebP. Повна версія
Difference in zoomed-in quality between JPEG and WebP
Різниця в якості між JPEG і WebP при наближенні. Повна версія

Є ще кілька речей, які можна розглянути щодо формату WebP. Налаштування стиснення не повторюють в точності такі в JPEG. Не варто очікувати, що 50%-якість JPEG буде відповідати 50%-якістю WebP. У випадку WebP якість падає досить стрімко, так що починати краще з найбільших значень і поступово їх зменшувати.Інший плюс на користь WebP — здатність додавати маску альфа-каналу, прямо як в PNG. На відміну від конкуруючого формату, зображення формату WebP ви можете стиснути до однієї десятої розміру зображення PNG. Це дійсно те, чим виділяється WebP.
Один приклад з життя: файл PNG розмірів 880Кб (24-бітне зображення з альфа-каналом) було стисло до 41Кб — стиснення в 95%! Хоч це і не звичайна ситуація, але можливості WebP бачимо наочно.
Difference in texture quality
Різниця в якості текстур. Повна версія

Для подальшого зменшення розміру файлу, ми можемо не включати метадані прибравши галочку «Зберегти Метадані» у вікні збереження редактора зображень. Для ще більших результатів, можна вибрати «альфа-канал з втратами». Налаштування якості для альфа-каналу застосовуються і до самого зображення. Наприклад, 50%-якість зображень матиме 50%-якість альфа-каналу. У нашому тестуванні, ми очікували спотворення краю маски, однак були також помітні зміни всього зображення. Звичайно, це варіант для подальшого зменшення розміру, але тоді варто дуже ретельно стежити за якістю зображення. Також, зверніть увагу на небажані смуги в альфа-каналі.
Difference in alpha channel quality
Різниця в якості альфа-каналу. Повна версія

Ми дуже зраділи, коли виявили Плагін для Photoshop для підтримки WebP. З ним можна легко настроювати якість WebP-зображень. Правда, інтерфейс плагіна залишає бажати кращого. В даний час ви не можете переглянути зображення для оцінки параметрів якості.
WebP Photoshop plugin
WebP Плагін для Photoshop.

Як обхідного шляху, можна порівняти файли в Google Chrome. Відкриття діалогового вікна «Зберегти» також незручно в Photoshop. Для цього ми призначили гарячу клавішу, щоб не використовувати постійно діалогове вікно. Незважаючи на незручності, це все-таки варто того.
З відмінними показниками стиснення, гарною якістю і альфа-каналом, WebP виглядає хорошим суперником поточним форматів зображень.
Незважаючи на багатообіцяючі результати тестування, немає однозначного лідера серед всіх форматів. Хоч WebP і показує себе вражаюче серед інших форматів JPEG і 8-бітний PNG іноді все ще краще WebP за розміром і/або якості. Тому, радимо провести власне тестування до того, як будете перекладати всі свої зображення на WebP, тому що він може не зовсім відповідати Вашим вимогам.Реалізація
Визначивши, що WebP може бути ефективним інструментом для нас, ми звернулися до наших розробників для реалізації цього формату. WebP повністю підтримується браузерами Chrome, Opera, Opera Mini, Android-браузер Chrome для Android. Firefox, Internet Explorer і Safari не мають повної підтримки, хоча у Firefox з WebP своя історія. На щастя, є декілька способів відображати WebP в цих браузерах.
Ми знайшли 3 способи підтримки цього формату. Нам важливо було розуміти, що ми використовуємо найкращий засіб щодо розміру сторінки, пам'ятаючи, що індекс швидкості — це ключова метрика і беручи до уваги будь-які необхідні полифиллы Javascript.
Ми провели 4 випробування, щоб визначити, який формат нам краще підходить. Перше використовувало JPEG як контрольний зразок, а решта 3 використовували підходи, описані нижче. Ми використовували JPEG-зображення і WebP-зображення однакового якості (269Кб JPEG і 52Кб WebP).
Результати всіх тестів доступні в PDF.
У другому випробуванні, ми включили WebPJS, полифилл розміром 67Кб, створений Домініком Хомбергером. Він забезпечує підтримку WebP у всіх сучасних браузерах, навіть в IE6 і вище. Полифилл зручний тим, що не потрібно змінювати img-тег у вашому коді, потрібно просто змінити розширення зображень .jpg і .png на .webp.
Наступний підхід був у використанні Picturefill, полифилла, який дозволяє вам використовувати тег, навіть коли він повністю не підтримується. З його допомогою можна використовувати  для віддачі WebP і, якщо формат не підтримується браузером, віддавати йому JPEG, PNG або інший формат.
Останнє випробування було у використанні файлу .htaccess на сервері для впровадження WebP. Цей варіант був розроблений Вінсентом Орбахом.
Використовуючи його, код .htaccess дивиться, чи є WebP-версія кожного зображення на сторінці. Якщо браузер підтримує WebP і WebP-зображення доступно, віддається воно, а не JPEG або PNG. Це зручно і не потрібно змінювати розмітку веб-сторінки.
Після перегляду результатів, ми уклали, що WebP-полифилл (з другого тесту) — найбільш легковажне рішення, яке працює у всіх браузерах, але ми не були задоволені метрикою індексу швидкості при використанні цього методу. WebP-полифилл відображає зображення гірше, ніж контрольний тест JPEG і гірше інших реалізацій, крім iOS. Ми схильні використовувати цю реалізацію з-за кращої підтримки браузерами.
Також було відмічено, що на iOS-пристроях файли займали на 100Кб більше, ніж на інших пристроях. Ми виявили, що в iOS5.1 в і IE 8 і IE9, WebP-зображення завантажувалося 3 рази. Хоч додаткові 2 рази — це не є добре, займало місця це все ж менше, ніж JPEG-еквівалент. Ми не тестували це в нових версіях iOS, можливо там це вже було виправлено.
Погляд у майбутнє
Наша команда вирішила реалізувати метод, використовуваний в 3 випробуванні, використовуючи тег  для віддачі WebP-зображень браузерам, які їх підтримують і віддачі  JPEG або PNG тим, які про WebP нічого не знають.
Ми вважаємо, що це найкращий спосіб прогрессвного поліпшення і він підтримує віддачу зображення в підтримується браузером форматі.
Спочатку ми використовували метод з полифиллом, але порахували, що результат не буде ідеальним.
WebP поки не зможе повністю замінити JPEG або PNG, але це дуже крутий інструмент в ваш арсенал.

Від перекладача: Автори використовували  iOS 5.1 тому, що в момент тестування сайт WebPageTest.org підтримував тільки цю версію системи. IE8 і IE9, щоб подивитися, як WebP буде працювати в таких старих браузерах + для їх клієнтів все ще важливі ці браузери. Зараз вже повно і онлайн-версій конвертерів: приклади.

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

0 коментарів

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