Canal alfa
Canal de datos de transparencia por píxel que permite semitransparencia y recortes suaves en PNG y WebP.
El canal alfa almacena la transparencia por píxel como cuarto canal junto al RGB, correspondiente a la A en RGBA. Su fundamento teórico fue establecido en el artículo de composición alfa de Porter y Duff en 1984.
Los valores alfa suelen ir de 0 a 255 (8 bits); PNG también admite 16 bits de precisión (0-65535) y la función rgba() de CSS usa una fracción de 0 a 1 (también se admite un porcentaje). En términos de 8 bits:
- 0: Totalmente transparente - el fondo se ve a través
- 255: Totalmente opaco - el color del píxel se muestra tal cual
- 1-254: Semitransparente - se mezcla con el fondo mediante composición
Formatos compatibles:
- PNG: Alfa de 8 o 16 bits, almacenado como alfa directo (no premultiplicado). Muy usado para transparencia en la web
- WebP: Alfa tanto en modo con pérdida como sin pérdida
- AVIF: Alfa completo con alta compresión
- TIFF: Múltiples canales alfa para impresión/DTP
- GIF: Solo transparencia binaria (un color de la paleta marcado como transparente); sin semitransparencia
JPEG no soporta canal alfa, por lo que las imágenes transparentes requieren PNG, WebP o AVIF. Al convertir una imagen transparente a JPEG, las zonas transparentes se rellenan con un color de fondo (aplanado), así que conviene decidir ese color antes de convertir.
Una trampa habitual en la práctica es la convención de almacenamiento. El alfa directo (no premultiplicado) conserva los valores de color tal cual, mientras que el alfa premultiplicado guarda los colores ya multiplicados por alfa; PNG usa el primero. Mezclar ambas convenciones al componer produce bordes semitransparentes anormalmente oscuros o claros.
En desarrollo web, los canales alfa son esenciales para logotipos transparentes, superposiciones de interfaz, composición y efectos. A diferencia de la propiedad CSS opacity que controla uniformemente elementos completos, los canales alfa especifican la transparencia por píxel, permitiendo recortes complejos y suavizado de bordes (anti-aliasing).