Швидкість завантаження вже давно стала одним з найважливіших налаштувань при оптимізації веб-сторінки. Пошукові системи використовують різні критерії для оцінки веб-сайту. У цьому сенсі не тільки оцінюється кількість користувачів, які його відвідують, але й час, який потрібно сторінці, щоб відповісти на запит, також оцінюється. Менший і стислий код або використання механізмів кешування є одними з перевірених рішень для швидкої присутності в Інтернеті, а також використання стиснених зображень. Ці зображення, як креативний та супровідний елемент, вони є великою кількістю різноманітних проектів, що заповнюють Інтернет, але їхній вплив на швидкість сторінок часто недооцінюється.

webp

Цією проблемою, серед іншого, займався пошуковий гігант Google, який з WebP вже презентував у 2010 році свій власний вільний формат зображення - -для швидшого веб-сторінок. Але що насправді стоїть за форматом WebP, який походить від відеокодека VP8? І як він поводиться у порівнянні зі зведеними розмірами, такими як JPEG?

  1. Що таке WebP?
  2. Чому характеризується WebP?
    1. Як працює стиснення з втратами WebP?
    2. Як працює стиснення без втрат з WebP
    3. Чому характеризується анімований WebP?
  3. Як виглядає структура WebP?
  4. WebP проти JPEG: так поводиться WebP порівняно з іншими форматами зображень
  5. Як можна відкрити та перетворити файли WebP?

Що таке WebP?

30 вересня 2010 р. Google оголосив про публікацію нового відкритого стандарту для стиснення 24-бітової графіки з втратами в Інтернеті. Модель для цього стандарту була Формат відео VP8, розроблена компанією On2 Technologies і яку Google придбала того ж року. Після цього Google розширив формат WebP такими функціями, як режим стиснення без втрат, прозорість (альфа-канал) та анімація. Chrome підтримує формат стиснення з кінця 2010 року, але дотепер, як і у Opera, вам доводилося вважати, що багато браузери підтримують WebP лише в експериментальний (як Safari та Firefox, регулярні оновлення яких не підтримуються). Згідно з його власними заявами, Microsoft зараз працює над підтримкою цього у своєму власному браузері Edge.

Постійно оновлювану інформацію про підтримку браузера WebP ви знайдете на caniuse.com.

Все програмне забезпечення для обробки та перегляду WebP за замовчуванням знаходиться під Ліцензія BSD. Наприклад, Google використовує цей формат у Веб-магазині Chrome та мобільних додатках Google+.

Чому характеризується WebP?

Основною метою WebP з самого початку було якомога менше зменшити розмір зображень в Інтернеті. За даними Google, зображення та графіки у форматі WebP складають, більш-менш, 30 відсотківменше, ніж файли PNG або JPEG і вони мають однакову якість зображення. Хоча ці формати базуються на різних методах стиснення —PNG, без втрат та JPG, з втратами - WebP надає обидві можливості. Завдяки цій гнучкості формат підходить як для фотографій, так і для невеликих зображень та графіки. характеристики стиснення, як і інші основні властивості формату WebP, можна узагальнити наступним чином:

  • Стиснення (з втратами)- Стиснення з втратами WebP базується на кодуванні ключових кадрів VP8.
  • Стиснення (без втрат)- Стиснення без втрат WebP спирається на різні методики, що трансформують дані та параметри зображення. У цьому випадку, серед іншого, використовується алгоритм LZ77.
  • Прозорість- 8-бітовий альфа-канал, наданий форматом WebP, також може використовуватися для стиснення RGB із втратами.
  • Метадані: WebP може включати метадані EXIF ​​та XMP, які зазвичай створюються камерами.
  • Колірний профіль- Формат Google може включати вбудовані профілі ICC (записи, що описують кольоровий простір).
  • Анімація: Формат WebP дозволяє зберігати послідовності зображень.

Щоб захистити вашу конфіденційність, відео завантажиться після натискання.

Як працює стиснення з втратами WebP?

Стиснення з втратами WebP використовує той самий метод, що і кодек VP8, заснований на блоках, для обчислення рамки, тобто окремі образи. Кожен кадр розділений на менші сегменти, також відомі як макроблоки. У цих макроблоках кодер може передбачати надлишкову інформацію про рух та колір і віднімати її від блоку. Результат цього передбачувальне стиснення Він складається з інформації з решти блоків та окремої та надлишкової інформації (яка зазвичай містить багато нулів). я знаю кількісно і виконує ентропійне кодування (подання символів через певний бітовий шаблон). Крок квантування - це єдиний процес, коли біти фактично викидаються і відбувається втрата.

