Как конвертировать изображение в WebP (и зачем это делать)

Если вы уже запускали тест в Google PageSpeed Insights и получили предупреждение «Показывайте изображения в современных форматах», Google просит именно об этом: конвертировать ваши JPG и PNG в WebP. Это одно из вмешательств с наибольшим влиянием на производительность сайта — и одно из самых простых во внедрении.

Зачем конвертировать в WebP?

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

• На 25–35% меньший вес, чем JPG в режиме lossy (сжатие с потерями)
• На 20–30% меньший вес, чем PNG в режиме lossless (сжатие без потерь)
• Поддержку прозрачности (альфа-канал) — в отличие от JPG, где её нет
• Поддержку анимации — в отличие от PNG, где она не встроена

На практике эффект вполне реален. Галерея товаров интернет-магазина из 20 фото по 300 КБ в JPG (всего 6 МБ) может уменьшиться до 4 МБ в WebP при том же визуальном качестве — сокращение веса страницы на 33%. Для Google это означает более быстрый LCP, более высокую оценку в PageSpeed и потенциальное улучшение ранжирования.

Когда не стоит использовать WebP

Несмотря на то что это лучший формат для современного веба, есть ситуации, где WebP пока не лучший выбор:

• Email-маркетинг: почтовые клиенты вроде Outlook и Apple Mail поддерживают WebP непоследовательно. Для HTML-писем JPG и PNG остаются более надёжным выбором.
• Полиграфическая печать: типографии и традиционное ПО для печати не работают с WebP. Для файлов, предназначенных для печати, используйте JPG высокого качества или PNG.
• Платформы с ограничениями по формату: YouTube не принимает WebP для загрузки миниатюр (принимает JPG и PNG). Некоторые формы устаревших систем требуют JPG. Перед конвертацией проверяйте, какой формат принимается.
• Файлы, которые должны открываться у любого человека на компьютере: конечные пользователи, кликающие по ссылкам для скачивания и открывающие файл в стандартном просмотрщике Windows, могут столкнуться с проблемами при работе с WebP в старых версиях системы.

Способ 1 — онлайн-конвертация (быстрее всего, ничего устанавливать не нужно)

Для разовой конвертации изображений — или когда нужен быстрый результат без всякой настройки — онлайн-конвертер самый прямой путь. Конвертер изображений ImageTools конвертирует JPG, PNG и другие форматы в WebP прямо в браузере, не отправляя файлы на внешние серверы.

1. Откройте Конвертер изображений.
2. Выберите или перетащите изображения в область загрузки.
3. Выберите WebP в качестве выходного формата.
4. Скачайте сконвертированные изображения по отдельности или в виде ZIP, если файлов несколько.

Способ 2 — WordPress (автоматически для всего сайта)

Для сайтов на WordPress самый эффективный подход — использовать плагин, который автоматически конвертирует и отдаёт WebP, без необходимости вручную переобрабатывать каждое изображение.

WordPress 6.1+ (нативная конвертация)

Начиная с версии 6.1, WordPress автоматически конвертирует изображения в WebP при загрузке, если сервер поддерживает библиотеку libwebp (у большинства современных серверов с PHP 8+ она есть). Вам не нужно ничего делать — WordPress сам создаёт версии изображений в WebP и отдаёт нужный формат каждому браузеру автоматически.

Чтобы проверить, включена ли функция: зайдите в Настройки → Медиафайлы и найдите опцию конвертации в WebP. Если её нет, сервер не поддерживает эту функцию — рассмотрите вариант с плагином.

С плагинами (для старых версий или большего контроля)

Самые популярные плагины для конвертации в WebP в WordPress:

• ShortPixel Image Optimizer — конвертирует новые изображения при загрузке и позволяет переобработать всю существующую медиатеку. Бесплатно до 100 изображений в месяц.
• Imagify — простой интерфейс, автоматическая конвертация и опция пакетной оптимизации. Есть бесплатный тариф.
• WebP Express — плагин, сфокусированный именно на WebP, конвертирует и автоматически настраивает правила сервера.

