Fundo transparente: quais formatos suportam e quando usar (PNG, WebP, AVIF)

•20 palavras•1m leitura

Ao remover o fundo, é preciso um formato com canal alfa para evitar halos e serrilhados. Guia prático sobre PNG, WebP e AVIF.

1) O essencial: canal alfa

Transparência real exige canal alfa por pixel. Sem alfa, as bordas são pré‑mescladas (matte) e surgem halos.

2) Formatos com transparência

  • PNG (lossless): transparência perfeita e bordas nítidas. Ideal para UI/logos/ícones.
  • WebP: alfa em lossy/lossless. Ótima relação tamanho/qualidade.
  • AVIF: compressão superior com alfa. Revise degradês; encode mais lento.
  • SVG: vetorial, transparente via formas/opacidade.

3) Formatos a evitar

  • JPEG: sem alfa → fringing.
  • GIF: transparência binária → serrilhado.

4) Evitar halos: matte & premultiplicado

Exporte sem matte e com alfa real, depois teste em fundo claro/escuro.

5) PNG, WebP ou AVIF?

  • UI/logos planos: PNG ou WebP lossless.
  • Fotos recortadas: WebP/AVIF com alfa.
  • Vetorial: SVG sempre que possível.

6) Fluxo recomendado com Orqui

  1. Remova o fundo.
  2. Converta para WebP/PNG.
  3. Otimize ajustando a qualidade.

7) Checklist de qualidade

  • Sem halos em fundo claro/escuro.
  • Dimensões adequadas ao uso.
  • Formato com alfa (PNG/WebP/AVIF) ou SVG.
  • Tamanho razoável.

Ferramentas & artigos relacionados

Ler em outros idiomas

FAQ

  • Por que JPEG não serve?
    JPEG não tem canal alfa. A falsa transparência com cor matte cria halos ao trocar o fundo.
  • PNG ou WebP para logos?
    PNG (lossless) é nítido; WebP lossless costuma pesar menos com paletas simples. Verifique bordas em fundo claro/escuro.
  • AVIF com transparência é confiável?
    Sim, suporta alfa. Ótima compressão, porém encode mais lento; valide degradês.
  • SVG tem transparência?
    Sim, por ser vetorial: via formas/opacidade. Ideal para logos e ícones.

Contagem das transformações locais que você faz aqui (converter, otimizar, redimensionar, recortar, remover fundo). Tudo acontece de forma privada no seu navegador.