APNG: qué es y cómo se crean PNG animados

Cuando queremos dar un valor añadido a una página web o a nuestras apo­r­ta­cio­nes en chats y redes sociales, solemos buscar GIF. No importa en qué pla­ta­fo­r­ma: las se­cue­n­cias y clips ul­tra­co­r­tos en formato GIF (Graphics In­te­r­cha­n­ge Format) ya co­n­s­ti­tu­yen una gran parte del total del contenido visual animado que hoy circula en la web y cuentan con un nutrido número de usuarios. Esto también los convierte en in­s­tru­me­n­tos muy valorados para los re­s­po­n­sa­bles de marketing. Y lo cierto es que GIF no es el único formato que permite ensamblar varias imágenes en un solo archivo. Los de­sa­rro­lla­do­res de APNG (Animated Portable Network Graphics), también llamados Animated PNG, prometen, por ejemplo, no solo opciones similares de animación, sino incluso una mayor calidad de las se­cue­n­cias.

¿Qué ocultan las siglas de APNG?

Ya en 2004, los de­sa­rro­lla­do­res de Mozilla Stuart Parmenter y Vladimir Vukicevic pu­bli­ca­ron una primera es­pe­ci­fi­ca­ción del formato APNG que permitía guardar elementos animados de páginas web como un throbber (un gráfico, que muestra la ejecución de una acción). Pre­via­me­n­te, Mozilla había in­te­rru­m­pi­do el soporte a las ani­ma­cio­nes MNG (Multiple-Image Network Graphics) uti­li­za­das hasta entonces para este tipo de co­m­po­ne­n­tes, aunque estaban vi­n­cu­la­das a una bi­blio­te­ca de de­co­di­fi­ca­do­res demasiado grande. El de­co­di­fi­ca­dor de APNG, heredado en su mayor parte del formato PNG, que le sirvió de modelo y prestó su nombre, es en co­m­pa­ra­ción mucho más pequeño. A pesar del so­bre­no­m­bre de PNG animados, APNG se rechazó en 2007 como extensión oficial de aquél, en especial porque una gran parte de los re­s­po­n­sa­bles veían a PNG como un formato in­de­pe­n­die­n­te.

Cómo se es­tru­c­tu­ra el formato APNG

Aun sin ser una extensión oficial de PNG, APNG es re­tro­co­m­pa­ti­ble con este formato. Un programa-apli­ca­ción que soporte PNG sigue siendo capaz de re­pro­du­cir un archivo APNG, aunque solo mostrará una imagen y no la animación completa.

Desde el punto de vista técnico, el flujo de datos de APNG no se di­fe­re­n­cia del flujo de datos estándar de PNG, cuya es­tru­c­tu­ra puede co­n­su­l­tar­se en la es­pe­ci­fi­ca­ción oficial del formato de imagen. Pero el formato APNG comprende aún tres tipos más de bloques de in­fo­r­ma­ción (chunks) que describen la animación y proponen otros datos tipo:

• Animation Control Chunk (acTL): este bloque informa al ana­li­za­dor de que se trata de un PNG animado. Indica el número de cuadros de los que se compone la animación y describe con qué fre­cue­n­cia se ha de re­pro­du­cir antes de parar.
• Frame Control Chunk (fcTL): este bloque precede a cada cuadro que compone la animación y contiene una serie de datos, en el que destaca la duración de la ejecución de cada cuadro.
• Frame Data Chunk (fdAT): los bloques de datos del cuadro equivalen es­tru­c­tu­ra­l­me­n­te a los bloques de datos de imagen de PNG (IDAT) aunque aquí están ide­n­ti­fi­ca­dos además por un número de secuencia. Estos números preceden al bloque fcTL, de modo que cada cuadro se coloca en la posición correcta cada vez.

APNG vs. GIF: las ventajas del formato animado

