Конвертер изображений PNG, JPEG и WebP

Выберите локальный файл, целевой формат и при необходимости ширину. Нажмите «Конвертировать», затем скачайте готовую картинку. Обработка идёт через Canvas браузера: файл не загружается на сервер Pugofka. Поддержка исходного формата зависит от браузера; если он не может открыть картинку, инструмент покажет ошибку.

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

Поле ширины необязательно. Если его оставить пустым, используется исходная ширина. Если указать новое значение, высота рассчитывается пропорционально, без растяжения картинки. Для защиты памяти браузера итоговые ширина и высота ограничены 4096 пикселями. Исходный файл ограничен 20 МБ.

Качество от 1 до 100 влияет на экспорт JPEG и WebP; PNG обычно использует сжатие без потерь и не ориентируется на этот ползунок. Слишком низкое качество может дать заметные артефакты вокруг текста и мелких деталей. Для карточки товара увеличьте масштаб просмотра после экспорта и проверьте, читаются ли подписи и видны ли края предмета.

При экспорте в JPEG прозрачные участки заполняются белым. Если нужен прозрачный фон, выберите PNG или WebP и проверьте скачанный файл в редакторе. Canvas формирует новое изображение из пикселей; служебные метаданные исходного файла, такие как EXIF, обычно не переносятся. Не используйте эту операцию как подтверждённый способ очистки конфиденциальных данных без отдельной проверки результата.

Анимация также не сохраняется как последовательность кадров: инструмент работает с кадром, который декодирует браузер для Canvas. Для GIF или анимированного WebP потребуется специализированный конвертер. SVG может открыться в браузере, но результат станет растровым изображением и потеряет масштабируемую структуру вектора.

После скачивания проверьте картинку в браузере, затем задайте подходящие width и height в HTML или компоненте изображения, чтобы макет заранее выделил место. Для разных экранов может понадобиться несколько размеров и responsive-загрузка. Этот инструмент делает одну версию за раз; он не меняет автоматически разметку сайта и не загружает результат в CMS.

Для логотипа сайта подготовьте отдельный favicon, а для превью ссылки — Open Graph-изображение. Если у интернет-магазина тысячи файлов, ручная конвертация не заменит конвейер обработки на сервере или при сборке. Команда Pugofka может настроить пакетные размеры и форматы вместе с каталогом, чтобы новые товары получали нужные изображения автоматически.

Фотографию товара стоит сравнить в JPEG и WebP при нескольких значениях качества: фактический размер и артефакты зависят от содержимого кадра. Иконка с прозрачностью и тонкими линиями часто удобнее в PNG или WebP. Не переименовывайте расширение вручную: файл от этого не станет другим форматом. Конвертер действительно записывает новые байты и проверяет тип созданного Blob перед скачиванием.

Если картинка содержит текст, проверьте его при фактическом размере отображения на сайте. Сильное уменьшение может сделать подпись нечитаемой даже при высоком качестве. Для логотипов и схем исходный векторный файл обычно лучше хранить отдельно: эта страница создаёт растровый результат и не восстанавливает кривые из пикселей.

Сначала откройте скачанный файл локально и сравните с исходником. Затем загрузите его в тестовую карточку товара или страницу. Посмотрите, как CMS меняет размеры и формат: некоторые системы создают дополнительные версии сами. Если после загрузки картинка стала тяжелее или размылась, проверьте настройки повторной обработки на стороне сайта.

Для отзывчивой страницы одного файла может быть мало. Широкое изображение для большого экрана и более узкая версия для телефона позволяют не передавать лишние пиксели. В HTML размер лучше объявить заранее, чтобы пространство под картинку не появлялось скачком. Этот конвертер делает отдельный файл за один запуск; автоматическая обработка целого каталога требует отдельного конвейера.

Сравните исходник и скачанный файл при масштабе 100%, особенно мелкий текст, края предмета, границы однотонных областей и прозрачность. Затем откройте картинку на странице в том размере, в котором её увидит посетитель. Разница между форматами может быть незаметна в миниатюре, но видна на крупном фото товара. Для публикации важны одновременно размер файла и качество, а не только одно число.

Если файл значительно уменьшился, проверьте, что браузер сохранил нужный формат, а не запасной PNG. Инструмент проверяет MIME-тип полученного Blob и сообщает, если формат не поддерживается. Для серии изображений фиксируйте одинаковые настройки качества и ширины, иначе карточки каталога будут различаться по резкости и размеру. При большом объёме лучше автоматизировать это в процессе загрузки.

PNG полезен, когда важны точные края и прозрачность. JPEG обычно подходит для фотографий, но на мелком тексте и резких переходах может показать артефакты. WebP поддерживается многими современными браузерами и часто уменьшает размер, однако конкретная выгода зависит от изображения и настроек кодировщика. Поэтому сравните несколько результатов на одной картинке, а не выбирайте формат по общему правилу.

SVG в этой форме отсутствует намеренно. Превратить растр в настоящий вектор простым сохранением Canvas нельзя: получится либо растр внутри SVG-обёртки, либо потребуется отдельная трассировка с потерями и новыми параметрами. Если у вас есть исходный логотип в SVG, храните его как вектор и не пропускайте через растровый конвертер. Для фавиконок используйте отдельный генератор набора размеров.

Возьмите исходную фотографию 3000 пикселей шириной. Если карточка товара показывает её гораздо меньше, попробуйте создать отдельную версию шириной, подходящей для фактического места в интерфейсе. Сравните JPEG и WebP при качестве 85, затем при более низком значении. Убедитесь, что мелкие детали товара не размылись. Скачайте оба результата и сравните размер файлов; одна и та же настройка не гарантирует одинаковую экономию на разных фотографиях.

Если на фото прозрачный фон, экспорт в JPEG заполнит его белым. Это может выглядеть нормально на белой карточке, но выделяться на тёмной теме. Для прозрачности оставьте PNG или WebP. Если исходная картинка содержит анимацию, результат будет статичным кадром; для рекламного баннера с движением этот инструмент не подходит. Если файл имеет важные EXIF-данные, проверьте их отдельно после экспорта.

После загрузки в CMS проверьте, не создала ли она собственную копию с другим качеством. Некоторые системы меняют имя, размеры или формат при публикации. Откройте фактический URL, который видит пользователь, и сравните его с локальным результатом. Для большого каталога лучше настроить обработку при импорте: ручной конвертер помогает подобрать настройки на образце, а автоматический процесс применяет их последовательно ко всем новым товарам.

После проверки результата можно перейти к связанным задачам: Генератор фавиконок, Open Graph, Разработка интернет-магазинов. Используйте инструмент на настоящем образце перед публикацией результата.