Растровые изображения в браузере
Растровое изображение — это сетка пикселей с метаданными: шириной, высотой, цветовыми каналами и форматом контейнера. JPEG, PNG и WebP по-разному сочетают сжатие, точность цвета, прозрачность и поддержку. Это семейство инструментов конвертирует, изменяет размер, исследует изображения и выделяет цвета прямо в браузере: байты файла не отправляются на сервер.
Чтобы получить меньший WebP из фотографии, откройте Из JPG в WEBP. Выбор формата зависит от получателя: старой CMS, ограничения размера, дизайн-системы с альфа-каналом или бюджета производительности.
Форматы и обработка
JPEG эффективно хранит фото с потерями и не имеет альфа-канала. Повторное кодирование с меньшим качеством теряет новые детали; переход JPEG в PNG не восстанавливает уже утраченное. PNG хранит данные без потерь и поддерживает прозрачность, но фотографические PNG часто тяжелее. WebP имеет режимы с потерями и без них и нередко даёт меньшие файлы при сходном качестве.
Конвейер читает локальный File, декодирует bitmap, рисует его на canvas нужного размера, экспортирует с MIME-типом и необязательным качеством и скачивает результат. Ползунок качества действует на JPEG и lossy WebP; PNG для буфера canvas остаётся без потерь. При переводе прозрачного PNG или WebP в JPEG прозрачные области обычно накладываются на сплошной фон.
Инструменты семейства
- Из JPG в WEBP и Из PNG в WEBP.
- Из WEBP в JPG, Из PNG в JPG и Из JPG в PNG.
- Изменить размер по ширине или высоте, Сведения об изображении и Доминирующие цвета.
Размер, метаданные и ограничения
Укажите только ширину или высоту, чтобы сохранить пропорции. Уменьшение улучшает загрузку; увеличение придумывает пиксели. Размер файла и мегапиксели отвечают на разные вопросы; Сведения об изображении показывает оба значения. Canvas — это пиксельный конвейер, а не полный архив EXIF: ориентация может примениться при показе, но GPS- и камерные теги обычно не сохраняются.
Извлечение палитры считает или группирует цвета после уменьшения выборки и выдаёт значения hex/RGB для CSS. На результат влияют допущения sRGB и цветовая субдискретизация JPEG. Не создавайте цепочки JPEG → WebP → JPEG: WebP 80 численно не равен JPEG 80. Очень большие изображения могут исчерпать память вкладки; CMYK TIFF и многокадровая анимация не относятся к ожидаемому сценарию. Храните мастер отдельно и делайте из него один вариант для доставки.