Descripción general

Dada la diversidad de formatos de gráfico existentes, puede ser complicado decidir cómo exportar imágenes para utilizarlas en Edge Animate. Edge Animate admite imágenes con formato PNG, GIF, JPG y SVG. Aquí se explican los diferentes tipos de formato y cuándo utilizar cada uno de ellos.

Ejemplos de distintos formatos

JPEG

Las imágenes JPEG (o JPG) suelen ofrecer mejor compresión que las PNG y, por consiguiente, archivos de menor tamaño. Procure usar JPEG siempre que no se necesite transparencia (por ejemplo, en imágenes de fondo). En aproximadamente un 90% de los casos, se obtendrá un archivo más pequeño con JPEG y así se reducirá el tiempo de carga de las composiciones. La mayoría de herramientas de diseño ofrecen una opción de calidad de exportación JPEG que resulta útil para conseguir un equilibrio óptimo entre el tamaño de la imagen y la calidad. Cuanto más baja sea la calidad, menor será el tamaño (y viceversa). Los archivos JPEG se rasterizan y aparecen pixelados al aumentar la escala.

PNG

Los archivos PNG son los más adecuados cuando se necesitan imágenes con transparencia. El formato PNG también admite transparencia alfa, que es ideal para crear gráficos con colores traslúcidos. Los archivos PNG se rasterizan y aparecen pixelados al aumentar la escala.

Hay tres formatos principales de PNG.
(También hay archivos PNG animados que pueden resultar tan idóneos como un GIF, pero lamentablemente tienen restricciones de compatibilidad con navegadores.)

PNG-8

El formato PNG-8 tal y como se exporta desde Photoshop o Illustrator no admite transparencia alfa; esto hace que cada píxel sea transparente u opaco, por lo que se perciben curvas o bordes en diagonal dentados (como muestra el gráfico sobre estas líneas). Pero si un gráfico contiene líneas rectas y se necesita transparencia (por ejemplo, un cuadrado azul sobre un fondo transparente), PNG-8 es la opción indicada para obtener el mejor tamaño de archivo posible.

PNG-24

PNG-24 admite transparencia alfa, lo que significa que puede haber degradaciones translúcidas sutiles. Este es el formato más habitual en Edge Animate, ya que los archivos PNG transparentes permiten gráficos nítidos con transparencia disponible para la colocación de elementos en capas.

PNG-32

PNG-32 es similar a PNG-24, pero además tiene 8 bits de transparencia.

SVG

SVG conserva el contenido vectorial al exportar, por lo que los aumentos de escala no crean pixelización en el navegador. Actualmente Edge Animate trata los archivos SVG como imágenes acopladas de modo que, una vez que el contenido entra en Edge Animate, no se puede seguir editando (aunque siempre se puede actualizar y volver a guardar gráficos sobre la marcha en el programa de gráficos utilizado.) SVG solo debería usarse cuando sea necesario cambiar la escala de los gráficos debido a incrementos de tamaño de archivo. Por el momento se debería utilizar PNG en la Web, porque aún existen problemas de compatibilidad con navegadores.

Conviene tener en cuenta que al usar Illustrator para exportar archivos SVG, lo que se ve no es lo que se obtiene; Adobe Illustrator exportará capas y archivos ocultos que pueden aumentar drásticamente el tamaño de archivo. El tamaño del SVG también será el tamaño de la mesa de trabajo, por lo que es importante recortar esta para ajustarla al gráfico antes de guardar.

Hay varios formatos de SVG con distintas limitaciones. SVG 1.1 es el formato recomendado por el W3C.

GIF

Los archivos GIF son útiles para incluir animación en gráficos (por ejemplo, en un precargador). Aunque el formato GIF también admite transparencia, tiene las mismas limitaciones que PNG-8. Los archivos PNG tienden a tener una mejor compresión con mayor calidad que los GIF, por lo que solo se deberían utilizar GIF cuando sea necesario incluir animación en un gráfico.

Dimensiones de imagen

Independientemente del formato de archivo utilizado, debido a la naturaleza de la Web siempre puede haber problemas al usar gráficos en determinadas situaciones.

Gráficos para iOS

Actualmente, las imágenes en iOS se distorsionan y escalan cuando tienen un tamaño superior a 1024 x 1024 píxeles. Si necesita imágenes que aumentan estas dimensiones en iOS, pruebe a recortar la imagen en dos o más imágenes menores y júntelas mediante un símbolo o un grupo en Edge Animate.

Problemas conocidos con la animación de imágenes

En el momento de escribir esto, existen algunos problemas con ciertos estilos de animación debido a limitaciones de los navegadores.

  • Al animar un elemento en un periodo de tiempo largo en incrementos muy pequeños, es posible que la animación dé la sensación de oscilar. Esto puede ocurrir, por ejemplo, si se anima una imagen de 100% a 103% en 2 segundos. Para evitarlo, aumente la duración de la transición o el valor de esta.
  • En algunos navegadores puede haber problemas al animar imágenes muy grandes o al crear transiciones que modifican la escala de la imagen en gran medida.

Más información

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea