Как перевести картинки в WebP

Представьте: ваш сайт грузится 5 секунд. Половина посетителей уходит, не дождавшись. А всё потому, что на главной лежат 8 PNG-картинок по 2 МБ каждая. Знакомо?

Проблема не в дизайне и не в коде. Проблема в **формате картинок**. PNG и JPG — устарели. Для веба есть формат лучше — WebP. Он даёт ту же картинку, но весит в 2 раза меньше. Это прямо влияет на скорость сайта, а скорость — на позиции в поиске и конверсию.

В этой статье — как перевести все картинки в WebP. Быстро, бесплатно, без потери качества.

Что такое WebP и почему это важно

WebP — формат изображений от Google, созданный специально для веба в 2010 году. Внутри — современные алгоритмы сжатия, которые дают тот же визуальный результат при весе на 25–50% меньше.

Пример из практики:

PNG 1920×1080, интерфейс — 850 КБ → WebP — 210 КБ (экономия 75%)
JPG 1200×800, фото товара — 320 КБ → WebP — 140 КБ (экономия 56%)
GIF 500×500, анимация — 1.8 МБ → WebP (анимированный) — 620 КБ (экономия 66%)

Умножаем на 20 картинок на странице — и получаем экономию в несколько мегабайт. Это секунды загрузки.

Поддержка в браузерах

WebP поддерживают все современные браузеры — Chrome, Firefox, Safari (с 14-й версии, то есть с 2020 года), Edge, Opera. В 2026 году охват — **больше 97% пользователей**.

Для оставшихся 3% используется тег <picture> с fallback на JPG:

<picture>
    <source srcset="/images/photo.webp" type="image/webp">
    <img src="/images/photo.jpg" alt="Описание">
</picture>

Современные браузеры возьмут WebP, старые — обычный JPG. Все довольны.

Зачем переводить в WebP

1. Скорость загрузки → позиции в поиске

Google и Яндекс учитывают скорость страницы в ранжировании. Каждая секунда задержки — минус к позициям. WebP режет вес картинок в 2–3 раза — это самая быстрая оптимизация скорости из всех возможных.

2. Конверсия → деньги

По исследованиям Google, каждая дополнительная секунда загрузки снижает конверсию на 7–20%. Если сайт продаёт — WebP напрямую влияет на выручку.

3. Трафик пользователей

Больше половины трафика в России — с мобильных, часто с мобильного интернета. Меньше вес — быстрее загрузка — меньше раздражения.

4. Меньше нагрузка на хостинг

Меньше вес файлов — меньше трафика — дешевле хостинг или больше запас прочности.

Способы перевести картинки в WebP

Есть несколько путей — от ручного до полностью автоматического. Разберём по возрастанию удобства.

Способ 1. Photoshop / GIMP (по одной)

Photoshop: File → Export → Export As → выбрать формат WebP.

GIMP: File → Export As → выбрать расширение .webp.

Плюс: полный контроль.
Минус: долго. Если у вас 100 картинок — это несколько часов вручную.

Способ 2. Онлайн-конвертеры (по одной или группами)

Способ 3. Наш конвертер — бесплатный, русский, batch по 10 файлов

Мы сделали свой — быстрый, без рекламы, без регистрации. Что умеет:

Принимает PNG, JPG, GIF
До 10 файлов за раз (batch)
До 10 МБ на файл
Настройка качества (от 50% до 100%)
Скачивание каждого файла отдельно
Не хранит файлы на сервере — всё в оперативной памяти
Полностью на русском

Открыть: /tools/image-converter/

Использовать так:

Открыть страницу конвертера
Перетащить 10 картинок в зону загрузки
Выбрать качество (для веба оптимально 80–85%)
Нажать «Конвертировать в WebP»
Скачать готовые файлы

За минуту получаете 10 оптимизированных файлов. Экономия в весе — 30–70% в зависимости от картинки.

Способ 4. Автоматизация — когда картинок сотни

Если у вас свой сайт на CMS — можно настроить автоматическую конвертацию при загрузке. Способы:

Для разработчиков: написать хук на загрузку файла, который прогонит его через `imagewebp()` (PHP) или `cwebp` (Linux)
Для CMS с поддержкой: в современных CMS конвертация в WebP часто встроена или включается плагином

Где хранить WebP и как подключать

Есть 2 подхода:

Подход 1. Только WebP

Удаляете старые JPG/PNG, оставляете только WebP. Работает в 97% браузеров, для остальных — картинки не покажутся. Быстро и просто, но рисковано, если ваша аудитория сидит в старых браузерах.

Подход 2. WebP + fallback через `<picture>`

Храните оба формата. Современные браузеры берут WebP, старые — JPG. Чуть больше места на диске, но 100% совместимость. Рекомендуем именно так.

Сжатие vs качество: какое качество ставить

В нашем конвертере можно выставить качество от 50 до 100. Что выбрать:

100% — картинка без потерь, но вес почти как у исходника. Не имеет смысла
85% — оптимально для фото и картинок с мелким текстом
80% — стандарт для веба. Разницу с исходником глаз не видит
70% — если важнее вес, а качество чуть менее критично
50–60% — для иконок и маленьких картинок

Начните с 82% — это дефолт в нашем конвертере.

Что НЕЛЬЗЯ переводить в WebP

Иконки SVG — они и так векторные, меньше не станут
Картинки для email — не все почтовые клиенты поддерживают WebP
Логотипы, где важна точность пикселей — иногда PNG даёт чётче края

Пошаговый план оптимизации

Соберите все картинки сайта в одну папку
Прогоните через наш конвертер — /tools/image-converter/ — пачками по 10
Замените файлы на сервере: JPG/PNG → WebP
Обновите HTML: замените <img src="photo.jpg"> на <picture> с WebP + fallback
Проверьте через Google PageSpeed Insights — увидите прирост скорости
Проверьте в Яндекс.Вебмастере — обычно уже через неделю заметен рост поведенческих

Как это работает в Kuznya CMS

Мы в своём движке Kuznya CMS сделали конвертацию в WebP автоматической. Когда загружаете картинку через админку — движок сам создаёт WebP-версию и подставляет её на страницах. Клиенты не думают об оптимизации — она работает по умолчанию.

Это одна из причин, по которой мы делали движок — убрать рутину из работы над сайтом. Покупатель один раз настраивает — и больше не возвращается к вопросам оптимизации картинок.

Если хотите посмотреть, как это работает — откройте витрину готовых сайтов или загляните в документацию.

Итог

WebP — не модная фишка, а рабочий инструмент оптимизации. Экономия веса 30–70% — это секунды загрузки, которые прямо влияют на позиции в поиске и на конверсию.

Если картинок немного — переведите их вручную через наш конвертер. Если проект большой — настройте автоматизацию в CMS.

Не откладывайте. Один час работы с картинками — и сайт грузится заметно быстрее. Это самая дешёвая оптимизация из всех возможных.

Как перевести картинки в WebP: зачем и как (2026)