Анимация и прозрачность в WebP: почему он заменяет GIF и PNG

Две задачи, которые раньше решали два формата

Если разобрать любой старый сайт, картинки на нём почти всегда делятся на два лагеря. GIF — это всё, что двигается: смешные зацикленные ролики, мигающие баннеры, маленькие подсказки в интерфейсе. PNG — это всё, что должно лежать на фоне без белого прямоугольника вокруг: логотипы, иконки, вырезанные товары, скриншоты с тенью.

Оба формата честно делали свою работу, но каждый — только половину. GIF умеет анимацию, но не умеет нормальную прозрачность и богатый цвет. PNG умеет прозрачность и не теряет ни пикселя, но не двигается и весит много. WebP — формат, который Google представил ещё в 2010 году, — закрывает обе задачи одним файлом: он и анимируется, и прозрачен, и при этом легче обоих предшественников.

Почему GIF устарел: 256 цветов и лишний вес

GIF придумали в 1987 году — он старше большинства читателей этой статьи. И главное его ограничение тянется прямо из тех лет: палитра всего из 256 цветов на весь кадр. Для пиксельной анимации или простой иконки это ещё терпимо, но стоит загрузить туда что-то с плавными переходами — закат, кожу, градиент — и картинка рассыпается на полосы и «грязные» пятна. Дизайнеры даже придумали для этого хитрость с псевдослучайным шумом (дизеринг), но он лишь маскирует проблему и раздувает файл.

Второе слабое место — прозрачность. У GIF она бинарная: пиксель может быть либо полностью видимым, либо полностью прозрачным, без промежуточных значений. Поэтому края анимации на цветном фоне выглядят рваными, с заметной «лесенкой». И всё это — за немалый вес: GIF плохо сжимает движущееся изображение и легко вырастает до нескольких мегабайт ради пары секунд анимации.

Анимированный WebP: 24 бита, альфа и лёгкий вес

Анимированный WebP устроен похоже на GIF — это последовательность кадров с длительностью у каждого, — но кадры хранятся гораздо умнее. Под капотом лежит та же технология, что в видеокодеке VP8: формат запоминает не каждый кадр целиком, а в основном изменения между кадрами. Если в анимации движется только маленький уголок, остальное не дублируется в каждом кадре впустую.

Отсюда — три преимущества, которых GIF лишён по самой своей конструкции:

• Полноценный цвет. WebP хранит 24-битный цвет — это 16,7 миллиона оттенков вместо жалких 256 у GIF. Никаких полос на градиентах и закатах.
• Плавная прозрачность в анимации. 8-битная альфа даёт 256 уровней прозрачности на каждый пиксель, поэтому движущаяся картинка чисто ложится на любой фон — без рваных краёв.
• Сжатие с потерями. Там, где GIF может только хранить пиксели «как есть», WebP умеет аккуратно ужать кадры — как это делает JPEG с фотографиями. Глазу разницы почти не видно, а вес падает в разы.

Насколько именно WebP легче GIF

Это не маркетинговое «лучше», а измеримая цифра. По официальным замерам Google, перевод анимированного GIF в WebP с потерями уменьшает вес в среднем на 64% — то есть файл становится почти втрое легче. Даже бережный режим без потерь даёт около 19% экономии. На реальных анимациях выигрыш часто попадает в диапазон 50–70%.

Что это значит на практике: анимация на 2 МБ в GIF превращается примерно в 700–750 КБ в WebP — при том, что цвет становится богаче, а края прозрачности — чище. Для страницы это меньше трафика, быстрее загрузка и выше позиция в поиске, потому что скорость сайта Google учитывает напрямую.

Прозрачность WebP — даже со сжатием с потерями

Теперь о второй половине истории — о прозрачности, ради которой обычно держат PNG. WebP поддерживает ту же 8-битную альфу, что и PNG: 256 уровней прозрачности, аккуратные мягкие края, тени. Здесь они идентичны.

Но у WebP есть козырь, которого у PNG нет в принципе. PNG умеет только сжатие без потерь — поэтому фотография с прозрачным фоном (например, товар, вырезанный из снимка) в PNG получается очень тяжёлой. WebP же умеет прозрачность вместе со сжатием с потерями — режим, который часто называют «lossy + alpha». Иными словами, можно сильно ужать саму картинку, как фотографию, и при этом сохранить прозрачный фон.

Получается удобная вилка: для пиксель-в-пиксель чёткой графики — WebP без потерь (легче PNG), для прозрачных фотографий — WebP с потерями (резко легче PNG). PNG же остаётся скорее «универсальным запасным аэродромом» для программ, которые WebP пока не открывают. Подробнее о паре прозрачности мы разбираем в материале про WebP и PNG.

WebP против APNG и видео

WebP — не единственный «современный GIF». У него есть два конкурента, и честно сказать, где каждый хорош, важнее, чем расхваливать один формат.

APNG (анимированный PNG) тоже даёт 24-битный цвет и плавную альфу и поддерживается почти везде. Но он умеет только сжатие без потерь, поэтому файлы выходят крупнее: один и тот же ролик в APNG обычно в 2–3 раза тяжелее, чем в WebP с потерями. APNG хорош там, где нужна идеальная попиксельная чёткость и абсолютно прозрачный фон, — например, для анимированных стикеров и UI-иконок.

Видео (MP4/WebM) — лучший выбор для длинных или «тяжёлых» анимаций: оно сжимает движение ещё агрессивнее любого WebP. Минус — у видео нет прозрачности (в большинстве браузеров) и его сложнее вставить как простую «картинку». Поэтому правило простое: короткая зацикленная анимация, которую хочется вставить тегом <img>, — это WebP; полноценный ролик на полэкрана — это видео.

Когда что выбрать: короткая шпаргалка

Чтобы не запутаться, держите простое правило по типу контента:

• Короткая зацикленная анимация на сайте (реакция, демо интерфейса, маленький баннер) → анимированный WebP. Легче GIF, цвет богаче.
• Прозрачное фото или сложная картинка с прозрачным фоном (товар, баннер с полупрозрачностью) → WebP с потерями (lossy + alpha). Резко легче PNG.
• Чёткий логотип, иконка, скриншот с прозрачностью → WebP без потерь (легче PNG) либо PNG, если нужна максимальная совместимость.
• Длинное или плавное видео-подобное движение → видео (MP4/WebM), а не анимированная картинка вообще.
• Нужно открыть файл в старой программе без поддержки WebP → конвертируйте назад в GIF или PNG.

Как сделать WebP из GIF и PNG

Самое приятное: перейти на WebP можно без установки программ и без потери исходников. Конвертер сам соберёт все кадры GIF в один анимированный WebP, а PNG превратит в компактную прозрачную картинку.

Нужны и другие направления? Есть конвертеры PNG → WebP для прозрачных картинок и обратные пути WebP → GIF и WebP → PNG — на случай, когда файл нужно открыть в старой программе. Полный список преобразований всегда на странице всех форматов.