Туториалы

HEIC в WebP: современный формат для веб-разработчиков

koboshiCo-founder
·4 мин чтения
Кратко

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

Пользователь загружает фото, снятое на iPhone. Файл в HEIC, примерно 1,8 МБ. Ваш тег <img> не может на него рассчитывать: у HEIC нет нативной поддержки в Chrome, Firefox или Edge. Поэтому изображение становится либо JPG на 3,4 МБ, либо WebP примерно на 1,2 МБ без видимой разницы. Именно из-за этого разрыва WebP — ответ для фото, которые приходят в HEIC.

Этот гайд охватывает конвертацию HEIC в WebP, сравнение размеров между форматами и варианты от браузерного инструмента до shell-команды, которую можно встроить в сборку.

Почему WebP, а не HEIC

HEIC отлично хранит фотографии, примерно вдвое меньше JPEG при равном качестве. Но как формат доставки в вебе он бесполезен. Chrome, Firefox, Edge и Safari поддерживают WebP годами, тогда как поддержка HEIC есть только в Safari и ещё в паре специфических мест. Нельзя полагаться на HEIC для изображений, загружаемых пользователями, и именно поэтому существуют пайплайны конвертации.

WebP закрывает ту же нишу, что и HEIC: это формат с потерями на современном сжатии, с режимом без потерь и альфа-прозрачностью. Для фотографии практическая разница между WebP и JPG при одинаковом визуальном качестве — файл примерно на 25-35 процентов меньше. Это ощутимая экономия на странице, насыщенной изображениями.

Сравнение размеров

Одно и то же фото на 12 МП, одинаковое визуальное качество:

ФорматРазмерБраузерыПримечания
HEIC~1,8 МБтолько Safariисходный формат с iPhone
JPG~3,4 МБвсебазовый уровень
WebP~1,2 МБвсес потерями, с поддержкой альфы
PNG~24 МБвсебез потерь, не для фото

В гайде по веб-форматам изображений есть полное сравнение, если нужен контекст того, как WebP соотносится с JPG и PNG.

Вариант 1: конвертация в браузере

Самый простой путь — инструмент, который полностью работает на устройстве. Конвертер HEIC в WebP декодирует HEIC локально с помощью WebAssembly и пишет файлы WebP, так что фото никогда не покидают машину. Можно задать качество, конвертировать целую папку и скачать результат ZIP-архивом. Это работает для разовых конвертаций и для дизайнера или редактора, которому некомфортно в командной строке.

Вариант 2: конвертация в командной строке

Для пайплайна классический стек — libheif плюс libwebp. На macOS с Homebrew:

brew install libheif webp

Затем конвертируйте с помощью heif-convert и cwebp:

heif-convert input.heic output.png
cwebp -q 82 output.png -o output.webp

Или пропустите промежуточный файл с помощью ffmpeg:

ffmpeg -i input.heic -c:v libwebp -quality 82 output.webp

Обе команды понимают аргумент качества, а у cwebp самый широкий набор настроек, включая режим без потерь и -m 6 для самого медленного и самого маленького результата. Для папки заверните это в цикл:

for f in *.heic; do heif-convert "$f" "${f%.heic}.png"; cwebp -q 82 "${f%.heic}.png" -o "${f%.heic}.webp"; done

Этого достаточно, чтобы встроить в shell-скрипт или задачу CI, которая обрабатывает загрузки на стороне сервера.

Выбор качества и формата в WebP

Два решения влияют на результат сильнее всего:

  • С потерями или без. cwebp -lossless или -q 100 с флагом без потерь сохраняет каждый пиксель, но даёт файлы больше. Используйте его для скриншотов, логотипов и всего с плоским цветом и текстом. Для фото используйте режим с потерями.
  • Число качества. -q 82 — разумное значение по умолчанию для фото: визуально чисто и заметно меньше JPG. Для требовательных задач -q 90 стоит больше байтов, но ближе к исходнику. Тот же компромисс, что и с настройками качества JPG, который подробно разобран в статье HEIC в JPG без потери качества.

WebP также работает с альфой, поэтому изображение HEIC с каналом прозрачности переживает путь, а JPG его бы выбросил.

Примечание о новых форматах

AVIF, наследник на базе AV1, в целом выигрывает у WebP по размеру, и сейчас он поддерживается во всех основных браузерах. Если вы строите новый пайплайн и можете выбирать декодер, AVIF стоит протестировать против WebP на ваших конкретных изображениях. Компромисс — скорость кодирования и зрелость инструментов, поэтому для большинства команд WebP остаётся безопасным выбором по умолчанию. В гайде по веб-форматам изображений больше о том, где какой формат уместен.

Краткая версия

Конвертируйте HEIC в WebP для всего, что попадает на сайт. Он поддерживается везде, меньше альтернативы JPG при равном качестве, и его можно получить браузерным инструментом или пайплайном из двух команд. Храните исходный HEIC как источник истины, конвертируйте при загрузке или в пакетной задаче и позвольте формату самому сделать математику времени загрузки.

Ещё посты в блоге