Seguramente más de una vez habrás tenido que crear un gif animado transparente. El resultado es muchas veces desastroso, porque los bordes suelen pixelarse incluso a máxima resolución.
Existe desde hace tiempo una solución, aunque todavía no está muy implantada por culpa de las incompatibilidades con navegadores, el png animado.
El formato de archivo APNG es muy superior en todos los aspectos al gif animado. Soporta imágenes 24 bits y más de 16 millones de colores, mientras que el formato GIF, al soportar 8 bits, está limitado a 256 colores. La diferencia pues es enorme.
Además, el PNG animado, no sólo soporta la transparencia total, sino también la parcial (por capas).
DIFERENCIAS EN VELOCIDAD fps
Otra gran diferencia, es que mientras la velocidad máxima en un gif animado es de 10 frames por segundo, en un APNG, la velocidad es ilimitada. He creado esta animación básica, en los dos formatos, a la izquierda el APNG a 20 frames por segundo y a la derecha el gif animado a su máxima velocidad, 10 fps. La diferencia es notable.
DIFERENCIAS DE CALIDAD
Veamos qué sucede cuando le pedimos algo más a la animación, y metemos por ejemplo en lugar de un color plano, un degradado. A la izquierda el APNG y a la derecha el Gif Animado. Como podéis apreciar, al meter transparencia, el gif animado pierde mucha calidad y se pixela.
COMPATIBILIDAD CON NAVEGADORES
La duda principal es saber ¿qué navegadores soportan un png animado?. Firefox fue el primero en soportar este formato, pero hoy en día también es compatible con Chrome, Safari y Opera. Una vez más el problema nos lo encontramos con Internet Explorer o Microsoft Edge, que no reproducen este formato. ¿Para cuándo unos estándares de compatibilidad entre navegadores?. En estos casos la única solución que se me ocurre sería meter una imagen alternativa (gif animado) para cuando detectemos este tipo de navegador. Tenéis todas las compatibilidades en Can I use.
¿Solución?, detectar con una función el navegador y mostrar una imagen alternativa para aquellos que no son compatibles.
HERRAMIENTAS GRATUITAS PARA CREAR UN PNG’s ANIMADOS
Si utilizas Photoshop, puedes utilizar el plugin apngasm.
Tienes varias herramientas gratuitas:
Así que esperemos que algún día los navegadores dejen de ir cada uno por su lado y confluyan en unos estándares que nos permitan no volvernos locos a la hora de diseñar y maquetar.
