O canal alfa é o quarto valor armazenado em um pixel que controla o quão transparente ele é, ao lado dos valores vermelho, verde e azul que definem sua cor. Alpha varia de totalmente invisível a totalmente sólido, com todos os níveis de transparência parcial entre eles. É a única razão pela qual um logotipo PNG pode flutuar perfeitamente sobre qualquer fundo, enquanto um JPG não, porque JPG não tem canal alfa. A transparência não é um truque dos olhos ou uma propriedade de toda a imagem; são dados anexados a cada pixel individual. Este guia explica o que é o canal alfa, como ele armazena centenas de níveis de transparência, a matemática de composição que combina camadas transparentes, quais formatos o suportam e o que acontece quando você converte uma imagem de um formato para outro.

O que realmente é o canal alfa

Cada imagem digital é uma grade de pixels e cada pixel armazena números que a descrevem. Em uma imagem colorida padrão, cada pixel contém três números para vermelho, verde e azul. O canal alfa adiciona um quarto número que responde a uma pergunta diferente: não de que cor é esse pixel, mas quanto disso você deve ver. Um pixel pode ser vermelho brilhante e totalmente sólido, vermelho brilhante e meio transparente ou vermelho brilhante e completamente invisível. A cor permanece a mesma nos três casos; apenas o alfa muda. Essa separação entre cor e opacidade é o que torna possível a transparência flexível.

O termo vem do trabalho de composição alfa publicado por Thomas Porter e Tom Duff em 1984, que formalizou como combinar imagens com transparência. Seu modelo ainda é a base de todos os programas gráficos, navegadores da web e mecanismos de jogos modernos. Portanto, o canal alfa não é uma conveniência recente incorporada em formatos de imagem; é uma ideia de décadas que alimenta silenciosamente quase tudo que você vê em camadas em uma tela.

RGBA: o quarto valor em cada pixel transparente

Quando um pixel carrega transparência, ele é descrito com quatro valores em vez de três, escritos como RGBA: vermelho, verde, azul e alfa. Você vê essa notação em todo lugar no design e no trabalho na web. Em CSS, uma cor como rgba(255, 0, 0, 0.5) significa vermelho puro com 50% de opacidade. Em um editor de imagens, a mesma ideia aparece como um controle deslizante de opacidade em uma camada. O A é sempre o valor da opacidade, colocado em camadas sobre a cor, em vez de misturado a ela.

Manter o alfa separado da cor é importante. Se a transparência fosse incorporada aos valores das cores, um vermelho semitransparente teria que ser armazenado como um rosa mais claro e você nunca poderia recuperar o vermelho original ou colocá-lo de forma limpa sobre um fundo escuro. Ao armazenar a opacidade como seu próprio canal, o formato mantém a cor verdadeira intacta e permite que o software decida como combiná-la com o que quer que esteja por trás dela. Essa flexibilidade é exatamente a razão pela qual os designers exportam ativos com um canal alfa, em vez de pré-misturá-los em um plano de fundo.

Como o alfa armazena níveis de transparência

O canal alfa não armazena apenas ligado ou desligado. Em uma imagem padrão de 8 bits, alfa contém 256 níveis distintos, de 0 a 255. Um valor 0 significa que o pixel é totalmente transparente e invisível, 255 significa que é totalmente sólido e opaco e cada número intermediário produz transparência parcial. Um valor de 128 torna o pixel quase meio transparente, deixando o fundo aparecer com 50% de intensidade.

Esses 256 níveis são o que fazem a transparência parecer suave, em vez de severa. Uma sombra projetada desaparece gradualmente porque seus pixels carregam valores alfa decrescentes em direção à borda. Um efeito de vidro ou fumaça funciona porque pixels diferentes são transparentes em quantidades diferentes. Formatos mais sofisticados vão além: oferta de canais alfa de 16 bits 65.536 níveis para composição profissional, embora 8 bits seja padrão para imagens da web e cubra tudo o que os olhos precisam.

Composição alfa: a matemática que combina camadas

Quando um pixel transparente fica sobre um fundo, o software precisa descobrir a cor final que você vê. Isso é feito com uma fórmula de mistura simples. O resultado visível é igual ao cor de primeiro plano vezes seu alfa, mais a cor de fundo vezes um menos aquele alfa. Em termos simples, um pixel 70% opaco contribui com 70% de sua própria cor e deixa passar 30% do fundo.

