PNG
WEBP
WEBP
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Превью
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Коротко об инструменте
Главное отличие от перевода в JPG: WebP умеет альфа-канал, поэтому прозрачный фон логотипа, иконки или PNG-спрайта останется прозрачным, а вес обычно падает в два-четыре раза. Это тот случай, когда мегабайтные иллюстрации в интерфейсе, скриншоты в документации и картинки email-шаблонов тормозят страницу без всякой пользы. Файл читается и кодируется во вкладке средствами браузера — на сервер IT Market он не передаётся и в логи не попадает. Смотрите также: сделать то же самое с фотографиями JPG, запасной JPG для старых браузеров, упаковать пачку готовых картинок в ZIP.
Да, альфа-канал переносится: логотип на прозрачном фоне останется таким же после конвертации. Это ключевое отличие от JPG, где прозрачность неизбежно заливается цветом. Полупрозрачные тени и градиенты альфы тоже сохраняются, хотя при сжатии с потерями их края могут стать чуть мягче.
На интерфейсной графике, иллюстрациях и скриншотах типичный выигрыш — в два-четыре раза. Больше всего экономят большие изображения с фотографическими участками, меньше всего — крошечные иконки на 16-32 px, где заголовок формата занимает заметную долю файла и разница почти теряется.
Нет. Canvas берёт из анимированного PNG только первый кадр, поэтому на выходе получится статичная картинка. Анимацию в WebP таким способом не собрать — для этого нужны отдельные утилиты вроде img2webp. Если анимация важна, оставьте исходный APNG или используйте видео.
На публичном сайте лучше не рисковать: заверните картинку в тег picture с source type="image/webp" и img с PNG внутри. Старые сборки Safari, встроенные браузеры некоторых приложений и почтовые клиенты WebP не покажут, и вместо иллюстрации пользователь увидит пустое место.
Так бывает на маленьких иконках и на плоской графике из двух-трёх цветов: PNG со своей палитрой в таких случаях уже оптимален, а WebP добавляет собственные накладные расходы. Сравните вес и просто оставьте PNG — формат ради формата смысла не имеет.
Нет, страница рассчитана на один файл: загрузка, «СКАЧАТЬ», «СБРОСИТЬ». Для пакетной обработки спрайтов и всей папки images удобнее подключить плагин сборщика или прогнать cwebp скриптом. Онлайн-версия выручает, когда нужно быстро подготовить пару ассетов на чужом компьютере.
Он остаётся в оперативной памяти вкладки: FileReader считывает PNG, Canvas рисует кадр, кодировщик браузера отдаёт WebP через ссылку на скачивание. Загрузок на сервер и обращений к сторонним API страница не делает, поэтому её можно использовать и с корпоративными макетами.
До: hero-illustration.png — 1,9 MB, 1600×900 px, прозрачный фон
После: hero-illustration.webp — 420 KB, прозрачность сохранена, размеры те же
До: [email protected] — 780 KB, плоская графика с альфа-каналом
После: [email protected] — 190 KB, края иконок остались резкими
Оценка и фидбек помогают понять, что улучшать дальше.