Изображения и фотографии · Конвертер изображений и компрессор
Как canvas.toBlob преобразует PNG в WebP внутри вашего браузера
· Как это работает
форматы изображений холст веб-сайт
Конвертер изображений браузера — это декодер, растровое изображение и кодировщик, соединенные вместе, и вся цепочка встроена в браузер. Этот пост следует за одним PNG через декодирование, холст и toBlob в файл WebP и отмечает, что потеряно по пути.
Откуда берется WebP, когда сервер не задействован — конкретный вопрос, лежащий в основе конвертера, работающего в автономном режиме
WebP не поступает из очереди преобразования на стороне сервера. В вашем браузере уже есть декодеры изображений, рисуемая поверхность пикселей и кодировщики; преобразователь ToolAcre соединяет их. Вот почему PNG можно преобразовать на вашей вкладке после загрузки сайта. «Без загрузки» относится к исходному изображению и результатам преобразования, а не к тому, что веб-сайт вообще не имеет сетевой активности.
Шаг первый: декодирование — как браузер превращает PNG байт в растровое изображение RGBA и почему все форматы в конечном итоге представляют собой одну и ту же сетку.
Сначала PNG декодируется в растровое изображение. Сжатие PNG, выбор палитры и метаданные цвета определяют, как его байты становятся пикселями, но холст работает с декодированным растром, а не с фрагментами файла PNG. Скриншот 1600×900 дает 1.44 миллионов позиций пикселей, даже если сам файл намного меньше. ToolAcre использует createImageBitmap и обеспечивает соблюдение бюджета пикселей; большое декодированное изображение — это проблема с памятью, прежде чем это проблема с загрузкой.
Шаг второй: холст как промежуточная область — рисование растрового изображения на холсте или OffscreenCanvas соответствующих размеров.
Растровое изображение рисуется на холсте или OffscreenCanvas с запрошенными выходными размерами. Если эти размеры соответствуют исходным и обрезка не выбрана, drawImage подготавливает пиксели для кодирования; если размеры изменяются, холст выполняет их повторную выборку, и значения пикселей могут измениться до начала кодирования WebP. Одна и та же процедура рендеринга обслуживает интерактивный предварительный просмотр и рабочий путь, не позволяя этим двум выводам следовать несвязанным алгоритмам.
Шаг третий: toBlob с типом и качеством MIME — как выбирается кодировщик, чем управляет номер качества и почему он игнорируется для PNG
На обычном холсте toBlob(callback, "image/webp", качество) запрашивает браузер закодировать WebP и выполняет ответный вызов с помощью Blob. Там, где доступен OffscreenCanvas, ToolAcre использует ConvertToBlob({type,quality}) для того же задания. Качество контролирует кодировщик с потерями; это не обещание определенного количества байтов. Экспорт PNG выполняется без потерь, а его параметр качества не устанавливает уровень сжатия, подобный JPEG. Всегда проверяйте фактический возвращаемый формат, поскольку доступность кодировщика зависит от браузера.
Что отбрасывает конвейер — метаданные, цветовые профили и точность 16 бит, и почему это свойство метода, а не ошибка
Повторное кодирование декодированного растра не может сохранить все факты в исходном контейнере PNG. Фрагменты текста, метаданные камеры или редактора, некоторые детали цветового профиля и битовая глубина источника могут не пережить двустороннюю обработку холста; 16-битные каналы не становятся 16-битными WebP только потому, что входные данные их перенесли. WebP может сохранять прозрачность, если кодировщик поддерживает это, тогда как экспорт JPEG требует заполнения прозрачных областей. Сам по себе размер файла не может показать, сохранились ли в результате преобразования тонкие линии или цвета.
Рабочий пример: скриншот 1.8 MB PNG для WebP — прохождение файла через три шага и чтение результата
Рассмотрим скриншот 1.8 MB PNG с текстом, градиентами и прозрачным углом. Раскодируйте его, оставьте размеры без изменений, выберите WebP, экспортируйте и сравните размер Blob и тип MIME с оригиналом. Результирующий размер измеряется, а не предсказуем: чистые снимки экрана могут хорошо сжиматься, а шумный контент — нет. Увеличьте маленькие глифы и прозрачный угол, прежде чем принять файл меньшего размера. Если четкий текст пользовательского интерфейса становится нечетким, оставьте PNG или отрегулируйте качество кодирования, а не утверждайте, что WebP всегда лучше.
Что здесь не распространяется — анимированные изображения, форматы, которые браузер не может декодировать, и настройки кодировщика, которые API не раскрывает.
Этот конвейер не обещает сохранение анимации, декодирование HEIC на каждом устройстве или полный контроль над параметрами подвыборки и усилия кодировщика WebP. Он также не может восстановить детали, уже потерянные в источнике JPEG, сохранив их как PNG или WebP. Повторяющиеся циклы декодирования/re-encode могут привести к накоплению потерь. Сохраните оригинал и используйте поддерживаемые форматы input/output, перечисленные на реальной странице инструмента, а не предполагайте, что здесь принимаются все форматы, известные вашей операционной системе.
Вывод: три шага, ноль загрузок — как Image Converter & Compressor запускает этот конвейер на вашем устройстве.
Механизм декодирования → рисования → кодирования осуществляется с помощью API браузера без загрузки изображений. ToolAcre отображает целевой формат и размеры, поэтому вы можете определить, просто ли вы меняете контейнер или изменяете размер пикселей. Прежде чем обрабатывать весь пакет, проверьте один репрезентативный снимок экрана в Image Converter & Compressor, а затем проверьте загруженный результат в том размере, который увидят люди.