Imagyc›Artigos

Formatos de imagem JPEG, PNG, WebP, AVIF e JXL para sites

Publicado em 9 de outubro de 2026 · 10 min de leitura

A foto de um produto precisa mostrar detalhes e abrir rápido no celular. Um logotipo exige contornos limpos e, muitas vezes, fundo transparente. Já um banner pode ocupar boa parte da tela e atrasar o conteúdo que o visitante veio procurar. Cada situação pede um cuidado diferente com o arquivo.

JPEG, JPG, PNG, WebP, AVIF e JXL aparecem nessa escolha, mas não são seis tecnologias distintas: JPEG e JPG são duas extensões do mesmo formato.¹ Para um site, vale começar comparando WebP e AVIF, manter JPEG ou PNG como alternativa compatível e avaliar JXL quando suas características trouxerem uma vantagem concreta.

A decisão deve considerar a imagem, o navegador e o aparelho de quem acessa. Trocar o formato pode reduzir bastante o peso, mas um arquivo com dimensões exageradas continua exigindo download e processamento desnecessários.²

O que muda entre os formatos de imagem

Todos os formatos deste artigo trabalham com pixels. O que muda é como esses pontos são armazenados e comprimidos. Na compressão com perdas, parte da informação é descartada para reduzir o arquivo. Na compressão sem perdas, os pixels podem ser recuperados exatamente como foram codificados.³

Isso não significa que toda compressão com perdas deixe a imagem visivelmente ruim. Bem ajustada, ela pode manter a aparência necessária para uma foto de produto. O problema surge quando a redução apaga texturas, cria manchas ou prejudica letras pequenas.

Também vale separar dimensões e peso. Uma imagem de 2.000 por 2.000 pixels pode ter poucos kilobytes e ainda exigir mais memória para ser exibida do que uma versão menor. Transparência é outro recurso independente: ela permite colocar um objeto recortado sobre fundos diferentes, sem carregar um retângulo branco junto.

JPEG e JPG para fotografias e compatibilidade

Não existe diferença de qualidade entre um arquivo terminado em .jpg e outro em .jpeg apenas por causa da extensão. Renomear a extensão não comprime nem converte a imagem.¹

O JPEG tradicional da web usa compressão com perdas e costuma funcionar bem em fotografias, com muitas cores e transições suaves. Tem ampla compatibilidade e continua útil para compartilhar arquivos, integrar sistemas antigos e oferecer uma alternativa a formatos mais recentes. Não possui transparência nem animação nativas no uso comum em sites.^{1, 4}

Sua limitação aparece em imagens com letras, linhas finas ou grandes áreas de cor uniforme. Uma compressão forte pode criar borrões ao redor desses elementos. Nesses casos, compare PNG e WebP sem perdas.

Existe ainda o JPEG progressivo. Ele pode apresentar uma versão inicial da imagem e refiná-la conforme o download avança. Isso melhora a percepção do carregamento em certas situações, mas não elimina a necessidade de reduzir dimensões e peso.¹

PNG para transparência e detalhes precisos

O PNG usa compressão sem perdas e aceita transparência com diferentes níveis de opacidade. É uma opção para capturas de tela, diagramas, ilustrações com texto e arquivos que precisam preservar os pixels com precisão.⁵

Em fotografias, porém, pode gerar arquivos muito maiores do que alternativas com perdas. Uma galeria inteira em PNG merece revisão, especialmente quando as imagens não precisam de transparência.

Há um detalhe nas ferramentas de otimização: reduzir a paleta de cores antes de salvar um PNG pode alterar a imagem, embora a compressão do formato seja sem perdas.⁶ Por isso, confira degradês, sombras e bordas após a exportação.

Para animação, existe o APNG, uma extensão do PNG hoje incorporada à especificação. Um PNG comum de um único quadro permanece estático; o suporte ao formato não transforma qualquer arquivo em animação.⁵

WebP como opção prática para o dia a dia

O WebP reúne compressão com e sem perdas, transparência e animação. Assim, pode atender tanto a fotografias quanto a recortes de produtos e peças gráficas.⁷

Seu suporte é amplo nos navegadores atuais. Para muitos sites, isso o torna um bom ponto de partida: gere uma versão WebP, compare com o original e veja se a redução preserva o que importa na imagem.

