Como escolher o formato de imagem certo para a web

Três perguntas para fazer antes de tudo

Em um site real, a escolha do formato de cada imagem se resume a três perguntas:

1. O que ela mostra? Fotos combinam com formatos com perdas, como JPG, WebP com perdas e AVIF, porque pequenos erros se escondem nos detalhes naturais. Capturas de tela, textos, gráficos e artes em cores chapadas têm bordas nítidas, onde a compressão com perdas pode deixar halos visíveis; por isso, combinam com formatos sem perdas (PNG, WebP sem perdas) ou, se foram desenhados como formas, com SVG.
2. Ela precisa de transparência ou animação? O JPG não tem nenhuma das duas. PNG, WebP e AVIF podem armazenar um canal alfa completo, com bordas suaves. Os pixels de um GIF são totalmente transparentes ou totalmente opacos, então bordas curvas podem parecer serrilhadas ou com franjas sobre fundos coloridos. GIF, WebP, AVIF e APNG (PNG animado) podem conter animação, mas um vídeo curto costuma ser muito menor que um GIF.
3. Onde ela será publicada? Nas suas próprias páginas HTML, você pode oferecer vários formatos. Um sistema de gerenciamento de conteúdo (CMS), uma loja virtual ou um formulário de envio decide o que aceita e pode converter os arquivos por conta própria, então consulte a documentação atual dele. Os programas de e-mail variam mais do que os navegadores, por isso JPG e PNG são opções mais seguras para newsletters.

Para entender como cada formato funciona, veja JPG vs PNG vs WebP vs AVIF.

Formato por conteúdo: uma tabela de decisão

Ao servir AVIF ou WebP nas suas próprias páginas, mantenha uma versão em JPG ou PNG para os navegadores e aplicativos que não conseguem exibi-los. Quando uma plataforma aceita só um arquivo, a coluna de versão alternativa costuma ser a escolha segura. Favicons seguem regras próprias; veja Favicons: tamanhos, formatos e tags HTML.

Para um loop no estilo GIF em uma página web, um <video> sem som com os atributos autoplay, loop, muted e playsinline é um substituto comum, porque os navegadores geralmente permitem que vídeos sem som sejam reproduzidos automaticamente. No e-mail, algumas versões do Outlook para desktop mostram apenas o primeiro quadro de um GIF animado, então coloque a mensagem principal nesse quadro.

Como oferecer WebP ou AVIF com uma versão alternativa

Nas páginas em que você escreve o HTML, o elemento <picture> permite que cada navegador use o primeiro formato compatível:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Prato de macarrão ao molho de tomate" width="1600" height="1200">
</picture>

O navegador lê os elementos <source> em ordem e ignora aqueles cujo type ele não suporta. O <img>, que é obrigatório, traz o texto alternativo e a largura e a altura que permitem ao navegador reservar o espaço da imagem, e o arquivo dele é exibido quando nenhuma das fontes é compatível. Com um CSS como img { max-width: 100%; height: auto; }, a imagem continua se reduzindo para caber em telas estreitas e mantém essa proporção. Para oferecer também vários tamanhos, liste cada arquivo com a respectiva largura em srcset e adicione um atributo sizes, como explicado em Redimensionamento de imagens: pixels, proporção e DPI.

Muitos CMSs e CDNs de imagem conseguem criar cópias em WebP ou AVIF e escolher uma para cada visitante. Se o seu faz isso, envie um JPG ou PNG de alta qualidade e deixe que ele faça a conversão, em vez de enviar um arquivo que você já comprimiu bastante, para que a imagem não seja comprimida duas vezes.

Exemplo prático: as imagens de um artigo

Imagine um artigo de receita com três imagens, cuja coluna de texto tem no máximo 760 pixels CSS de largura.

• Foto de destaque. O original tirado com o celular tem 4032 × 3024 pixels, cerca de 12,2 megapixels. Uma coluna de 760 pixels em uma tela com dois pixels do dispositivo por pixel CSS precisa de cerca de 1.520 pixels de largura; assim, 1600 × 1200 mantém a proporção 4:3 com 1,92 megapixel, cerca de 16% do original. Redimensione primeiro e depois salve em AVIF ou WebP, além de um JPG como versão alternativa; o original em tamanho real tem mais de seis vezes mais pixels que a versão de 1600 × 1200, e o navegador descartaria a maioria deles ao reduzir a imagem.
• Logotipo com fundo transparente. O PNG do designer tem 1000 × 500 pixels e é exibido com 200 pixels CSS de largura, então 400 × 200 atende às telas com dois pixels do dispositivo por pixel CSS. Mantenha-o em PNG ou WebP; um JPG preencheria as áreas transparentes com uma cor sólida, que aparece como uma caixa sobre um cabeçalho colorido. Se o designer puder exportar um SVG, melhor ainda.
• Captura de tela de um app de temporizador. Texto e cores chapadas: salve em PNG. Um JPG pode acrescentar pontinhos em volta das letras, que os leitores percebem mais do que pequenos erros em uma foto.

Como converter arquivos com o Conversor de imagens do LeedyBox

O Conversor de imagens muda o formato de uma ou mais imagens no seu navegador, sem enviar os dados da imagem ao LeedyBox.