Si echamos un vistazo a las ca­ra­c­te­rí­s­ti­cas del formato nativo de Mozilla, queda claro que APNG re­pre­se­n­ta una potente al­te­r­na­ti­va al GIF. APNG soporta una pro­fu­n­di­dad cromática de hasta 24 bits y más de 16 millones de colores. El formato GIF, al soportar 8 bits, está limitado a 256 colores. Conviene no olvidar que una mayor calidad de las imágenes va ligada siempre a un tamaño de archivo mayor, aunque dado que APNG suele tener un tamaño reducido de archivo y ha de­mo­s­tra­do comprimir mejor que GIF; puede sacarse provecho de la calidad de imagen.

El PNG animado, además, no solo soporta la tra­n­s­pa­re­n­cia total, sino también la parcial (en capas), lo cual facilita la in­te­gra­ción de las ani­ma­cio­nes en el diseño pree­xi­s­te­n­te en la web. Las ani­ma­cio­nes en GIF solo prestan soporte a la tra­n­s­pa­re­n­cia simple, lo que puede ocasionar que alrededor del gráfico se creen bordes poco estéticos (allí donde entra en contacto con el fondo).

En cuanto al soporte de na­ve­ga­do­res, APNG cuenta frente a GIF con algunas de­s­ve­n­ta­jas y con margen de mejora, aunque el formato no se duerme en los laureles: mientras que Firefox, como solución nativa de Mozilla, fue durante mucho tiempo el único navegador que podía re­pro­du­cir co­rre­c­ta­me­n­te los gráficos animados, hoy también pueden hacerlo Chrome, Safari (en las versiones de es­cri­to­rio y móvil) y Opera (solo es­cri­to­rio). Otros na­ve­ga­do­res, como Internet Explorer o su sucesor Microsoft Edge, siguen sin poder re­pro­du­cir ani­ma­cio­nes PNG. El servicio web “Can I Use” ofrece una extensa enu­me­ra­ción de los na­ve­ga­do­res con o sin soporte de APNG.

Crear un PNG animado: dos he­rra­mie­n­tas

Para poder crear tus propios APNG necesitas en primer lugar un software que sea capaz de unir varios archivos PNG en un único archivo APNG o convertir archivos en otros formatos a PNG y animated PNG. En lo que concierne a estas funciones y como suele ser habitual, puedes de­ca­n­tar­te por un programa de es­cri­to­rio o por una apli­ca­ción web. Te pre­se­n­ta­mos a co­n­ti­nua­ción una solución para cada opción con APNG Assembler y el Animated PNG Maker de ezgif.com.

APNG Assembler: cómo crear ani­ma­cio­nes APNG con la he­rra­mie­n­ta open source

La he­rra­mie­n­ta de línea de comandos APNG Assembler, con licencia MIT y zlib, puede uti­li­zar­se en todas las pla­ta­fo­r­mas co­rrie­n­tes. Los usuarios de Windows tienen la ventaja de contar incluso con una interfaz de usuario gráfica que puede de­s­ca­r­gar­se gra­tui­ta­me­n­te de la página oficial del proyecto. Si te inclinas por esta opción, la he­rra­mie­n­ta se inicia haciendo doble clic en el archivo apngasm_gui.

Para comenzar a crear tus propios APNG, necesitas tener material visual di­s­po­ni­ble en formato PNG, porque la he­rra­mie­n­ta no contiene funciones para convertir imágenes, ani­ma­cio­nes o vídeos a otros formatos como JPEG, GIF o MPEG. Una vez tengas las imágenes pre­pa­ra­das, arrá­s­tra­las a “Input Files”:

Una vez añadidas todas las imágenes en formato PNG que han de componer la animación, puedes es­pe­ci­fi­car su co­n­fi­gu­ra­ción con estas opciones:

• Playback Settings: en las opciones de re­pro­du­c­ción, se configura con qué fre­cue­n­cia se ha de repetir la animación (por defecto o sin límites). Para in­tro­du­cir un valor solo tienes que eliminar la marca en “Play in­de­fi­ni­te­ly”. También puedes se­le­c­cio­nar la opción “Skip the first frame”, si quieres que la animación se salte la ejecución del primer cuadro.
• Co­m­pre­s­sion Settings: con zlib, 7zip y Zopfli, APNG Assembler pone a di­s­po­si­ción tres al­go­ri­t­mos di­fe­re­n­tes de co­m­pre­sión que puedes se­le­c­cio­nar aquí, donde además puedes activar o des­ac­ti­var la op­ti­mi­za­ción de paletas cro­má­ti­cas y tipos de color.
• Delays – All Frames/Selected Frames: aquí se configura un margen de tiempo entre las imágenes de la animación. Puedes fijar una co­n­fi­gu­ra­ción estándar para todos los cuadros o definirlo de forma in­di­vi­dual.