O Google publica testes em que o WebP produz arquivos menores do que JPEG e PNG, mas esses resultados não são uma promessa para qualquer arquivo.⁷ Uma imagem já muito bem comprimida pode oferecer pouca margem de redução. Ajuste o formato ao material, em vez de converter tudo sem conferir.

AVIF para buscar arquivos menores com boa qualidade

O AVIF utiliza a tecnologia de compressão AV1 e pode reduzir bastante o peso de fotografias em relação a formatos anteriores. Aceita transparência, animação e compressão sem perdas, além de recursos de cor mais avançados.^{8, 9}

Ele também suporta HDR e profundidades de 8, 10 e 12 bits por componente de cor. Em termos simples, isso permite representar mais gradações e uma faixa maior de luminosidade quando a imagem original e a tela oferecem esses recursos. Converter uma foto comum para AVIF não cria detalhes ou HDR que não existiam.⁹

É uma boa opção para testar em banners e fotografias de catálogo. Observe texturas de tecido, cabelo, pele e pequenos detalhes: reduzir demais a qualidade pode deixá-los com aparência suavizada.

A exportação pode exigir mais processamento, dependendo do programa e das configurações. Para um acervo grande, avalie também o tempo de conversão. No site, ofereça uma alternativa compatível para visitantes com navegadores antigos.⁸

JXL para alta fidelidade e carregamento progressivo

JXL é a extensão do JPEG XL, um formato diferente do JPEG tradicional. Ele oferece compressão com e sem perdas, transparência, animação, HDR e recursos para exibição progressiva.¹⁰

Uma característica interessante é a recompressão reversível de arquivos JPEG. Em implementações que preservam esses dados, é possível armazenar o conteúdo em JXL e reconstruir o JPEG original exatamente. Isso não recupera informação que o JPEG já havia perdido.¹⁰

O JXL merece avaliação em fotografias de alta qualidade e projetos que precisam preservar detalhes. Sua capacidade de mostrar uma prévia e refiná-la durante o download também pode ajudar em imagens grandes.¹¹

A compatibilidade exige atenção. Em 6 de outubro de 2026, o Chrome anunciou suporte a partir da versão 155. O Edge 155 também passou a oferecer decodificação, e o Firefox 158, ainda em beta na data desta pesquisa, prevê o recurso ativado por padrão.^{11, 12, 13} Portanto, uma recomendação antiga de que o JXL não funciona no Chrome já precisa ser revista.

Comparação dos recursos

A tabela resume as capacidades dos formatos. O suporte a recursos específicos, especialmente animação e HDR, pode variar entre versões de navegadores.^{1, 5, 7, 9, 10}

Compatibilidade nos navegadores de computador

JPEG e PNG têm compatibilidade ampla. WebP e AVIF funcionam nos principais navegadores atuais, enquanto JXL exige conferir a versão. Este quadro considera a exibição de imagens estáticas e foi verificado em 9 de outubro de 2026.^{4, 11, 12, 13, 14}

No Safari, o JXL não apresenta a imagem progressivamente durante o download: a exibição acontece após o arquivo completo chegar.⁴ A documentação de implementação da Mozilla também aponta falta de animação JXL no Safari. Teste esse recurso separadamente.^{15, 16}

Compatibilidade no celular e nos navegadores mobile

No celular, o nome do navegador sozinho não resolve a dúvida. A versão do aplicativo, o sistema operacional e o mecanismo usado para exibir páginas influenciam a compatibilidade.

O quadro abaixo se concentra em imagens estáticas. “Atual” significa uma versão recente do navegador; não inclui todos os aparelhos antigos ainda em circulação. As novidades do JXL foram confrontadas com os anúncios dos fabricantes, porque a distribuição de uma atualização leva tempo.^{11, 13, 14, 17, 18, 19, 16, 20, 21}

Não aplique a versão do Chrome no Android ao Chrome no iPhone. Quando um navegador no iOS utiliza WebKit, os recursos disponíveis acompanham também o sistema da Apple. O WebKit documenta suporte a JXL no iOS 17 em componentes usados por aplicativos.¹⁹ Teste o aplicativo efetivamente usado pelo seu público.

