Como funciona a conversão de imagens no navegador
Cada conversão é um pipeline de quatro etapas executado inteiramente em JavaScript. Nenhuma biblioteca de codec é descarregada — a própria Canvas API do navegador trata da descodificação e recodificação.
- Lê cada ficheiro carregado como Blob e cria um URL de objeto para que o navegador possa descodificá-lo sem copiar bytes para um servidor.
- Desenha a imagem descodificada num elemento Canvas fora do ecrã, aplicando qualquer restrição de redimensionamento enquanto preserva o rácio de aspeto original.
- Chama
canvas.toBlob(callback, tipoMime, qualidade)para recodificar os pixels. A saída PNG é sempre sem perdas; JPEG e WebP respeitam o controlo deslizante de qualidade. - Mostra uma miniatura antes/depois com as dimensões de saída e o tamanho do ficheiro, depois oferece um botão de download por imagem ou um único ZIP para todo o lote.
Porquê converter formatos de imagem?
- Mudar de PNG para WebP reduz os tamanhos típicos de ficheiro em 25–35% sem perda de qualidade visível a qualidade 0.8, o que reduz diretamente o peso da página e melhora as pontuações LCP dos Core Web Vitals.
- PNG preserva a transparência onde JPEG a descarta, por isso mudar PNG→JPEG renderiza pixels transparentes sobre fundo branco — útil quando o destino (e-mail, CMS antigo) não aceita PNG.
- Plataformas sociais e redes de publicidade têm requisitos de formato rigorosos: Facebook e LinkedIn preferem JPEG para fotos; o pipeline de pré-visualização OG do Twitter suporta WebP; alguns servidores de anúncios rejeitam criativos não-JPEG.
- Padronizar um lote de imagens em formatos mistos (capturas PNG, fotos JPEG, exportações WebP) para um único formato antes de fazer upload para um CMS ou DAM elimina a complexidade de gestão de formatos no pipeline de ingestão.
Aplicações comuns
A conversão de formato surge quando o formato de origem e as expetativas do destino não coincidem.
- Preparar fotos de produtos para uma loja Shopify ou WooCommerce — originais JPEG convertidos para WebP com qualidade 0.85 para a montra, PNG mantido para exportações de impressão.
- Converter exportações PNG de designers para JPEG ou WebP antes de incorporar num build React ou Next.js, para que o otimizador de imagens do framework comece com uma fonte menor.
- Processamento em lote de uma pasta de capturas de ecrã de uma execução de QA — PNG para JPEG com qualidade 0.9 para reduzir o tamanho do arquivo antes de o anexar a um ticket de rastreamento de erros.
Um exemplo prático: PNG de 2 MB → WebP de 300 KB
Uma imagem PNG hero de 2 MB a 2400×1600 pixels é uma carga comum em páginas de destino de marketing.
Solte o PNG aqui, escolha WebP como formato de destino, defina a qualidade para 0.8, e opcionalmente defina a largura máxima para 1200 para reduzir as dimensões de pixel a metade. O pipeline canvas desenha a imagem a 1200×800 (proporção preservada), recodifica para WebP, e o cartão de saída mostra o resultado — tipicamente 280–320 KB, uma redução de 85%. Clique em Descarregar no cartão para obter o ficheiro individual, ou clique em Descarregar .zip no fundo do painel se converteu várias imagens numa só operação. O processo completo, da soltura ao download, corre em algumas centenas de milissegundos para uma imagem deste tamanho sem consumir largura de banda após o carregamento inicial da página.
Que formatos são suportados?
Imagens de origem: qualquer formato que o navegador possa descodificar — PNG, JPEG, WebP, GIF e BMP são todos aceites. Formatos de saída: PNG (sem perdas), JPEG e WebP. A saída AVIF ainda não é suportada porque o codificador Canvas API só está disponível no Chrome 105+ e está ausente no Safari e Firefox; um caminho AVIF baseado em WASM está planeado para uma versão futura.
Isto acontece no meu dispositivo?
Sim. A página usa a Canvas API nativa do navegador e a Web File API. Nenhum dado de imagem é enviado para um servidor; o pipeline de conversão é executado inteiramente no seu separador de navegador. Pode verificar isso abrindo as DevTools e verificando o painel Network — não há pedidos de saída depois de a página estar carregada.
Qual é a diferença de qualidade entre PNG e JPEG?
PNG é um formato sem perdas — cada pixel sobrevive exatamente ao ciclo de codificação. JPEG usa compressão DCT e descarta detalhes finos que o olho raramente nota; a qualidade 0.8 é um ponto de equilíbrio comum onde a diferença visual do original é imperceptível para a maioria dos espectadores mas o ficheiro é 4–6 vezes menor que PNG. WebP pode operar em modos sem perdas e com perdas; o controlo deslizante de qualidade aqui conduz o codificador com perdas, e a qualidade 0.85 tipicamente supera JPEG 0.85 em 25–30% em fotos naturais.
Quando chegará o suporte AVIF?
A codificação AVIF via canvas.toBlob(…, 'image/avif') só funciona no Chrome 105+ hoje; Safari e Firefox não o suportam. Uma versão futura adicionará um caminho AVIF opcional usando um codificador WebAssembly leve para que a funcionalidade funcione em todos os navegadores. Até então, a opção AVIF é mostrada como "brevemente" e o codificador WebP (universalmente suportado em navegadores modernos) é a alternativa de próxima geração recomendada.
Solte as suas imagens, escolha um formato, converta. Tudo funciona no seu separador — sem upload, sem conta, sem esperar por um servidor.