Moz

Cómo optimizar tu sitio web al usar imágenes GIF

Feb 8, Posted by in Imágenes, SEO

Esta publicación es creación del autor y no necesariamente refleja el punto de vista de Altura Interactive. Puede tener ciertos cambios en la traducción para hacerlo más alcanzable al mercado hispano.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Pin It Share 0 Filament.io 0 Flares ×

como mejorar el rendimiento de tu sitio al usar gifs

Read the original post in the Moz blog.

El formato GIF (Graphics Interchange Format) fue desarrollado originalmente en 1987. Creados por Steve Wilhite de Compuserve, los GIFs mejoraron las imágenes en blanco y negro durante ese tiempo, permitiendo el uso de 256 colores y manteniendo un formato comprimido que podría ser cargado por aquellos que utilizaban módems lentos. Además, los desarrolladores y diseñadores web pueden crear animaciones a través de retrasos temporales. Y hasta el día de hoy, poco ha cambiado con respecto a los GIF.

Debido a su simplicidad, el amplio soporte para este formato, y la facilidad con la que se puede utilizar para transmitir clips de video, el formato GIF es el archivo más antiguo que todavía se utiliza. Esta función de animación de fotogramas de GIF asegura que el formato sigue siendo popular, a pesar del incremente de imágenes JPEG y PNG.

gif mundo

A pesar de su popularidad y ubicuidad en Internet (especialmente en lo que respecta a los GIFs animados), los GIFs no son las opciones de imagen más eficientes. Si estás utilizando GIFs en tus sitios, es importante que tengas cuidado de optimizarlos para que no generen demasiada sobrecarga.

Este artículo te dirá la forma de optimizar tus GIFs, tanto estáticos como animados, y te dará una excelente alternativa para eliminar el peso de la página resultante del uso de GIFs animados.

¿Por qué debes optimizar tu imágenes GIF?

El rendimiento es importante cuando se trata de diseñar tus páginas web y los GIFs no son las opciones de imagen más eficaces. Si bien, son excelentes para capturar la atención del usuario y son universalmente apreciados para proporcionar breves ráfagas de información de una manera entretenida, pero los GIFs no fueron diseñados para la animación (a pesar de que se utilizan comúnmente para tal). Como tal, el uso de GIFs conduce a páginas pesadas y experiencias de usuario pobres, resultantes de páginas lentas.

Cómo mejorar el rendimiento de tu sitio al utilizar GIFs

En esta sección, cubriremos varias maneras de mejorar el rendimiento de tu sitio con respecto al uso de GIFs. Primero, buscaremos formas de optimizar los GIFs estáticos y terminaremos discutiendo las formas de minimizar la sobrecarga resultante de los GIF animados.

Existen dos métodos para comprimir imágenes GIF:

Uno de los principales métodos para optimizar GIFs es comprimirlos. Hay dos métodos de compresión que se utilizan comúnmente:

  • Compresión con pérdida: la compresión con pérdida elimina algunos de los datos del archivo original, lo que resulta en una imagen con un tamaño de archivo reducido. Sin embargo, cada vez que se guarda el archivo después de la compresión, la calidad del gráfico se degrada un poco, lo que puede resultar en una imagen borrosa y pixelada con el tiempo.
  • Compresión sin pérdidas: la compresión sin pérdidas conserva todos los datos del archivo original, lo que significa que el archivo comprimido se puede descomprimir para obtener el archivo original. Mientras que el tamaño del archivo sigue siendo mayor que si se hubiera utilizado la compresión con pérdidas, la calidad de tu imagen no se degrada con el tiempo.

Más adelante en este post, cubriremos el impacto de ambos tipos de optimización en GIFs.

Mejora el rendimiento de los sitios que utilizan GIFs estáticos convirtiéndolos a PNG

La forma más sencilla de mejorar el rendimiento de tu sitio es convertir tu imagen utilizando el formato PNG en lugar del formato GIF. Mientras que los dos formatos son muy similares en términos de ser buenas opciones para mostrar gráficos simples, los archivos PNG tienen la ventaja de poder comprimir a un tamaño 5-25% más pequeño que el archivo GIF equivalente. Los GIFs fueron creados originalmente para utilizar una técnica de compresión sin pérdidas llamada el Lempel-Ziv-Welch (LZW) algoritmo, que se definió en la década de 1970. Sin embargo, las técnicas de compresión modernas son mucho más eficaces que LZW y puedes aprovechar esto, empleando formatos que utilizan estas técnicas, como PNG.

Estas conversiones de formato de archivo son bastante fáciles de hacer, y hay muchas opciones de software que puedes elegir, incluyendo utilidades basadas en web gratuitas como las de Pic.io y Convertio.