WebP використовує a метод арифметичного кодування що є більш ефективним, ніж кодування Хаффмана, яке, наприклад, використовується в JPEG. Обидва методи - це дві різні форми ентропійного кодування. Метод Хаффмана присвоює кожному символу цілу кількість бітів, тоді як арифметичне кодування всієї послідовності символів призначає один довший бітовий код. З цієї причини складність арифметичного кодування більша, але створення бітових надмірностей виключається (лише надмірність у повних повідомленнях).

Як працює стиснення без втрат з WebP

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

Трансформації на основі просторових прогнозів Перетворення кольору Перетворення шляхом віднімання зеленого Індексована трансформація кольору Кодування кольорів кешу
WebP використовує 13 різних режимів передбачення, які використовують перевагу того факту, що сусідні пікселі часто співвідносяться. Для цього реальне значення пікселів прогнозується з уже декодованих пікселів і кодується лише залишкове значення.
Завданням кольорового перетворення є декореляція значень RGB кожного з пікселів. Для цього спочатку зображення ділиться на блоки, перш ніж червоний (R) перетворюється із зеленого (G), а синій (B) із зеленого та червоного. Єдиний, хто зберігає свою цінність, - це зелений.
Додатковий варіант перетворення кольору, в якому значення зеленого виділяється із червоного та синього значень кожного пікселя.
Якщо однозначних значень пікселів мало, формат WebP також пропонує можливість індексувати перетворення кольорів. У цьому процесі визначається кількість однозначних значень RGBA, і якщо число занадто мало, створюється розташування цих кольорів. Це розташування використовується для заміщення значень пікселів відповідним індексом.
Стиснення WebP без втрат може використовувати навіть раніше переглянуті фрагменти зображення для реконструкції нових пікселів. Якщо він не має відповідних результатів, використовується локальний кеш кольорів із останніми 32 кольорами, що використовуються як відправна точка. Це постійно оновлюється.

Дані та параметри перетвореного зображення кодуються ентропічно, використовуючи варіант алгоритму LZ77. Він використовує малі значення для найближчих пікселів у просторі.

Чому характеризується анімований WebP?

Завдяки підтримці анімації, WebP є цікавою альтернативою GIF або APNG. У цьому сенсі він має деякі сильні сторони, такі як 24-бітна глибина кольору та 8-розрядний альфа-канал, але також велика здатність стиснення. Формат WebP, на відміну від конкуруючих форматів, дозволяє стискати анімацію відсутність втрат Що в збиток. Анімований WebP також переконує, коли справа доходить до декодування: оскільки WebP зберігає метадані про те, чи кожен кадр містить альфа-значення, декодеру не потрібно перетворювати кожен кадр окремо для отримання цієї інформації.

За даними Google, перетворення GIF в WebP lossy зменшує розмір файлу до 64 відсотків. У випадку WebP без втрат ми говоримо про 19 відсотків.

техніка ключового кадру формату WebP, згаданого вище, особливо виділяється в анімації, де ключові кадри гарантують високу якість. З цієї причини процес декодування також вимагає використання більш інтенсивний процесор ніж, наприклад, з GIF.

Як виглядає структура WebP?

Файли WebP - це файли-контейнери, які використовують формат контейнера RIFF (Формат файлу обміну ресурсами), розроблений Microsoft та IBM. З цієї причини файл у форматі WebP складається із заголовка RIFF та відповідного вмісту WebP.

Заголовок RIFF/WebP Він складається з наступних трьох 4-байтових послідовностей:

  • FourCC (Код із чотирьох символів) RIFF- Описує тип із чотирма символами ASCII R, I, F та F, які вказують, що це файл контейнера RIFF
  • Розмір файлу: визначає розмір файлу
  • FourCCWEBP- Описує тип із чотирма символами ASCII W, E, B та P, вказуючи, що контейнер RIFF містить файл WebP

Загальний заголовок контейнера RIFF має загальну довжину 12 байт, з яких останні 4 завжди вказують тип файлу, який у цьому випадку буде WebP

У кінці заголовка знаходяться символи Блоки файлів WebP, які в контейнерах RIFF також відомі як "шматки". Кожен шматок має свій заголовок, який включає відповідну інформацію. Деякі можливі блоки верхнього рівня є VP8 (Втрата WebP), VP8L (Без втрат WebP) і VP8X (WebP розширений). Останні визначають файли WebP з додатковою інформацією, такими як метадані EXIF ​​(фрагмент EXIF) або кольоровий профіль ICCP (фрагмент ICCP), а також анімований WebP (фрагмент ANIM).