O Opera Mini merece uma linha própria nessa escolha: os dados consultados indicam suporte a WebP, mas não a AVIF nem JXL. Ter suporte no Opera Mobile não garante o mesmo comportamento no Mini.^{14, 17, 20}

Outra diferença prática: abrir uma imagem não significa conseguir exportá-la naquele formato. Na API Canvas, usada por muitas ferramentas online, PNG é obrigatório; formatos adicionais dependem da implementação. Se o tipo solicitado não for aceito, a exportação pode retornar PNG.²² Confira o formato real do arquivo gerado.

Como usar os formatos para melhorar o SEO e a velocidade

O Google não publica uma regra de que todo site deve usar um único formato. Sua documentação lista JPEG, PNG, WebP e AVIF entre os formatos aceitos na Pesquisa; JXL não consta nessa lista na consulta feita para este artigo.²³ Compatibilidade no navegador e suporte documentado pela busca são questões diferentes.

Uma estratégia prática é oferecer AVIF ou WebP e manter JPEG ou PNG no elemento img como alternativa. Com o elemento HTML picture, o navegador escolhe uma das versões que reconhece. Para testar JXL, inclua-o como uma opção adicional, preservando uma alternativa compatível.²⁴ Quem configura o site deve informar o tipo correto de cada arquivo.

Antes de converter, redimensione. Uma foto de 4.000 pixels não precisa ser enviada inteira para um cartão de produto pequeno. Em telas de alta densidade, pode ser necessária uma versão com mais pixels, mas isso deve acompanhar o tamanho de exibição. Com srcset e sizes, o site oferece opções e ajuda o navegador a escolher.^{2, 25}

Depois, ajuste a qualidade olhando a imagem no tamanho em que será usada. O número “80” em dois programas ou formatos não representa necessariamente a mesma qualidade.¹ Compare o resultado visual e os bytes transferidos. Preserve um original de boa qualidade para gerar novas versões, evitando sucessivas conversões com perdas.

Dê prioridade à imagem que domina a primeira tela. Ela pode ser o elemento medido pelo Largest Contentful Paint, ou LCP. Não use carregamento adiado nessa imagem. O atributo fetchpriority="high" pode ajudar quando aplicado à imagem realmente prioritária; nas imagens abaixo da área inicial, avalie loading="lazy".²⁶

Informe largura e altura para reservar o espaço antes do download e reduzir mudanças de posição na página.²⁷ Use cache e uma CDN quando fizer sentido para o projeto: reutilizar arquivos e aproximar sua entrega do visitante pode melhorar o carregamento.²

Para o Google compreender a imagem, use nomes descritivos, texto alternativo adequado e conteúdo relevante ao redor. tenis-corrida-azul.webp comunica melhor o assunto do que IMG_8472.webp. O atributo alt deve descrever a função ou o conteúdo da imagem, sem acumular palavras-chave.²⁸

Como decidir no seu site

Em uma loja virtual, comece pelas imagens com maior impacto: banner inicial, foto principal do produto e miniaturas da vitrine. Compare WebP e AVIF com qualidade visual semelhante. Para um produto recortado, preserve a transparência com WebP, AVIF ou PNG. Em capturas de tela com texto, compare opções sem perdas antes de aceitar uma versão borrada.

O JXL pode entrar nos testes quando a fidelidade ou a exibição progressiva trouxerem benefício, sempre com alternativa compatível. Para logotipos e ícones que precisam crescer sem perder definição, vale considerar também SVG, um formato vetorial que fica fora desta comparação de imagens em pixels.⁴

Faça a avaliação no celular, com conexão limitada e aparelhos próximos aos usados pelos visitantes. Além de baixar o arquivo, o dispositivo precisa decodificá-lo. Uma imagem menor em bytes nem sempre termina de aparecer mais rápido.²

Use o PageSpeed Insights para comparar a página antes e depois, distinguindo o teste de laboratório dos dados de usuários reais.²⁹ Acompanhe o LCP e a estabilidade do layout. O Google utiliza Core Web Vitals em seus sistemas de classificação, mas bons resultados nessas métricas não garantem as primeiras posições.³⁰

Escolha o formato que mantém o produto reconhecível, chega rápido e funciona para o seu público. É esse resultado, medido na página, que deve orientar a próxima conversão.