Mejora el rendimiento de los sitios que utilizan GIFs animados de dos maneras:

Los GIFs animados, aunque son muy populares, pueden ser archivos enormes que requieren largos tiempos de carga. Por ejemplo, un GIF de unos segundos de largo puede tener varios megabytes de tamaño. Para mejorar el rendimiento de tu sitio, utiliza una de las siguientes técnicas:

  • Optimización con pérdidas
  • Convertir tu GIF animado en un video HTML5

Optimización con pérdidas en GIF animados

Debido a que la gran mayoría de los datos que componen GIF animados son datos gráficos y porque las optimizaciones sin pérdidas no pueden modificar los datos gráficos, sólo tienes una opción viable cuando se trata de optimizar un GIF animado más allá del mínimo: técnicas de optimización con pérdidas.

Las optimizaciones con pérdidas funcionan porque el ojo humano no hace un trabajo muy bueno al distinguir entre cambios de color sutiles. Por ejemplo, una imagen puede contener miles de tonos de un color, con un píxel que parece sólo un poco diferente de los que están al lado. Debido a que tu ojo no será capaz de diferenciar entre los dos tonos, el archivo de imagen se puede manipular fácilmente: uno de los colores sustituye al otro, lo que hace al archivo más pequeño.

Debido a que los GIF animados son esencialmente una serie de GIFs individuales, puedes utilizar estas técnicas para disminuir el tamaño de tu archivo animado. Haciendo cada archivo individual más pequeño, tu archivo total se hace más pequeño también. Una forma de hacerlo es utilizando una suite de software simple que puede realizar automáticamente tales compresiones (como gifsicle).

Convertir GIF animados en videos HTML5

Si bien puedes reducir al mínimo el tamaño de un GIF animado, pero puedes terminar con un archivo más grande de lo que necesitas. Los GIFs nunca fueron diseñados para almacenar video, y lo que ahora se considera animación es realmente el resultado de un intento de reducir la sobrecarga en el almacenamiento y la transmisión de múltiples imágenes que comparten metadatos idénticos. Hoy en día, sin embargo, existe otra opción que potencialmente podría hacer que tus GIFs sean hasta un 95% más pequeños: convertir tus GIFs animados a videos HTML5.

El video HTML5 es un término general para la capacidad de un navegador web moderno de reproducir contenido de video usando la etiqueta <video> sin necesidad de usar complementos externos. Cuando esta característica fue lanzada por primera vez en 2009, había un montón de debate sobre cómo se almacenarían tales videos y cómo se codificarían. Hoy en día, sin embargo, el estándar aceptado es un video codificado en H.264 almacenado en un archivo contenedor de MP4 (al que, por motivos de simplicidad, nos referiremos como un video MP4 de aquí en adelante). Además de verse mucho mejor debido a estar diseñado para transmitir video, los archivos MP4 son mucho más pequeños:

cómo optimizar gifs

Más del 90% de los navegadores web modernos soportan videos MP4.

Hay muchas maneras de convertir GIFs animados a MP4, como la popular línea de comandos de la herramienta de código abierto ffmpeg y la utilidad basada en la web Cloud Covert. Con el uso de este último se puede ver el ahorro de tamaño del archivo al hacer la conversión.

Este es el GIF animado original:

gif original sin optimizar

Este es el video MP4 creado del GIF:

Observando el tamaño de los archivos, vemos que el original era 100 KB. Al convertir el GIF a MP4, terminamos con un archivo de sólo 23 KB, es decir un 75% más pequeño:

tamaño de gifs optimizados

Conclusión

GIF es el formato más antiguo que todavía se utiliza comúnmente en la actualidad debido a su simplicidad, su soporte casi universal, y la capacidad de ser utilizado como animación. A pesar de estos aspectos positivos, los GIFs tienden a ser archivos de gran tamaño, lo que resulta en una página pesada que puede afectar negativamente el rendimiento y dar lugar a malas experiencias de usuario. Como tal, debes considerar una optimización seria de los GIFs estáticos, alejarte de los GIFs animados e implementar videoclips utilizando técnicas modernas como los videos HTML5/MP4. Y para información adicional sobre la implementación de estos cambios, descarga el ebook gratis de Rigor, El libro del GIF: Una guía completa sobre la optimización de GIFs.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Pin It Share 0 Filament.io 0 Flares ×

Acerca de Moz
Moz es la mayor comunidad de inbound marketing con más de un millón de usuarios de todo el mundo y son pioneros en la creación de herramientas de marketing digital. Fue fundada por Rand Fishkin y Gillian Muessig en 2004.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Pin It Share 0 Filament.io 0 Flares ×
Contáctanos
contact