Способ 3 — командная строка с cwebp (для разработчиков)

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

Установка

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — скачайте бинарный файл здесь: https://developers.google.com/speed/webp/download

Базовая конвертация

# Конвертировать файл JPG в WebP с качеством 80
cwebp -q 80 foto.jpg -o foto.webp

# Конвертировать PNG в WebP lossless (без потерь)
cwebp -lossless logo.png -o logo.webp

# Конвертировать все JPG из папки (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Параметр -q управляет качеством (0–100). Для веба значения от 75 до 85 обеспечивают лучший баланс между визуальным качеством и размером файла. Используйте -lossless для изображений, которым нужно сжатие без потерь (логотипы, скриншоты с текстом).

Способ 4 — Node.js с sharp (для пайплайнов сборки)

Для проектов на Node.js — сайтов на Next.js, Gatsby, Nuxt или любой автоматизированной сборки — библиотека sharp является самым эффективным вариантом для конвертации в WebP в пайплайне:

// npm install sharp

const sharp = require('sharp');

// Конвертировать JPG в WebP с качеством 80
sharp('foto.jpg')
  .webp({ quality: 80 })
  .toFile('foto.webp');

// Конвертировать PNG в WebP lossless
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Конвертировать все файлы из папки
const fs = require('fs');
const path = require('path');

fs.readdirSync('./images')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./images', file);
    const output = path.join('./images', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharp использует нативную библиотеку libvips и значительно быстрее чисто JavaScript-решений — идеально подходит для генерации версий WebP во время сборки статических сайтов.

Как внедрить WebP с запасным вариантом для старых браузеров

Хотя совместимость WebP в 2026 году превышает 97%, всё ещё могут встречаться контексты, где нужен запасной вариант — корпоративные системы с IE11, очень старые устройства или просто для максимальной гарантии совместимости.

Правильное решение — HTML-тег <picture>, который позволяет задать альтернативные источники изображения по порядку предпочтения:

<!-- Браузер использует WebP, если поддерживает, иначе JPG -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Описание фото" width="800" height="600">
</picture>

<!-- С несколькими размерами для экранов Retina -->
<picture>
  <source
    srcset="foto-800.webp 800w, foto-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
    type="image/jpeg">
  <img src="foto-800.jpg" alt="Описание фото"
    width="800" height="600" loading="lazy">
</picture>

Браузер проверяет источники в заданном порядке: если WebP поддерживается, используется <source> с type="image/webp". Если нет — используется JPG из <img>. Тег <img> в конце обязателен — именно он задаёт alt, размеры и поведение по умолчанию.

Настройка сервера для автоматической отдачи WebP (Apache)

Альтернатива <picture> — настроить сервер так, чтобы он определял, принимает ли браузер WebP, и автоматически отдавал нужную версию. В Apache добавьте в .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Отдаём .webp, если файл существует и браузер его принимает
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

При такой настройке достаточно держать файлы .webp рядом с оригиналами в той же папке. Apache определяет, принимает ли браузер WebP, по заголовку Accept, и отдаёт нужную версию без каких-либо изменений в HTML.

Проверка результата в PageSpeed

После внедрения WebP запустите Google PageSpeed Insights (pagespeed.web.dev) для URL сайта. Предупреждение «Показывайте изображения в современных форматах» должно исчезнуть или значительно уменьшиться. В панели возможностей вы увидите примерную экономию в КБ для каждого ещё не сконвертированного изображения.

Другой способ проверки: откройте Chrome DevTools (F12), перейдите на вкладку Network, отфильтруйте по "Img" и посмотрите на колонку "Type" у загруженных изображений. Если там указано webp, конвертация работает.

Какой уровень качества использовать при конвертации?

Качество WebP работает по той же логике, что и JPG: более высокие значения сохраняют больше деталей, но создают файлы большего размера. Разница в том, что при одинаковом визуальном качестве WebP обычно использует числовое значение качества на 10–15 пунктов ниже, чем эквивалентный JPG.

Часто задаваемые вопросы