Подготовьте WebP до загрузки в CMS
В статью нужны три фотографии, в портфолио ещё несколько снимков. Если каждый исходник весит по несколько мегабайт, страница быстро становится тяжёлой. Конвертер WebP позволяет подготовить изображения перед загрузкой в медиатеку: выбрать качество, при необходимости уменьшить размеры и проверить, что получилось.
Инструмент действительно перекодирует файл. Он не меняет расширение JPEG на .webp и не делает вид, что картинка уже оптимизирована. Скачанный результат содержит изображение в выбранном формате, а рядом с предпросмотром указаны новые размеры и вес.
Порядок конвертации
- Добавьте файлы JPEG, PNG или WebP. Для одного запуска доступны 20 файлов до 10 МБ каждый и не более 60 МБ суммарно.
- Оставьте формат WebP, выбранный по умолчанию. Установите качество, например 80%, для первой проверки.
- Включите ограничение размеров, если исходник заметно больше будущего блока на сайте. Пропорции сохраняются.
- Запустите обработку и сравните результат с оригиналом. Скачайте отдельные изображения или ZIP, затем загрузите их в CMS.
Как подобрать качество WebP
Начните с изображения, где есть сложные детали: мелкий текст, лицо, фактура ткани или тёмный фон. Они помогают быстрее заметить артефакты. Если качество 80% выглядит приемлемо, попробуйте немного ниже. Если появились пятна, размылись буквы или потерялись важные детали товара, верните качество выше.
Не стоит оценивать фотографию только по проценту экономии. Для интернет-магазина точность изображения товара важнее ещё нескольких килобайт. Проверяйте итоговый файл в реальном размере на странице, а при необходимости открывайте его отдельно. Предпросмотр в инструменте удобен для первичного сравнения, но не заменяет просмотр деталей.
Прозрачность, размеры и метаданные
При конвертации PNG в WebP прозрачные участки сохраняются. Это полезно для вырезанных фотографий товаров, элементов оформления и логотипов. Увеличивать маленький исходник инструмент не будет: если картинка уже меньше заданного ограничения, её размеры останутся прежними.
Например, PNG 2400 × 1600 px можно ограничить шириной 1200 px. Получится WebP 1200 × 800 px. Исходный файл при этом остаётся на устройстве. EXIF и другие исходные метаданные в результат не переносятся, а анимация не поддерживается: анимированный PNG или WebP получит сообщение об ограничении.
После конвертации проверьте вывод на сайте
Загрузите файл в CMS и убедитесь, что она принимает WebP. Если сайт создаёт свои миниатюры, посмотрите, какой формат они получили и не используется ли в карточке старый JPEG. Обновите ссылки на изображение и кэш там, где это требуется вашей системой.
Для адаптивного сайта обычно нужен не один огромный файл, а несколько подходящих размеров через srcset. Отдельно задавайте ширину и высоту в HTML, чтобы место под изображение было известно до загрузки. Формат WebP сам по себе не решает вопросы вёрстки, приоритета первого экрана или описательного alt.
Ограничения браузерной обработки
Конвертация выполняется локально, без загрузки исходников на сервер. Нужен браузер с поддержкой сохранения WebP. Если формат недоступен, инструмент покажет ошибку, а не выдаст PNG под расширением .webp. В одном изображении допускается до 20 мегапикселей, результат ограничен 20 МБ на файл и 80 МБ на пакет.
Повторное сжатие уже сжатого JPEG или WebP может ухудшить детали без заметного выигрыша в весе. По возможности работайте с качественным исходником и сохраняйте его отдельно для будущих размеров.
Следующий шаг и материалы по теме
Вопросы об инструменте
Сохраняется ли прозрачность при PNG → WebP?
Да, прозрачные участки сохраняются. При выборе JPEG вместо WebP они будут заполнены выбранным фоном.
Будет ли WebP всегда легче JPEG?
Нет. Вес зависит от исходника, размеров, деталей и качества. Инструмент показывает фактическую разницу, включая увеличение размера.
Можно конвертировать анимированный WebP?
Нет. Анимированные WebP и PNG отклоняются, чтобы не выдавать один кадр вместо полной анимации.
Конвертер создаёт адаптивные версии автоматически?
За один запуск создаётся один результат для каждого исходника. Для нескольких размеров повторите обработку и настройте srcset на сайте.