Execute esse cálculo em cada pixel e você obterá uma composição limpa: um logotipo mesclado em uma foto, uma legenda desbotada em um vídeo, um menu desenhado em uma página da web. Isso está acontecendo constantemente. Cada vez que um navegador desenha um elemento semitransparente ou um jogo gera uma nuvem de fumaça, ele executa composição alfa milhões de vezes por segundo. O canal alfa fornece o valor de opacidade que a fórmula precisa para cada pixel.

Anti-aliasing: por que o alfa suaviza as bordas

Uma das tarefas mais importantes do canal alfa é produzir bordas limpas e suavizadas. Considere a borda curva de um logotipo circular. Sem transparência, a curva teria que ser construída a partir de pixels quadrados rígidos, dando-lhe uma aparência irregular e escalonada. Com um canal alfa, os pixels ao longo da borda são definidos para transparência parcial, mesclando gradualmente a forma com o que está por trás dela.

É por isso que um logotipo PNG bem feito fica nítido em uma página branca, escura ou em uma foto. Os pixels das bordas não são pintados de branco ou de qualquer cor única; eles são parcialmente transparentes, portanto se misturam corretamente em todos os planos de fundo. Achate esse logotipo em branco e os mesmos pixels da borda ficarão parcialmente brancos. Coloque a versão achatada em um fundo escuro e você verá um halo pálido e feio, porque a mistura suave foi fixada na cor errada. O canal alfa é o que mantém a borda adaptável.

Alfa direto vs pré-multiplicado

Existem duas maneiras de armazenar cor e alfa juntos, e saber a diferença evita uma classe de bugs frustrantes. Em alfa direto, os valores das cores permanecem inalterados e o alfa é mantido totalmente separado, que é como o PNG armazena a transparência. Em alfa pré-multiplicado, os valores das cores são multiplicados antecipadamente pelo alfa, portanto, um vermelho 50% transparente já é armazenado como um vermelho mais escuro.

O alfa pré-multiplicado é comum em vídeo, composição de filme e renderização em tempo real porque torna certas operações de mesclagem mais rápidas e evita bordas escuras nas bordas. O alfa direto é mais comum para imagens estáticas e ativos da web porque mantém a cor original recuperável. Os problemas aparecem quando o software espera um e recebe o outro, produzindo bordas que parecem muito escuras ou estranhamente brilhantes. Para o trabalho diário de imagens com PNG e gráficos da web, você está lidando com alfa direto e o software cuida disso para você.

Quais formatos de imagem suportam um canal alfa

Nem todo formato pode armazenar transparência, e este é o detalhe prático que confunde as pessoas durante a conversão:

PNG: um canal alfa completo de 8 bits com 256 níveis, o padrão para gráficos transparentes da web.
WebP: um canal alfa completo nos modos sem perdas e com perdas, enquanto produz arquivos menores que PNG.
AVIF: um formato moderno com suporte alfa e forte compactação, crescendo em suporte a navegadores.
GIFs: apenas transparência simples ativada ou desativada, sem níveis parciais, para que as bordas pareçam irregulares.
TIFF e SVG: ambos suportam transparência, usada em trabalhos impressos e vetoriais, respectivamente.
JPG e BMP: nenhum canal alfa, portanto eles não podem armazenar nenhuma transparência.

A conclusão é que PNG e WebP são suas escolhas confiáveis quando a transparência precisa sobreviver, o GIF funciona apenas para recortes com bordas rígidas e o JPG está fora de questão para qualquer coisa transparente.

O canal alfa na web e em CSS

Na web, o canal alfa aparece em dois lugares: dentro de arquivos de imagem e dentro de valores de cores CSS. Um PNG ou WebP transparente carrega seu alfa no próprio arquivo, de modo que se sobrepõe a qualquer plano de fundo da página. CSS então adiciona uma segunda camada de controle com cores rgba() e hsla() e a propriedade opacity, permitindo desbotar elementos, colorir sobreposições e criar efeitos de vidro sem editar as imagens.

Essa combinação é a razão pela qual as interfaces modernas parecem em camadas e suaves. Uma seção de herói pode empilhar uma sobreposição escura semitransparente sobre uma foto para tornar o texto branco legível, usando CSS alfa, enquanto o logotipo na parte superior usa imagem alfa para ficar limpo em qualquer um deles. Ambos baseiam-se na mesma ideia subjacente: cada pixel carrega sua própria opacidade e o navegador compõe tudo em tempo real.