1. Clique em "Escolha os arquivos ou arraste e solte aqui" ou solte arquivos PNG, JPG, WebP, BMP, GIF ou AVIF nessa área. Outros tipos, como HEIC ou SVG, e arquivos que o seu navegador não consegue decodificar são recusados com uma mensagem.
2. Cada arquivo recebe o próprio menu de formato (com o rótulo "To:" em telas mais largas), que começa em JPG. Escolha JPG, PNG, WEBP, BMP, AVIF ou ICO para cada arquivo, ou para todos de uma vez com "Definir todos os formatos como..." em "Opções em lote".
3. Clique em "Converter e baixar". Um único arquivo é salvo, por exemplo, como logo_converted.webp; vários arquivos chegam juntos em leedybox_converted_images.zip.

• As dimensões em pixels continuam as mesmas, exceto no ICO. Redimensione antes com a ferramenta Redimensionar imagens ou use a opção "Também limitar a largura e a altura" da ferramenta Comprimir imagens.
• Para JPG, WebP e AVIF, o conversor pede ao navegador a qualidade 0,92, numa escala de 0 a 1, e não há controle deslizante de qualidade. Essa configuração prioriza os detalhes em vez do tamanho do arquivo. Isso também significa que o WebP é salvo com perdas: não existe opção de WebP sem perdas, então converta capturas de tela e artes com texto para PNG. Para arquivos menores, a ferramenta de compressão oferece um controle deslizante de qualidade (75 por padrão) e um tamanho de arquivo desejado; veja Configurações de compressão de imagem explicadas.
• Arquivos JPG e os arquivos BMP do conversor não têm transparência, então as áreas transparentes ficam brancas. Os arquivos BMP também não são comprimidos: usam 3 bytes por pixel (com cada linha completada até um múltiplo de 4 bytes), mais um cabeçalho de 54 bytes. Uma imagem de 1200 × 800 vira um arquivo de 2.880.054 bytes (cerca de 2,9 MB), seja qual for o conteúdo, por isso o BMP não é adequado para páginas web.
• Um arquivo ICO contém uma única imagem PNG e mantém a transparência. Uma imagem com algum lado maior que 256 pixels é reduzida para caber em 256 × 256, então um logotipo de 1000 × 500 vira 256 × 128; imagens menores mantêm o tamanho. Para um favicon.ico com tamanhos de 16, 32 e 48 pixels, além de ícones PNG e Apple Touch, use o Gerador de favicon.
• O AVIF só pode ser selecionado se o seu navegador conseguir criar arquivos AVIF, o que muitos navegadores atualmente não conseguem fazer; caso contrário, ele aparece como "AVIF (não compatível com este navegador)". Se o navegador não conseguir criar o formato escolhido (a saída em WebP também depende do navegador), aparece uma mensagem e nada é salvo, em vez de dados PNG com a extensão errada. Com vários arquivos, uma falha desse tipo interrompe o lote inteiro, e nenhum arquivo ZIP é criado.
• Cada imagem é redesenhada e codificada de novo, então os dados EXIF, a localização GPS e o perfil de cor do original não são mantidos, e um GIF, WebP ou AVIF animado vira uma imagem estática de um único quadro. O conversor não cria arquivos SVG, GIF nem animados.

Problemas comuns e como resolvê-los

• Um logotipo transparente aparece com uma caixa branca ou preta em volta. Provavelmente ele foi salvo como JPG ou como BMP sem transparência. Use PNG ou WebP; veja por que a transparência se perde no JPG.
• O PNG ficou muito maior que o JPG que lhe deu origem. O PNG armazena cada pixel exatamente, incluindo o ruído e os artefatos de compressão do JPG, e a conversão não recupera os detalhes que o JPG já perdeu. Use WebP ou JPG para fotos.
• Um formulário de envio recusa WebP ou AVIF. Alguns formulários aceitam só JPG e PNG. Converta fotos para JPG e gráficos transparentes para PNG. Renomear a extensão não muda o formato.
• O arquivo WebP quase não ficou menor que o JPG, ou até ficou maior. O JPG original pode já ter sido muito comprimido, e a qualidade 0,92 do conversor preserva muitos detalhes, incluindo os próprios artefatos do JPG, que também ocupam bytes. Se o arquivo continuar grande demais em qualquer um dos formatos, talvez ele ainda esteja no tamanho original da câmera. Redimensione para o tamanho de exibição, depois use a ferramenta de compressão e compare os resultados.
• As cores parecem mais apagadas que no original. O conversor desenha cada imagem em um canvas do navegador, que trabalha em sRGB por padrão, e não mantém o perfil de cor original. Fotos em um espaço de cor mais amplo, como Display P3 ou Adobe RGB, podem perder parte das cores mais saturadas, o que se nota mais em telas de gama ampla. Exporte uma cópia em sRGB no seu editor de fotos, confira-a ali mesmo e converta essa cópia.
• Uma foto HEIC do celular não é aceita. O HEIC não está na lista de formatos do conversor. Muitos celulares conseguem exportar ou compartilhar fotos como JPG; converta essa cópia.

O que verificar antes de publicar

• Abra a página em dois navegadores e em um celular. Com <picture>, teste também a versão alternativa, removendo temporariamente as fontes AVIF e WebP.
• Compare o novo arquivo com o original em tamanho real, observando rostos, textos e degradês.
• No painel Rede das ferramentas de desenvolvedor do navegador, confira qual arquivo foi baixado e qual é o tamanho dele.
• Se o seu site tem modo escuro, observe as imagens transparentes sobre fundos claros e escuros.
• Guarde os originais e converta a partir deles; salvar de novo um arquivo com perdas acrescenta novos erros aos antigos.

Perguntas frequentes