Formatos de imagem para a web: JPG, PNG, GIF, SVG e WebP

Escolher o formato errado para uma imagem pode resultar em arquivos desnecessariamente grandes, perda de qualidade visual ou falta de suporte em navegadores. Cada formato existe por uma razão — e entender as características de cada um é uma habilidade essencial para qualquer desenvolvedor front-end.

Nesta lição, vamos conhecer em profundidade os cinco formatos mais usados na web: JPEG, PNG, GIF, SVG e WebP.

Raster vs. Vetorial: a distinção fundamental

Antes de entrar nos formatos, é preciso entender a diferença entre os dois tipos de imagem que existem na computação:

Imagens rasterizadas

Uma imagem rasterizada é formada por uma grade de pixels — cada pixel tem uma cor específica, e juntos eles formam a imagem.

■■■□□□□□□□
■■■□□■■□□□  ← cada quadrado é um pixel
■■■□□■■□□□
□□□□□□□□□□

Quando você amplia uma imagem rasterizada além do seu tamanho original, os pixels ficam visíveis e a imagem parece "pixelada" ou borrada — a famosa perda de qualidade.

Formatos rasterizados: JPEG, PNG, GIF, WebP

Imagens vetoriais

Uma imagem vetorial não é formada por pixels — ela é formada por instruções matemáticas que descrevem formas geométricas: "desenhe um círculo de raio 50px no ponto (100, 100)".

Como são equações matemáticas, as imagens vetoriais podem ser escaladas para qualquer tamanho — de um ícone de 16px até um outdoor de 10 metros — sem nenhuma perda de qualidade.

Formato vetorial: SVG

JPEG — Joint Photographic Experts Group

Extensões: .jpg ou .jpeg

O JPEG é o formato mais antigo e mais usado para fotografias e imagens com gradientes suaves e muitas cores.

Como o JPEG funciona

O JPEG usa um algoritmo de compressão com perda (lossy) — ele descarta informações de cor que o olho humano dificilmente percebe, reduzindo dramaticamente o tamanho do arquivo.

Pense assim: em um céu azul com gradiente, o JPEG pode simplificar dezenas de tons de azul ligeiramente diferentes em grupos de tons similares — você quase não percebe, mas o arquivo fica muito menor.

Características do JPEG

JPEG perde qualidade a cada salvamento

Uma propriedade importante do JPEG é que ele perde qualidade cada vez que é salvo novamente. Abrir, editar e salvar uma imagem JPEG repetidas vezes vai degradando a qualidade progressivamente — como fazer uma fotocópia de uma fotocópia.

<!-- ✅ Uso correto: fotografia de produto -->
<img
  src="foto-produto.jpg"
  alt="Tênis esportivo azul modelo AirRun Pro visto de lado"
  width="600"
  height="400"
>

<!-- ✅ Uso correto: imagem de background -->
<img
  src="paisagem-hero.jpg"
  alt=""
  width="1200"
  height="600"
>

PNG — Portable Network Graphics

Extensão: .png

O PNG foi criado como substituto moderno do GIF para imagens estáticas. Seu grande diferencial é o suporte a transparência e a compressão sem perda (lossless).

Compressão sem perda

Ao contrário do JPEG, o PNG não descarta nenhuma informação visual — a imagem pode ser salva e aberta infinitas vezes sem nenhuma degradação de qualidade.

A contrapartida é que arquivos PNG geralmente são maiores que JPEG para o mesmo conteúdo fotográfico.

Transparência no PNG

O PNG suporta canal alpha — um quarto canal além do vermelho, verde e azul que define a transparência de cada pixel. Isso permite criar imagens com bordas suaves e fundos transparentes.

<!-- ✅ Logo com fundo transparente -->
<img
  src="logo-transparente.png"
  alt="Logo da empresa"
  width="160"
  height="50"
>

<!-- ✅ Ícone com transparência sobre fundo colorido -->
<img
  src="icone-notificacao.png"
  alt="3 notificações pendentes"
  width="32"
  height="32"
>

Características do PNG

💡 Para fotografias, o PNG pode gerar arquivos 3 a 5 vezes maiores que o JPEG equivalente sem benefício visual perceptível. Use JPEG para fotos e PNG para imagens que precisam de transparência ou bordas nítidas com texto.

GIF — Graphics Interchange Format

Extensão: .gif

O GIF é o mais antigo dos formatos desta lição — criado em 1987 — e sobreviveu ao tempo por uma razão principal: é o único formato amplamente suportado que permite animações com HTML puro.

Como o GIF funciona

O GIF armazena uma sequência de frames — como um flipbook digital — que o navegador exibe em loop. Cada frame é uma imagem separada com sua própria paleta de cores.

A limitação das 256 cores

