Imagens e fotos · Conversor e compressor de imagens
Como canvas.toBlob converte PNG em WebP dentro do seu navegador
· Como funciona
formatos de imagem tela webp
Um conversor de imagem de navegador é um decodificador, um bitmap e um codificador encadeados, e toda a cadeia é incorporada ao navegador. Esta postagem segue um PNG através de decode, canvas e toBlob até um arquivo WebP e observa o que foi perdido no caminho.
De onde vem o WebP quando nenhum servidor está envolvido — a questão concreta por trás de um conversor que funciona offline
O WebP não vem de uma fila de conversão do lado do servidor. Seu navegador já possui decodificadores de imagem, uma superfície de pixel desenhável e codificadores; o conversor ToolAcre os conecta. É por isso que um PNG pode ser transformado em sua aba após o carregamento do site. “Sem upload” refere-se à imagem de origem e à saída de conversão, e não ao site não ter nenhuma atividade de rede.
Etapa um: decodificação — como o navegador transforma PNG bytes em um bitmap RGBA e por que cada formato termina na mesma grade
Primeiro, o PNG é decodificado em um bitmap de imagem. A compactação PNG, as opções de paleta e os metadados de cores determinam como seus bytes se tornam pixels, mas a tela funciona no raster decodificado, não em partes do arquivo PNG. Uma captura de tela de 1600×900 produz 1.44 milhões de posições de pixels, mesmo que o arquivo em si seja muito menor. ToolAcre usa createImageBitmap e impõe um orçamento de pixels; uma imagem decodificada grande é um problema de memória antes de ser um problema de upload.
Etapa dois: a tela como área de preparação — desenhando o bitmap em uma tela ou OffscreenCanvas de dimensões correspondentes
O bitmap é desenhado em uma tela ou OffscreenCanvas com as dimensões de saída solicitadas. Se essas dimensões corresponderem à origem e nenhum corte for escolhido, drawImage prepara os pixels para codificação; se as dimensões mudarem, a tela fará uma nova amostragem delas e os valores dos pixels poderão mudar antes do início da codificação WebP. A mesma rotina de renderização serve a visualização interativa e o caminho do trabalhador, evitando que essas duas saídas sigam algoritmos não relacionados.
Etapa três: toBlob com tipo e qualidade MIME — como o codificador é selecionado, o que o número de qualidade controla e por que ele é ignorado para PNG
Em uma tela comum, toBlob(callback, "image/webp", quality) pede ao navegador para codificar WebP e chama de volta com um Blob. Onde OffscreenCanvas estiver disponível, ToolAcre usa convertToBlob({type,quality}) para o mesmo trabalho. A qualidade controla um codificador com perdas; não é uma promessa de uma contagem de bytes específica. A exportação de PNG não tem perdas e seu parâmetro de qualidade não define um nível de compactação semelhante ao de JPEG. Sempre inspecione o formato real retornado, pois a disponibilidade do codificador depende do navegador.
O que o pipeline descarta – metadados, perfis de cores e precisão de 16 bits, e por que isso é uma propriedade da técnica e não um bug
A recodificação de um raster decodificado não pode preservar todos os fatos no contêiner PNG original. Pedaços de texto, metadados de câmera ou editor, alguns detalhes de perfil de cores e profundidade de bits de origem podem não sobreviver a uma viagem de ida e volta da tela; Canais de 16 bits não se tornam 16 bits WebP apenas porque a entrada os transportou. WebP pode manter a transparência quando o codificador suporta, enquanto uma exportação JPEG requer o preenchimento de áreas transparentes. O tamanho do arquivo por si só não pode mostrar se uma conversão preservou linhas finas ou cores.
Exemplo resolvido: uma captura de tela de 1.8 MB PNG para WebP — seguindo o arquivo pelas três etapas e lendo o resultado
Considere uma captura de tela 1.8 MB PNG com texto, gradientes e um canto transparente. Decodifique-o, deixe as dimensões inalteradas, selecione WebP, exporte e compare o tamanho do Blob e o tipo MIME com o original. O tamanho resultante é medido, não previsível: capturas de tela limpas podem ser bem compactadas, enquanto conteúdo barulhento não. Amplie os pequenos glifos e o canto transparente antes de aceitar o arquivo menor. Se o texto nítido da IU ficar confuso, mantenha PNG ou ajuste a qualidade do codificador em vez de afirmar que WebP é sempre melhor.
O que isso não cobre: imagens animadas, formatos que o navegador não consegue decodificar e configurações do codificador que API não expõe
Este pipeline não promete retenção de animação, decodificação HEIC em todos os dispositivos ou controle total dos parâmetros de subamostragem e esforço do codificador WebP. Ele também não pode recuperar detalhes já perdidos em uma fonte JPEG salvando-os como PNG ou WebP. Ciclos repetidos de decodificação/re-encode podem acumular perdas. Mantenha um original e use os formatos de entrada/output suportados listados na página da ferramenta real, em vez de assumir que todos os formatos que seu sistema operacional conhece são aceitos aqui.
Conclusão: três etapas, zero uploads – como o Image Converter & Compressor executa esse pipeline no seu dispositivo
O mecanismo é decodificar → desenhar → codificar, realizado com APIs do navegador e sem upload de imagem. ToolAcre expõe o formato e as dimensões de destino para que você possa saber se está apenas alterando o contêiner ou redimensionando os pixels também. Teste uma captura de tela representativa no Image Converter & Compressor antes de processar um lote inteiro e, em seguida, inspecione o resultado baixado no tamanho que as pessoas verão.