PNG con transparencia: cómo funciona el canal alfa y cómo usarlo
La transparencia es una de las características más útiles del formato PNG. Permite crear imágenes con fondos transparentes que se integran perfectamente sobre cualquier fondo de la web o de un diseño. Aquí está todo lo que necesitas saber.
¿Qué es el canal alfa?
El canal alfa es un cuarto canal de color (además de Rojo, Verde y Azul) que define la opacidad de cada píxel:
- Alpha = 255 (o 100%): píxel completamente opaco
- Alpha = 0 (o 0%): píxel completamente transparente
- Alpha = 128 (o ~50%): píxel semitransparente
Esto permite crear no solo transparencia total o cero, sino también transparencia parcial para efectos de sombras, bordes difuminados, agua, cristal o cualquier efecto semitransparente.
PNG-8 vs PNG-24 vs PNG-32
| Tipo | Colores | Transparencia | Tamaño |
|---|---|---|---|
| PNG-8 | 256 colores (paleta) | Binaria (sí/no por píxel) | Pequeño |
| PNG-24 | 16,7 millones | No (sin canal alfa) | Mediano |
| PNG-32 | 16,7 millones | Completa (256 niveles de alfa) | Grande |
El término "PNG-32" no es oficial en la especificación PNG — se refiere popularmente a PNG-24 + canal alfa.
Para logotipos simples con pocas áreas de color: PNG-8 con transparencia binaria es suficiente y más pequeño.
Para fotografías, ilustraciones con degradados o bordes suaves: PNG-32 (24-bit RGB + 8-bit alfa).
Cómo quitar el fondo de una imagen y guardarla como PNG
Con GIMP (gratis)
- Abre la imagen en GIMP
- Imagen → Modo → RGB (si no está ya en RGB)
- Añade canal alfa: Imagen → Aplanar imagen NO — en vez, Capa → Transparencia → Añadir canal alfa
- Usa la herramienta "Fuzzy Select" (varita mágica) para seleccionar el fondo
- Eliminar → vacío (el fondo se vuelve tablero de ajedrez = transparente)
- Archivo → Exportar como → imagen.png
Para bordes más suaves: usa "Select by Color" con tolerancia baja, luego Select → Grow (crecer) 1–2 px y Select → Feather (difuminar) 1 px antes de eliminar.
Con Photoshop
- Capa de fondo: doble clic para convertirla en capa normal
- Herramienta de selección rápida o la opción "Eliminar fondo" con IA (objeto → seleccionar sujeto)
- Añadir máscara de capa
- Archivo → Guardar una copia → PNG
Con rembg (automático, Python)
pip install rembg
rembg i imagen_con_fondo.jpg imagen_sin_fondo.png
rembg usa modelos de IA para detectar y eliminar el fondo automáticamente. Funciona muy bien con personas, productos y animales sobre fondos simples.
Online
Servicios como remove.bg, PhotoRoom o KaijuConverter pueden procesar imágenes y eliminar fondos automáticamente.
PNG con transparencia para web
En HTML, simplemente referencia el PNG con transparencia y el fondo del elemento padre se verá a través:
<!-- Imagen con fondo transparente sobre fondo azul -->
<div style="background: #1e3a5f; padding: 20px;">
<img src="logo-transparente.png" alt="Logo">
</div>
En CSS, puedes usar imágenes PNG con transparencia en:
.elemento {
background-image: url('patron-transparente.png');
background-color: #f5f5f5; /* se verá detrás del PNG */
}
Cuándo usar WebP en lugar de PNG para transparencia
WebP en modo lossless también soporta canal alfa, con ventajas:
| Aspecto | PNG-32 | WebP lossless |
|---|---|---|
| Calidad | Sin pérdida | Sin pérdida |
| Tamaño archivo | Referencia | 20–30% menor |
| Compatibilidad | Universal | Chrome, Firefox, Edge, Safari 14+ |
Para sitios web modernos donde la compatibilidad con IE ya no importa, WebP lossless con alfa es la mejor opción: misma calidad, menos peso.
# Convertir PNG con transparencia a WebP lossless
cwebp -lossless -q 90 imagen-con-alfa.png -o imagen-con-alfa.webp
Transparencia en otros formatos
- GIF: transparencia binaria (1 bit) — un color del GIF se declara transparente. No hay semitransparencia; los bordes se ven dentados.
- JPEG: sin soporte para transparencia. El fondo siempre es un color sólido.
- SVG: soporte completo para opacidad y canal alfa mediante CSS/atributos.
- TIFF: soporte completo de canal alfa, pero más usado en flujos profesionales/impresión.
- APNG: PNG animado con canal alfa, pero poca compatibilidad.
Reducir el tamaño de PNG con transparencia
Los PNG con canal alfa tienden a ser grandes. Para reducirlos sin perder calidad:
# pngquant: compresión con pérdida mínima en paleta (PNG-8)
pngquant --quality=80-90 --output imagen-optimizada.png imagen-original.png
# optipng: optimización lossless del PNG
optipng -o5 imagen.png
# En web, usa WebP como primera opción y PNG como fallback
Las herramientas como TinyPNG o Squoosh también reducen el tamaño de PNGs con transparencia manteniendo el canal alfa intacto.