O que acontece com alfa quando você converte para JPG

Como o JPG não possui canal alfa, converter uma imagem transparente em JPG obriga a uma decisão: a transparência deve ser substituída por algo sólido. O conversor nivela o alfa, preenchendo cada pixel transparente ou semitransparente com uma cor de fundo, na maioria das vezes branco. As áreas transparentes tornam-se sólidas e as bordas suaves que dependiam do alfa parcial ficam bloqueadas nessa cor de preenchimento.

É exatamente por isso que um logotipo pode acabar em uma caixa branca ou preta após a conversão, ou mostrar um leve halo nas bordas. As informações necessárias para combiná-las com um novo plano de fundo desapareceram, porque o JPG não tinha onde armazená-las. Se você precisa de transparência para sobreviver, a resposta é manter o PNG ou converter para WebP. Quando você realmente deseja uma imagem plana, escolher a cor de preenchimento correta é importante. Nosso conversor permite escolher branco, preto ou uma cor personalizada para o preenchimento ou exportar WebP para manter o canal alfa inteiramente, que o guia de fundo transparente passa.

Problemas comuns de transparência e como evitá-los

A maioria das dores de cabeça de transparência remonta ao canal alfa sendo achatado contra a cor errada, uma etapa chamada fosqueamento. Aqui estão os culpados habituais:

Caixa branca ou preta: um PNG transparente convertido em JPG preenche seu fundo com uma cor sólida. Combine o preenchimento com o destino ou mantenha a transparência.
Halo ou franja de borda: um logotipo fosco em branco e colocado em um fundo escuro mostra um contorno claro. Exporte novamente do arquivo transparente original com a cor correta ou mantenha-o transparente.
Franjas escuras: muitas vezes uma incompatibilidade alfa direta versus pré-multiplicada. A reexportação com o tipo alfa correto corrige o problema.
Transparência perdida após a edição: achatar camadas ou salvar como JPG descarta o alfa. Mantenha um mestre em camadas ou PNG.

A regra que evita quase tudo isso: decida o plano de fundo antes de nivelar e mantenha um arquivo original que ainda tenha seu canal alfa para que você possa reexportar de forma limpa.

Perguntas frequentes

O que é um canal alfa?

O canal alfa é um valor por pixel que controla a transparência, de totalmente invisível a totalmente sólido, armazenado junto com o vermelho, o verde e o azul que definem a cor de um pixel.

O que significa RGBA?

RGBA significa vermelho, verde, azul e alfa. O valor alfa define a opacidade do pixel acima de sua cor, então rgba(255, 0, 0, 0.5) é vermelho em 50 por cento.

Por que o PNG tem transparência, mas o JPG não?

Porque PNG inclui um canal alfa e JPG não. Sem um local para armazenar a opacidade por pixel, o JPG não consegue conter nenhuma transparência.

Quantos níveis de transparência um canal alfa pode armazenar?

256 níveis em uma imagem padrão de 8 bits, de 0 para invisível a 255 para sólido. Alfa profissional de 16 bits oferece 65.536 níveis para composição precisa.

O que acontece com o canal alfa quando eu converto para JPG?

Está achatado. As áreas transparentes são preenchidas com uma cor sólida, geralmente branco, porque o JPG não tem como armazenar os dados de opacidade.

Quais formatos de imagem suportam um canal alfa?

PNG, WebP, AVIF, TIFF e SVG suporte alfa, com PNG e WebP oferecendo transparência parcial suave. GIF tem apenas transparência ativada ou desativada e JPG não tem nenhuma.

O alfa direto ou o alfa pré-multiplicado é melhor?

Nenhum dos dois é universalmente melhor; eles se adaptam a trabalhos diferentes. Alfa direto mantém as cores recuperáveis e se adapta a imagens estáticas, enquanto o alfa pré-multiplicado acelera a mesclagem de vídeo e a renderização em tempo real.

Como mantenho a transparência ao reduzir o tamanho do arquivo?

Converter para WebP em vez de JPG. O WebP mantém o canal alfa enquanto reduz o tamanho em 25 a 35 por cento, para que o fundo permaneça transparente e o arquivo fique mais claro.