A maior desvantagem do GIF é que cada frame suporta no máximo 256 cores. Isso o torna inadequado para fotografias — que têm milhões de cores — mas perfeitamente aceitável para animações simples com poucas cores.

<!-- ✅ Uso correto: animação simples de ícone -->
<img
  src="loading-spinner.gif"
  alt="Carregando..."
  width="32"
  height="32"
>

<!-- ✅ Uso correto: ilustração animada simples -->
<img
  src="mascote-acenando.gif"
  alt="Mascote da empresa acenando"
  width="200"
  height="200"
>

GIF e acessibilidade: atenção ao movimento

Animações em GIF que piscam mais de 3 vezes por segundo podem causar crises em pessoas com epilepsia fotossensível. As diretrizes WCAG recomendam que animações automáticas possam ser pausadas ou controladas pelo usuário.

Para animações na web moderna, formatos como CSS animations, SVG animado e WebP animado são alternativas mais eficientes ao GIF.

Características do GIF

SVG — Scalable Vector Graphics

Extensão: .svg

O SVG é o único formato vetorial desta lista — e isso o torna completamente diferente dos outros. Em vez de pixels, um arquivo SVG contém código XML que descreve formas, linhas, curvas e cores:

<!-- O que está dentro de um arquivo .svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#FF6B35"/>
  <rect x="30" y="30" width="40" height="40" fill="#FFF"/>
</svg>

Isso significa que um SVG pode ser escalado infinitamente sem nenhuma perda de qualidade — perfeito para logos, ícones e ilustrações que precisam aparecer em tamanhos variados.

SVG na tag img

<!-- ✅ Logo em SVG — nítido em qualquer tamanho de tela -->
<img
  src="logo.svg"
  alt="Logo da empresa"
  width="160"
  height="48"
>

<!-- ✅ Ícone em SVG -->
<img
  src="icones/estrela.svg"
  alt=""
  width="24"
  height="24"
>

SVG inline: código diretamente no HTML

Além de referenciar arquivos .svg com <img>, você pode inserir o código SVG diretamente no HTML — chamado de SVG inline. Isso permite estilizar e animar o SVG com CSS e JavaScript:

<!-- SVG inline: código diretamente no HTML -->
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-label="Favoritar"
  role="img"
>
  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5
           C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09
           C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5
           c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>

Características do SVG

WebP — Web Picture Format

Extensão: .webp

O WebP foi desenvolvido pelo Google em 2010 como um formato moderno e eficiente para a web — capaz de substituir tanto JPEG quanto PNG e GIF com arquivos menores e mesma qualidade.

Por que o WebP é superior

O WebP usa algoritmos de compressão mais avançados e oferece:

• 25 a 35% menos peso que JPEG equivalente
• 25% menos peso que PNG equivalente
• Suporte a transparência (como PNG)
• Suporte a animações (como GIF, mas muito mais leve)
• Compressão com e sem perda

Mesma foto de produto:
├── foto.jpg    → 320 KB
├── foto.png    → 890 KB
└── foto.webp   → 210 KB  ← mesmo visual, arquivo menor

<!-- ✅ Foto em WebP com fallback para JPEG -->
<!-- (uso com <picture> — próxima lição) -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descrição da foto" width="600" height="400">
</picture>

<!-- ✅ Imagem WebP simples quando não precisa de fallback -->
<img
  src="produto.webp"
  alt="Notebook aberto sobre mesa de trabalho"
  width="800"
  height="533"
>

Suporte ao WebP

O WebP tem suporte em todos os navegadores modernos — Chrome, Firefox, Safari (desde 2020), Edge e Opera. Para projetos que precisam suportar navegadores muito antigos, é necessário fornecer um fallback com JPEG ou PNG.

Características do WebP

Comparação completa dos formatos

Guia rápido: qual formato usar?

Precisa de escalabilidade infinita?
  └── Sim → SVG

É uma fotografia?
  └── Sim → WebP (fallback: JPEG)

Precisa de transparência?
  └── Sim → WebP ou PNG (SVG se for vetorial)

É uma animação simples?
  └── Sim → WebP animado, CSS animation ou GIF (legacy)

É um ícone ou logo rasterizado?
  └── Sim → WebP ou PNG

Nada acima?
  └── WebP com fallback JPEG

Resumindo

• JPEG → fotografias; compressão com perda; sem transparência; menor tamanho para fotos
• PNG → imagens com transparência; compressão sem perda; mais pesado que JPEG para fotos
• GIF → animações simples; máximo 256 cores; transparência de 1 cor
• SVG → vetorial; escalável infinitamente; editável com CSS; ideal para logos e ícones
• WebP → formato moderno; menor que JPEG e PNG; suporta transparência e animação; use por padrão em projetos modernos