Cómo guardar PNG transparentes sin bordes blancos
Recortaste un logotipo, guardaste PNG transparente y sobre oscuro aparece un contorno claro fino. El recorte no está mal: son unos pocos píxeles parcialmente transparentes que aún contienen el color del fondo eliminado. Aquí explicamos de dónde vienen y cómo quitarlos.
Qué almacena realmente un canal alfa
Un píxel PNG contiene cuatro números: rojo, verde, azul y alfa. Alfa es la opacidad, de 0 (invisible) a 255 (completamente opaco). El detalle fundamental es que un píxel conserva sus valores RGB incluso con alfa bajo. Un píxel puede ser blanco puro y un 90 por ciento transparente. Apenas lo verás, hasta que se componga sobre algo oscuro y ese blanco tenue se haga visible.
Todos los problemas de bordes blancos son variantes de lo mismo: píxeles de borde parcialmente transparentes que contienen un color incorrecto debajo.
Causa 1: bordes suavizados mezclados con blanco
Las imágenes digitales tienen píxeles cuadrados; los objetos reales tienen bordes curvos. El suavizado salva esa diferencia haciendo que los píxeles del borde mezclen el objeto con lo que hay detrás. Un píxel cubierto en un 40 por ciento por un logotipo rojo sobre una página blanca se almacena como rosa pálido: 40 por ciento rojo mezclado con 60 por ciento blanco.
Ahora elimina el fondo. Un eliminador típico borra los píxeles próximos al color del fondo y conserva los demás. El rosa pálido no se parece lo suficiente al blanco puro, así que sobrevive opaco y rosa. Repite eso a lo largo del contorno y obtendrás un borde claro de un píxel alrededor de toda la forma.
Los mejores eliminadores hacen algo más inteligente: en vez de una decisión binaria de conservar o borrar, asignan a ese píxel un alfa del 40 por ciento e intentan recuperar el rojo subyacente. Pero recuperar el color real de una mezcla es una estimación, y cuánto blanco consiguen eliminar determina lo limpio que se ve el borde.
Causa 2: el formato descartó el canal alfa
JPEG no tiene canal alfa. Ninguno. Es un formato de tres canales diseñado para fotografías y no hay espacio en el archivo donde almacenar transparencia. Al guardar una imagen transparente como JPG, el codificador la aplana sobre un fondo —casi siempre blanco— y la transparencia desaparece permanentemente.
Aquí ocurre el desastre típico. Exportas PNG limpio y después un CMS, chat, herramienta de diseño o correo lo convierte a JPG. El fondo transparente se vuelve un rectángulo blanco. Si lo eliminas otra vez, recortas bordes comprimidos JPEG, mucho más sucios que los originales.
| Formato | Compatibilidad con alfa | Úsalo para |
|---|---|---|
| PNG | Alfa completo de 8 bits, sin pérdida | Logotipos, recortes, sprites y recursos de interfaz: la opción predeterminada segura |
| WebP | Alfa completo, con o sin pérdida | Distribución web donde importa el tamaño de archivo |
| AVIF | Alfa completo | Distribución web, archivos mínimos, menos compatibilidad de herramientas |
| GIF | Solo 1 bit (activado o desactivado) | Ninguna función moderna: bordes duros, 256 colores |
| JPEG | Ninguno | Fotografías sin transparencia |
| SVG | Nativo (vector) | Logotipos e iconos que existen como vectores |
Observa la fila GIF. Su transparencia de un bit hace cada píxel totalmente visible o invisible, sin cobertura parcial: no permite suavizado y todos los bordes son dentados. Convertir un PNG suave a GIF cambia un halo por una escalera.
Causa 3: contaminación de bordes por el color mate
Algunos editores guardan un color de fondo «matte»: asignan al RGB de los píxeles transparentes un color, normalmente blanco, suponiendo que no importa porque alfa es cero. Habitualmente es así. Pero algunos renderizadores y casi todas las operaciones de tamaño promedian píxeles vecinos incluido sus valores RGB, ponderados o no por alfa. Un cambio de tamaño ingenuo introduce ese blanco invisible en el borde visible.
Por eso una imagen perfecta a tamaño completo puede desarrollar halo al reducirse. La técnica correcta es alfa premultiplicado: RGB ya multiplicado por alfa para promediar bien. Los navegadores y motores modernos suelen manejarlo; flujos antiguos y código personalizado no siempre.
Soluciones, por orden de preferencia
1. Evita introducir el problema
Si controlas el original, esta es con diferencia la mejor opción. Exporta la ilustración desde la herramienta donde se creó con fondo transparente desde el principio, en lugar de aplanarla sobre blanco y volver a eliminarlo después. Las herramientas vectoriales, los renderizadores 3D y las aplicaciones de diseño admiten exportación alfa. Cada etapa de eliminación es una oportunidad de fallo.
Si generas imágenes con un modelo de IA, pide explícitamente un fondo transparente o un color de fondo que no aparezca en el sujeto. El magenta intenso es la elección tradicional: nada natural tiene ese color, por lo que separarlo es inequívoco.
2. Elimina el fondo sobre un color de contraste
El halo blanco existe porque el fondo era blanco. Sobre magenta o verde neón, los restos serán magenta o verdes: quizá más feos, pero más fáciles de detectar y corregir al estar lejos de los colores del objeto.
Nuestro Eliminador de fondos muestrea esquinas para identificar fondo, borra colores coincidentes y exporta PNG transparente. Funciona con fondos planos: productos sobre blanco, logotipos sobre un color y gráficos exportados. No sirve para fotos complejas o degradados; ahí corresponde segmentación del sujeto.
3. Contrae el alfa un píxel
Si el halo ya está incorporado, la solución fiable más directa es reducir ligeramente el área visible para que el anillo contaminado quede fuera. En un editor: carga el canal alfa como selección, contráela un píxel, inviértela y borra. En Photoshop corresponde a Layer → Matting → Defringe, que hace algo parecido automáticamente; GIMP tiene Layer → Transparency → Threshold Alpha y las opciones de eliminación de suavizado de Script-Fu.
La contrapartida es real: eliminas un píxel de detalle auténtico del borde. En un logotipo de 2000 píxeles nadie lo nota. En un icono de 32, uno es el tres por ciento del ancho y adelgaza visiblemente la forma. Ajusta la solución al tamaño.
4. Recolorea el borde en lugar de eliminarlo
Es mejor para imágenes pequeñas. En vez de eliminar el anillo semitransparente, sustituye su RGB por el color que debería tener —el de los píxeles interiores adyacentes— y conserva el alfa. El borde mantiene su suavidad y su forma; solo desaparece la contaminación. Defringe de Photoshop con un radio pequeño se aproxima a esto, y es sencillo implementarlo directamente si trabajas con datos de imagen de canvas en código.
5. Compón sobre el color de destino
A veces no necesitas transparencia. Si el logotipo solo aparecerá sobre un fondo conocido, aplánalo sobre ese color exacto y entrega una imagen normal. Sin alfa, halos ni riesgo de formato. No es tanto un truco como reconocer que solo compensa complicarse si el fondo cambia.
Revisión de tu trabajo
Antes de dar por terminado un recorte, revisa esta lista. Lleva un minuto y detecta casi todo.
- Míralo sobre negro y blanco. Cualquier halo será evidente sobre uno de los dos. Las vistas previas de damero de los editores pueden engañar porque el gris medio oculta tanto los bordes claros como los oscuros.
- Míralo al 100 por ciento y reducido. Un halo que aparece solo al escalar indica contaminación del borde por el color de fondo durante el redimensionado, no un problema del archivo.
- Confirma que el archivo realmente sea PNG o WebP. Comprueba la extensión y los bytes reales, no solo lo que diga el CMS. Un archivo llamado logo.png que pasó por un proceso JPEG es un fallo habitual y confuso.
- Prueba en el destino real. Los navegadores, motores de juegos y procesos de impresión componen de forma diferente. La única prueba que cuenta es la del lugar donde se utilizará realmente la imagen.
- Busca una capa no deseada que abarque todo el lienzo. Una capa de fondo casi invisible con una opacidad del 1 por ciento no se verá en el editor, pero producirá un velo tenue en la exportación.
Preguntas frecuentes
¿Por qué mi PNG se ve bien en el editor pero tiene un borde blanco en mi web?
Dos causas probables: el editor mostraba un damero claro que ocultaba el halo, o la compilación o CMS cambió tamaño o codificación. Descarga el archivo exacto que carga el navegador y ábrelo sobre negro, no tu original local.
¿WebP es tan seguro como PNG para la transparencia?
Para usar en navegadores, sí: WebP admite un canal alfa completo y todos los navegadores actuales lo soportan. WebP con pérdida puede introducir artefactos cerca de bordes nítidos, así que usa WebP sin pérdida o PNG para logotipos y pixel art. Fuera de los navegadores, la compatibilidad de herramientas es menos universal que con PNG, por lo que PNG sigue siendo el formato más seguro para archivado.
¿Puedo recuperar la transparencia de un JPG que antes la tenía?
No correctamente. El alfa ya no existe, así que volverás a recortar una imagen aplanada cuyos bordes también tienen artefactos JPEG. Puedes lograr algo aceptable con una forma simple sobre fondo limpio, pero recuperar el archivo transparente original siempre merece la pena si existe.
¿Debo usar alguna vez JPG para una imagen transparente?
No. JPEG no almacena transparencia y la exportación aplana silenciosamente sobre un color de fondo. Si necesitas tamaños similares con alfa, usa WebP con pérdida o AVIF: ambos comprimen de forma comparable y conservan el canal alfa.
Prueba Eliminador de fondos
Suelta una imagen con fondo de color uniforme y exporta un PNG transparente. Detección mediante píxeles de las esquinas, salida PNG y todo procesado localmente en tu navegador: la imagen nunca se sube.
Abrir Eliminador de fondos