Cuando has acabado, crea tu primer archivo APNG pulsando en “Make Animated PNG”. Podrás ver el resultado final con cualquier programa de re­pro­du­c­ción co­m­pa­ti­ble con el formato, por ejemplo, con tu navegador:

Crea tu APNG con la he­rra­mie­n­ta web PNG Maker de ezgif.com

El Animated PNG Maker de ezgif.com se basa en parte en la línea de comandos y he­rra­mie­n­ta de es­cri­to­rio APNG Assembler. Por este motivo, su mecánica es muy parecida, aunque en este caso no lo puedes iniciar di­re­c­ta­me­n­te, sino que tienes que abrirlo en el navegador. Primero tendrás que cargar los archivos de imagen, pero con esta he­rra­mie­n­ta no estás limitado al formato PNG, puesto que la pla­ta­fo­r­ma permite im­ple­me­n­tar también imágenes en formato JPG, WebP o GIF. Solo tienes que clicar en “Choose File”, se­le­c­cio­nar los archivos y pulsar en “Upload!”.

Con ayuda de las opciones de co­n­fi­gu­ra­ción que conocemos del APNG Assembler (delay, opciones de re­pro­du­c­ción y co­m­pre­sión) se definen los ajustes básicos de la animación. Pulsando en “Make APNG!” das inicio a la creación de tu APNG, que podrás guardar lo­ca­l­me­n­te.

Convierte vídeos y ani­ma­cio­nes GIF a APNG con el co­n­ve­r­ti­dor ezgif.com

No siempre es posible componer una animación con varios archivos de imagen. Con fre­cue­n­cia se trata de convertir un pequeño videoclip en una animación. Para esto, ezgif.com propone la he­rra­mie­n­ta “Video to APNG”, que permite subir archivos de vídeo de hasta 120 megabytes y co­n­ve­r­ti­r­los en una animación. Soporta, entre otros, a los formatos MP4, WEbM, AVI, MPEG, FLV, MOV y 3GP.

Con “GIF to APNG”, la página web también contiene un co­n­ve­r­ti­dor de GIF a PNG animados. Con él puedes guardar en tu disco duro GIF de hasta 35 megabytes en formato APNG y convertir GIF de pla­ta­fo­r­mas externas como Giphy solo in­tro­du­cie­n­do su URL en la barra “OR paste image url” y pinchando en “Upload!”. Una vez cargado el material, en ambas he­rra­mie­n­tas se da inicio al proceso de co­n­ve­r­sión haciendo clic en “Convert to APNG!”. Antes de esto puedes ajustar y optimizar el original mo­di­fi­ca­n­do la velocidad de la ejecución, añadiendo texto o efectos o aplicando otros pro­ce­di­mie­n­tos de co­m­pre­sión, entre otras cosas.

APNG: una co­m­pe­te­n­te al­te­r­na­ti­va a GIF de la casa Mozilla

Las ventajas de Animated Portable Network Graphics frente al formato GIF son numerosas. Entre otras cosas, da como resultado ani­ma­cio­nes de una calidad mayor y un tamaño de archivo más reducido gracias a al­go­ri­t­mos de co­m­pre­sión mucho más efectivos. El que, pese a todo, se utilice menos es co­n­se­cue­n­cia de la falta de soporte por parte de los programas-apli­ca­ción. No solo carece de soporte en algunos na­ve­ga­do­res, sino también en apli­ca­cio­nes de co­mu­ni­ca­ción y redes sociales, donde la uti­li­za­ción de ani­ma­cio­nes desempeña un papel crucial.