Quando trabalhamos com imagens, existem vários formatos de imagens com os quais podemos trabalhar. JPEG, PNG, SVG… Mas como decidir qual formato usar para exportar seu arquivo? Esse guia vai te ajudar a entender quando é melhor usar um ou outro formato de imagem para usar na internet.
Importante: esse guia é específico para uso de imagens em sites ou outros serviços na internet. Para impressão ou outros usos, é importante avaliar outros pontos não descritos aqui.
A resposta curta
Use WEBP para imagens (como fotos) e SVG para vetores (como logos e ícones). Não esqueça de otimizar os seus arquivos. Também normalmente não é necessário ter uma imagem com mais de 2560 pixels de largura ou altura.
Resposta completa: o que levar em consideração?
Um ponto muito importante que precisa da sua atenção é o tamanho da sua imagem. Isso pode se referir a duas coisas:
- Resolução: é a altura e a largura da imagem, normalmente calculada em pixels que são pontinhos de cor. Uma imagem de 12 megapixels, por exemplo, pode ser uma imagem que tem 4 mil pixels de largura e 3 mil pixels de altura. Note que menos de 2% dos usuários têm monitores com mais de 2560 pixels de largura, então não há necessidade de imagens maiores do que isso.
- Tamanho do arquivo: é a quantidade de espaço que a imagem ocupa em disco. Ela pode ter poucos bytes ou muitos megabytes, dependendo da complexidade da imagem, quantidade de cores, de metainformações e de pixels. Não há limite de tamanho de imagens, mas quanto menor, melhor. Afinal, são menos dados que o visitante precisa baixar ao acessar seu site.
Para o seu site ficar rápido, ter poucas imagens pequenas é o ideal. Mas também não adianta deixar o site feio. Então é tudo uma questão de qualidade X desempenho.
Sempre precisamos avaliar o equilíbrio entre qualidade e desempenho, já que imagens com qualidade no máximo são maiores e mais pesadas enquanto que imagens mais leves costumam ter menos qualidade. Em alguns casos, vale a pena abrir mão de um pouco de qualidade ou de desempenho.
Vamos entender melhor como gerenciar esse equilíbrio formato por formato.
Formato JPEG
Esse formato é um dos mais populares para imagens, muito comum por exemplo em fotos digitais. Vale notar que ele tem um sistema de compressão com perdas, ou seja, é possível diminuir o tamanho do arquivo “eliminando” informações da imagem que não são necessárias. A imagem fica mais leve, mas, em compensação, isso gera os chamados “artefatos JPEG”.
Nesse exemplo abaixo, note que há uma compressão extrema ampliada para ficar mais evidente. Mas note que há artefatos JPEG, que são essas manchas pixelizadas que geram um pouco de dificuldade de diferenciar alguns detalhes da imagem.
É possível nivelar essa compressão, ou seja, na hora de exportar a imagem, você pode diminuir ou aumentar a qualidade da imagem, o que afeta o quão perceptíveis esses defeitos são e, claro, o tamanho do arquivo.
A dica aqui é usar JPEG sempre que for uma imagem muito grande ou uma foto com muitos detalhes. O JPEG consegue tamanhos de arquivos absurdamente menores se comparado com outros formatos, então se a imagem é grande (em termos de resolução), vale a pena perder um pouco de qualidade. Além disso, se a imagem tem muitos detalhes e cores, fica mais difícil perceber qualquer imperfeição.
Formato PNG
O PNG, por outro lado, costuma ter a melhor qualidade. Além disso também é um formato que aceita transparências. Em contrapartida, costuma ser muito mais pesado do que o JPEG porque ele preserva todos os pixels da imagem.
Mas o PNG tem um segredinho. Se há poucas cores na imagem, ele costuma oferecer tamanhos de arquivo menores. Então se você vai trabalhar uma imagem de um botão, com um fundo liso e um texto, por exemplo, o PNG serve muito bem. Também é válido para logos simples.
Formato SVG
O SVG é um formato de imagem vetorial. Ao contrário das imagens JPEG e PNG (que são imagens chamadas “bitmap”), uma imagem vetorial não tem informações de cores para cada um dos pixels que a compõe. Na prática, a imagem vetorial é uma porção de fórmulas de “constroem” a imagem. Por causa disso, a imagem SVG não tem resolução fixa, ela pode ser ampliada ou reduzida infinitamente sem nenhuma perda de qualidade e sem mudar de tamanho.
Obviamente, as imagens vetoriais só servem para ilustrações ou desenhos com formas simples (nada de fotos!). É perfeito para logotipos ou ícones. Quanto mais simples a forma, menor o arquivo e muitas vezes ele se sai melhor que o PNG.
Veja também: Como preparar os arquivos da minha marca para o site?
A solução moderna: Formato WEBP
WebP é um formato de imagem moderno desenvolvido pelo Google, projetado para oferecer melhor compactação de imagens do que formatos tradicionais como JPEG e PNG, resultando em arquivos menores e tempos de carregamento mais rápidos na web. Esse formato foi planejado pra não ter os problemas que o JPEG e o PNG têm e, ao mesmo tempo, permitir transparências e até animações, mas em arquivos menores.
E o melhor: desde 2023, ele é bem aceito por praticamente todos os navegadores modernos.
Sabendo disso, ele é a melhor opção para você usar no seu site atualmente, exceto para imagens vetoriais que devem ser em SVG.
Dica técnica: nos sites que nós criamos, se a hospedagem permitir, nós usamos uma solução que cria uma versão WEBP das imagens automaticamente e mostra ou a versão WEBP ou a versão original dependendo do navegador. Nos sites mais recentes, estamos implementando uma solução que converte as imagens em WEBP automaticamente, sendo a opção exclusiva. Essa mudança melhora a velocidade dos sites para o usuário.
O futuro: AVIF
O formato AVIF segue a mesma lógica do WEBP, mas ele já tem resultados melhores com tamanhos de arquivo ainda menores. Ele já é suportado pelos principais navegadores desde 2024, mas ainda não é muito compatível com alguns servidores e editores gráficos (a Adobe, por exemplo, ainda não permite exportar imagens em AVIF). Mas é uma tendência e deverá ser amplamente adotado em breve.