Тож повна структура файлів у форматі WebP буде приблизно такою:

Розмір фрагмента інформації залежить від того, чи є додаткова інформація та скільки містить файл WebP.

WebP проти JPEG: так поводиться WebP порівняно з іншими форматами зображень

Те, що представляє Google у світі пошукових систем JPEG, також званий JPG, у презентації фотографій та великих зображень у Всесвітній павутині. Більш-менш через чверть століття після його публікації нам важко уявити веб-сайт без такого формату зображення. Найбільша його перевага в порівнянні з такими форматами, як PNG (також широко використовуваний, але, перш за все, для невеликих зображень та графічних зображень, таких як логотипи чи піктограми), без сумніву, полягає в тому, що JPEG дозволяє зберігати місце для зберігання завдяки стисканню з втратами.

У цій найважливішій деталі, WebP також виявляється більш ефективний та гнучкий: З одного боку, формат Google пропонує, крім методу стиснення з втратами, і метод без втрат. З іншого боку, економія місця для зберігання зображень у форматі WebP перевищує економію схожих зображень JPEG. Цей формат JPEG підтримує зображення розміром до 65 535 x 65 535 пікселів, тоді як обмеження WebP становить 16 383 x 16 383, не має значення, враховуючи сферу застосування (веб).

Перевага стиснення, яку WebP має перед JPEG, втрачається, коли стиск високий (приблизно 90 відсотків стиснення). Однак, хоча стиснуті зображення JPEG сильно піксельовані, подібні зображення у форматі WebP зберігають деяку додану вартість.

Як і при порівнянні WebP і JPEG, здається, що при порівнянні WebP проти GIF формат домашнього Google також демонструє переконливі переваги в таких аспектах, як якість та стиснення. Проблема полягає у відсутності підтримки WebP таких браузерів, як Firefox або Microsoft Edge. Поки що користувачі цих веб-браузерів не можуть переглядати зображення або анімацію WebP, оскільки майже жоден оператор веб-сторінки не використовує цей формат.

Основні факти порівняння WebP-JPEG:

WebP JPEG
2010 рік 1992 рік
.WebP .jpeg, .jpg
16 383 x 16 383 65 535 x 65 535
Так Не
Так Так
Так Не
Так Так
Так Не
Обмежений (наприклад, Chrome, Opera, Gmail, IrfanView) Універсальний

Як можна відкрити та перетворити файли WebP?

Файли у форматі WebP досі не можуть бути відкриті в загальних програмах перегляду зображень Windows, Linux та macOS. Однак, якщо ви хочете побачити зображення або анімація закодований у WebP, у вас є кілька варіантів під рукою.

Якщо ви встановили Chrome або Опера просто перетягніть відповідний файл у папку відкрите вікно з будь-якого з двох браузерів. Оскільки обидва браузери підтримують WebP нестандартно, ви можете переглядати відповідний вміст без потреби в додатковому програмному забезпеченні. Це рішення не зовсім зручне, особливо коли ви хочете побачити більше одного зображення чи анімації. Тим, хто не працює з декількома вікнами браузера або не хоче переключатися між ними, слід вибрати IrfanView. Схід безкоштовний переглядач зображень - Він також пропонує підтримку WebP після встановлення офіційного пакета плагінів. Однак програма доступна лише для вікон.

Якщо ви використовуєте рівень сумісності Wine, ви можете встановити IrfanView також на macOS або Linux, щоб відкрити файли WebP за допомогою безкоштовної програми.

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

  • cWebP дозволяє стиснути файл зображення за допомогою WebP. Деякі можливі формати введення включають, але не обмежуючись ними, PNG, JPEG та TIFF. В опціях інструменту ви можете визначити, чи слід стискати зображення із втратами чи без втрат.
  • dWebP це інструмент, за допомогою якого ви можете конвертувати файли WebP в інші формати, такі як PNG (за замовчуванням), BMP, TIFF або PGM.
  • С vWebP, Google пропонує власне рішення для відображення зображень і анімацій WebP на основі OpenGL.
  • WebPmux є найкращим інструментом для роботи з розширеною WebP. За допомогою програми ви можете, наприклад, створювати анімацію у форматі WebP або розширювати метадані та профілі ICC файлів зображень.
  • С gif2WebP Ви можете конвертувати існуючі файли GIF у файли WebP. Як і при звичайному стисненні зображення, ви можете кодувати як з втратами, так і без втрат.