Como funciona a conversão de imagens no navegador
Cada conversão é um pipeline de quatro etapas a funcionar no seu navegador. Para JPEG e PNG, a própria Canvas API do navegador lida diretamente com a codificação. Para WebP no Safari e AVIF em todos os navegadores, a página carrega um codec WebAssembly leve a pedido — ainda tudo local, as suas imagens nunca saem do dispositivo.
- 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.
- Chame
canvas.toBlob(callback, targetMimeType, quality)para recodificar os pixéis para PNG, JPEG e Chrome/Firefox WebP. Para WebP no Safari e codificação AVIF, um worker de codec WebAssembly é carregado no primeiro uso e trata da codificação numa thread em segundo plano. A saída PNG é sempre sem perdas; JPEG, WebP e AVIF respeitam o controlo deslizante de qualidade, que mapeia diretamente para a definição de quantização do codificador. - 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?
Do lado da entrada, qualquer formato que o navegador consiga descodificar é aceite: PNG, JPEG, WebP, GIF e BMP cobrem praticamente todos os ficheiros que um designer ou ferramenta de captura de ecrã produz. Os formatos de saída são PNG (sempre sem perdas), JPEG, WebP e AVIF. A saída AVIF é suportada através de um codificador WebAssembly que carrega a pedido em todos os navegadores — sem necessidade de codificador Canvas nativo.
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.
Como funciona a saída AVIF?
A codificação AVIF utiliza um codec WebAssembly que carrega a pedido na primeira vez que seleciona o formato AVIF — sem plugin, sem sinalizador de navegador, sem esperar por uma futura versão do Chrome. O binário WASM é servido a partir da nossa própria origem, codifica a sua imagem inteiramente numa thread em segundo plano e devolve um blob image/avif padrão pronto para download. O único pedido de rede é a obtenção única do próprio codec; nenhum dado de imagem sai jamais do seu dispositivo. Uma vez carregado, o codificador permanece em cache durante a sessão, para que as conversões subsequentes sejam mais rápidas. Os ficheiros AVIF são tipicamente 20-30% mais pequenos que WebP e 50% mais pequenos que JPEG com qualidade equivalente, tornando-os a melhor escolha para sites sensíveis ao desempenho.
Solte as suas imagens, escolha um formato, converta. Tudo funciona no seu separador — sem upload, sem conta, sem esperar por um servidor.