De PNG a GIF animado con fondo transparente: halos, bordes y mejores formatos
Por el equipo de Charmotion · Actualizado el
Sí, un GIF puede ser transparente, pero solo con transparencia de 1 bit: cada píxel es totalmente transparente o totalmente opaco. Los bordes suaves del PNG se fuerzan hacia uno u otro lado, lo que produce bordes dentados o halos blancos y oscuros. Primero aplana los bordes contra el color de fondo, convierte con palettegen y paletteuse de ffmpeg, o cambia a WebP animado, APNG o WebM.
Puntos clave
- GIF marca un color de la paleta como totalmente transparente; no existe la transparencia parcial.
- Los halos vienen de los píxeles del borde con antialiasing que se mezclaron con un fondo distinto.
- Si conoces el fondo, aplana los bordes sobre ese color y conserva solo el recorte duro del alfa.
- Con un WebM como origen, pon
-c:v libvpx-vp9antes de-io ffmpeg descartará el alfa. - APNG y WebP animado conservan un alfa suave y son compatibles con todos los navegadores principales; usa GIF solo donde sea obligatorio.
¿Un GIF puede tener fondo transparente?
Sí, con una gran limitación. La guía de formatos de imagen de MDN explica que los píxeles de un GIF "son opacos, a menos que se designe un índice de color específico como transparente, en cuyo caso los píxeles de ese color son totalmente transparentes". Así que un GIF tiene una sola entrada de paleta transparente y nada intermedio. Esto se conoce como transparencia de 1 bit.
GIF también está limitado a una paleta de 256 colores como máximo por fotograma, así que los degradados y las sombras suaves se reproducen con tramado (dithering). La propia MDN recomienda, para secuencias animadas, "considerar WebP, AVIF o APNG" en su lugar.
Para un logo plano con bordes duros, un GIF transparente puede verse bien. Para un personaje con contornos suavizados (antialiasing), una sombra paralela o un resplandor, se le notarán los bordes.
¿Por qué mi GIF transparente tiene un halo blanco u oscuro?
Porque los píxeles del borde de tu PNG son parcialmente transparentes y GIF no puede guardar eso. Un contorno suave tiene un anillo de píxeles con, por ejemplo, un 30 % o un 70 % de opacidad. Al convertir, cada uno de esos píxeles debe volverse totalmente opaco o totalmente transparente.
- Si el conversor los mantiene opacos, conservan el color con el que se mezclaron. Si era blanco y tu GIF está sobre una página oscura, verás un borde blanco.
- Si los descarta, el contorno queda escalonado.
No hay ningún ajuste que lo elimine por completo, porque falta la información que GIF necesitaría. Las soluciones son mezclar los bordes con el color sobre el que realmente irá el GIF, aceptar un recorte duro o usar un formato con alfa real.
¿Cómo convierto un PNG en un GIF transparente?
Para un solo PNG, ffmpeg crea una paleta con una entrada reservada para la transparencia y luego asigna la imagen a esa paleta. alpha_threshold define el corte: los píxeles con alfa por debajo de ese valor se vuelven transparentes y el resto, opacos. En nuestra prueba, esto mantuvo intacta la zona transparente del logo.
ffmpeg -i logo.png -filter_complex "split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse=alpha_threshold=128" logo.gifPara una animación exportada como secuencia PNG (frame_001.png, frame_002.png, etc.), el mismo filtro funciona en todos los fotogramas. Esta versión además baja a 15 fps y 320 px de ancho, lo que mantiene ligero el archivo:
ffmpeg -framerate 30 -i frame_%03d.png -filter_complex "fps=15,scale=320:-1:flags=lanczos,split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse=alpha_threshold=128" -loop 0 character.gifQué hace cada parte, según la documentación de filtros de FFmpeg: palettegen=reserve_transparent=1 reserva "una entrada de paleta para la transparencia"; paletteuse=alpha_threshold=128 define "el umbral alfa para la transparencia" (de 0 a 255); split permite que una sola entrada alimente ambos pasos; -loop 0 repite en loop infinito. Sube el umbral para un recorte más ajustado o bájalo para conservar más del borde suave como píxeles opacos.
¿Cómo convierto un WebM transparente en GIF con ffmpeg?
Usa la misma cadena de filtros con un flag adicional: -c:v libvpx-vp9 antes de -i. El decodificador VP9 integrado de ffmpeg ignora el canal alfa del WebM; libvpx sí lo lee. En nuestra prueba, el mismo comando generó un GIF con un 77 % de píxeles transparentes con ese flag y un 0 % sin él.
ffmpeg -c:v libvpx-vp9 -i character.webm -filter_complex "fps=15,scale=320:-1:flags=lanczos,split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse=alpha_threshold=128" -loop 0 character.gifSi sabes que el GIF siempre irá sobre un mismo color de fondo, como un correo blanco o una diapositiva blanca, puedes evitar los halos aplanando los bordes suaves sobre ese color y conservando el recorte duro. Este comando compone el personaje sobre blanco y luego restaura el alfa original para que paletteuse le aplique el umbral:
ffmpeg -c:v libvpx-vp9 -i character.webm -filter_complex "[0:v]format=rgba,split=3[fg][al][sz];[sz]drawbox=c=white:t=fill[bg];[bg][fg]overlay[flat];[al]alphaextract[a];[flat][a]alphamerge,fps=15,scale=320:-1:flags=lanczos,split[x][y];[x]palettegen=reserve_transparent=1[p];[y][p]paletteuse=alpha_threshold=128" -loop 0 character-on-white.gifCambia c=white por tu color de fondo. El resultado se ve limpio sobre ese color y con halos sobre otros, así que crea un GIF por cada fondo si necesitas varios.
¿Cuándo son mejores WebP, APNG o WebM que GIF?
Casi siempre, si el destino los acepta:
| Formato | Transparencia | Dónde funciona |
|---|---|---|
| GIF | 1 bit | En todas partes, incluidos los clientes de correo y las plataformas que exigen GIF (emotes de Twitch, muchas apps de chat) |
| APNG | Alfa completo de 8 bits | Todos los navegadores principales (MDN indica Chrome 59, Edge 79, Firefox 3, Opera 46, Safari 8); stickers de iMessage |
| WebP animado | Alfa completo | Navegadores modernos; stickers de WhatsApp |
| WebM VP9 | Alfa completo | Chrome, Edge, Firefox; Safari lo reproduce sin alfa |
Usa GIF donde sea la única opción. Para un sitio web, un par de videos con fondo transparente (primero MOV HEVC para Safari, luego WebM) es más ligero y nítido; consulta video con fondo transparente en sitios web. Para stickers, consulta cómo convertir WebM transparente a formatos de sticker.
¿Puedo obtener un GIF transparente de un set de Charmotion?
No directamente. Los GIF de Charmotion son vistas previas de 480 px sobre un fondo sólido, pensadas para chats, documentos y correos donde un fondo no es problema. Charmotion no exporta GIF transparentes, porque un GIF de 1 bit trasladaría el problema de halos descrito arriba a cada borde suave de tu personaje.
La transparencia viene del video transparente de los planes de pago: un WebM (VP9 con alfa) y un MOV (HEVC con alfa), ambos de 1080×1080. Si una plataforma exige un GIF transparente, usa ese WebM como character.webm en los comandos de arriba y elige el color de mate del lugar donde se mostrará.
Preguntas frecuentes
¿Por qué mi GIF convertido sale negro donde debería ser transparente?
El canal alfa se perdió antes del paso de la paleta. Con un WebM como origen, pon -c:v libvpx-vp9 antes de -i para que ffmpeg lea el alfa, y usa palettegen=reserve_transparent=1.
¿Qué hace alpha_threshold en paletteuse de ffmpeg?
Decide qué píxeles se vuelven transparentes. Los píxeles con alfa por debajo del umbral (de 0 a 255, 128 por defecto) se vuelven totalmente transparentes y el resto totalmente opacos, porque GIF no puede guardar nada intermedio. Los valores más altos recortan más ajustado alrededor del personaje.
¿APNG es mejor que GIF para una animación transparente?
Normalmente, sí. APNG admite alfa completo, así que los bordes y las sombras se mantienen suaves, y MDN indica compatibilidad en Chrome, Edge, Firefox, Opera y Safari. Usa GIF solo cuando el destino lo exija, como los emotes de Twitch o los clientes de correo antiguos.