Как ускорить загрузку сайта. Изображения Webp
WebP — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году. Основан на алгоритме сжатия неподвижных изображений (ключевых кадров) из видеокодека VP8. Использует контейнер RIFF.
Для работы с данным форматом существует открытое программное обеспечение, в частности, библиотека libvpx и конвертер webpconv.
Webp и положение сайта в поисковой выдаче
Формат webp - новое требование Google.
Поисковые роботы определяют изображения на сжатие. Положение сайта в выдаче напрямую связано с тем используется формат webp на сайте или нет. При использовании формата webp, сайт поднимается в поиске выше.
Техническое сравнение наиболее распространенных форматов
| Сравнение популярных графических форматов | JPG | WEBP | PNG | GIF |
|---|---|---|---|---|
| год выпуска | 1991 | 2010 | 1996 | 1987 |
| сжатие с потерями | + | + | - | + |
| сжатие без потерь | - | + | + | - |
| анимация | - | + | - | + |
| прозрачность | - | + | + | + |
| прогрессивность (миниатюра для предпросмотра) | + | - | - | - |
Ускорение загрузки
Сжать изображение jpg без потерь на 26% - 60% меньше по размеру по сравнению с PNG. Изображения WebP с потерями на 25–34% меньше сопоставимых изображений JPEG при эквивалентном индексе качества SSIM .
Сжато на 51.61%
Сжато на 50%
Сжато на 27.14%
Формат webp - по умолчанию.
Все готовые блоки сайта на платформе топ.сайт поддерживают автоматическую конвертацию изображений в формат webp.
Алгоритм
Сжатие состоит из двух этапов. На первом делается попытка «предсказать» содержимое одних блоков по уже декодированным (три блока над текущим и один блок слева от него), на втором кодируется ошибка предсказания. Блоки отрисовываются в порядке слева направо и сверху вниз. Режимы предсказания работают с 3 размерами макроблоков:
- 4x4 в канале яркости
- 16x16 в канале яркости
- 8x8 в канале цветности
В VP8 и WebP реализованы режимы предсказания:
- Горизонтальное, H_PRED. Каждый столбец текущего блока есть копия столбца слева от текущего блока.
- Вертикальное, V_PRED. Каждая строка текущего блока есть копия строки над текущим блоком.
- DC предсказание, DC_PRED. Заполняет весь блок одинаковыми значениями, полученными за счет усреднения значений пикселов вышележащей строки и столбца слева от текущего блока.
- Предсказание TrueMotion, TM_PRED. Разработано в On2 Technologies. Кроме строки над блоком и столбца слева от него, используется пиксел, расположенный сверху-слева от блока. Разница между угловым пикселом и строкой сверху записывается в строки блока, при этом к значениям добавляется значение соответствующего пиксела из столбца. Xij = Столбецi + Рядj - Угл. Пиксел.
- Для блоков 4x4 реализовано 6 дополнительных режимов, сходных с V_PRED и H_PRED, но с диагональными направлениями.
Для сжатия ошибок предсказания и подблоков, которые не были предсказаны, используется дискретное косинусное преобразование DCT (и, изредка, преобразование Уолша—Адамара, WHT). Оба преобразования работают с подблоками размером 4х4 пиксела. Реализация преобразований выполнена на представлении чисел с фиксированной точностью, чтобы уменьшить ошибки округления. Коэффициенты DCT и WHT пакуются энтропийным кодеком.
WebP не работает в цветовом пространстве RGB, перед кодированием изображение переводится в YUV с глубиной 8 бит и форматом 4:2:0. Перевод осуществляется согласно стандарту ITU-R BT.601.
Для некоторых изображений может использоваться алгоритм upscaling, когда кодируется не само изображение, а его отмасштабированная (уменьшенная) версия. Декодер проводит обратное преобразование (увеличение изображения).