≡En resumen
- La transparencia de una imagen se guarda en el canal alfa, un cuarto canal además de rojo, verde y azul.
- Para logos e iconos sin fondo usa PNG, WebP o SVG; JPEG siempre rellena el fondo.
- En CSS, opacity afecta al elemento entero y a su contenido; un color con alfa afecta solo a ese color.
- Un texto semitransparente puede no llegar al contraste mínimo de accesibilidad de 4,5:1.
- Los bordes con halo blanco o negro son el error típico al recortar un fondo: revísalos sobre varios colores.
01 ¿Qué es la transparency en diseño?
En inglés, transparency también designa la transparencia informativa de empresas y administraciones. Ese sentido, con la normativa sobre precios, publicidad e IA, lo tienes en la ficha de transparencia en empresa y marketing. Aquí tratamos el sentido gráfico: imágenes, formatos y CSS.
02 El canal alfa: cómo se guarda la transparencia
Una imagen en color se compone de tres canales: rojo, verde y azul (RGB). El canal alfa es un cuarto canal que indica, para cada píxel, cuánto cubre lo que hay detrás. Según la especificación PNG del W3C, un alfa de cero significa totalmente transparente y el valor máximo, totalmente opaco. Con 8 bits hay 256 niveles (0 a 255); con 16 bits, 65.536.
RGBA
Modelo de color con canal alfa. Es el que usan PNG, WebP y los colores con transparencia en CSS.
Transparencia binaria
Un píxel es o totalmente visible o invisible, sin valores intermedios. Es la del GIF: provoca bordes dentados en curvas.
Alfa sin premultiplicar
PNG guarda el color y el alfa por separado (alfa «no asociado»). Otros sistemas multiplican el color por el alfa para componer más rápido.
Máscara
En Photoshop o Figma, una máscara de capa define la transparencia sin borrar píxeles, así que se puede corregir después.
Una tienda recorta la foto de una zapatilla y quiere conservar su sombra sobre cualquier fondo. La zapatilla tiene alfa 255 (opaca), el fondo alfa 0 (transparente) y la sombra, valores entre 40 y 120: se oscurece el fondo que haya debajo sin taparlo. Solo un formato con canal alfa completo, como PNG o WebP, conserva esa sombra.
03 Formatos de imagen con transparencia
| Formato | Transparencia | Cuándo usarlo |
|---|---|---|
| PNG | Canal alfa completo de 8 o 16 bits, o un color transparente en imágenes de paleta | Logos, iconos, capturas y gráficos que necesitan calidad sin pérdida |
| WebP | Canal alfa en modo con pérdida y sin pérdida | Web: el WebP sin pérdida ocupa de media un 26 % menos que el PNG, según Google |
| AVIF | Canal alfa | Web con navegadores actuales, cuando buscas el menor peso |
| SVG | Transparencia nativa y opacidad por elemento | Logos e iconos vectoriales que deben escalar sin perder nitidez |
| GIF | Solo un color de la paleta puede ser transparente, sin semitransparencias | Animaciones sencillas heredadas; mejor sustituir por WebP o vídeo |
| JPEG | No admite canal alfa | Fotografías con fondo; nunca para imágenes sin fondo |
La compatibilidad ya no es un freno: según Google, el WebP con transparencia funciona en Chrome, Edge, Firefox, Opera y Safari desde su versión 14 (iOS 14 y macOS Big Sur), así que cubre prácticamente a todos los visitantes de una web actual.
04 Transparencia en CSS: opacity, rgba y transparent
| Técnica | Ejemplo | Qué afecta |
|---|---|---|
| opacity | opacity: 0.5; | Todo el elemento con su contenido (texto, imágenes, hijos) |
| Color con alfa | background: rgb(0 0 0 / 40%); | Solo ese color; el texto del elemento sigue opaco |
| Hexadecimal de 8 dígitos | color: #1a73e880; | Solo ese color; los dos últimos dígitos son el alfa |
| Palabra clave | background: transparent; | Color totalmente transparente |
| Imagen con alfa | background-image: url(logo.webp); | La transparencia viene del propio archivo |
La diferencia importa: si pones opacity: 0.5 a una tarjeta, también se vuelve semitransparente su texto. Para una capa oscura sobre una foto con el titular bien legible, usa un fondo con alfa y deja el texto opaco. Según MDN, además, cualquier opacidad menor que 1 crea un nuevo contexto de apilamiento, lo que puede cambiar qué elemento queda por encima. Lo tienes todo en la ficha de CSS.
05 Cómo crear una imagen con fondo transparente
-
1
Parte del mejor original
Mejor el archivo vectorial o la foto a mayor resolución; recortar una imagen pequeña o comprimida deja bordes sucios.
-
2
Separa el fondo
Con selección de sujeto, varita mágica o pluma en tu editor, o con una herramienta de eliminación de fondo con IA.
-
3
Usa una máscara
Oculta el fondo con una máscara de capa en lugar de borrarlo, para poder corregir detalles como el pelo.
-
4
Revisa los bordes
Colócala sobre un fondo negro y otro blanco para detectar halos; contrae o suaviza el borde si hace falta.
-
5
Exporta con alfa
Guarda en PNG, WebP o SVG (si es vectorial). Comprueba que la opción de transparencia está activada.
Cuando la pieza va a redes, recuerda adaptar el lienzo a las medidas de imágenes para redes sociales: muchas plataformas convierten el PNG a JPEG y rellenan la transparencia con blanco o negro, así que prueba cómo se ve antes de publicar.
06 Usos habituales y errores frecuentes
Identidad visual
Versiones del logo sin fondo para fondos claros y oscuros.
Ecommerce
Productos recortados para fichas homogéneas, banners y anuncios.
Interfaces
Capas modales, menús y superposiciones que dejan ver el contexto.
Vídeo y motion
Gráficos y rótulos con canal alfa para superponer en edición.
- ✓Exportar el logo en JPEG y encontrarse un rectángulo blanco en la web.
- ✓Dejar un halo blanco alrededor del recorte que se ve sobre fondos oscuros.
- ✓Aplicar opacity al contenedor cuando solo querías transparentar el fondo.
- ✓Usar PNG enormes con transparencia donde bastaba un WebP o un SVG.
- ✓Poner texto sobre fondos semitransparentes sin comprobar el contraste.
Una identidad visual bien preparada incluye todas estas versiones y formatos desde el principio. Es parte del trabajo de un servicio de diseño gráfico profesional, y en la web se completa con un diseño web profesional que use cada formato donde rinde mejor.
Preguntas frecuentes sobre Transparency
Significa transparencia: la propiedad de un píxel o elemento que deja ver lo que hay detrás, total o parcialmente. Se controla con el canal alfa o con la opacidad.
Es un canal adicional a rojo, verde y azul que guarda para cada píxel su nivel de transparencia: 0 es totalmente transparente y el valor máximo, totalmente opaco.
PNG, WebP, AVIF y SVG admiten transparencia completa. GIF solo permite un color totalmente transparente y JPEG no admite transparencia.
Porque se exportó sin canal alfa, porque el programa o la red social lo convirtió a JPEG, o porque el fondo blanco estaba en una capa visible al exportar.
Selecciona el sujeto en un editor como Photoshop, Figma o GIMP, o usa una herramienta de eliminación de fondo con IA; oculta el fondo con una máscara, revisa los bordes y exporta en PNG o WebP con transparencia.
opacity hace semitransparente el elemento completo con todo su contenido; un color con alfa, como rgb(0 0 0 / 40%), solo afecta a ese color, por ejemplo al fondo.
Para la web suele ser mejor WebP, que admite alfa y pesa menos: Google indica que el WebP sin pérdida es de media un 26 % más ligero que el PNG. PNG sigue siendo útil como archivo maestro y para máxima compatibilidad.
Fuentes consultadas
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.