Tercer capítulo de la serie “Reducir el tiempo de carga Web” con el que pretendemos mostrar el camino de cara a mejorar la velocidad de carga de nuestras web, reduciendo así el tiempo de espera del usuario que tanto valor tiene a día de hoy. En esta ocasión revisaremos la forma en la que podremos optimizar nuestras imágenes en formato .GIF… ¡No os lo perdáis!

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

Este tutorial forma parte de una serie

¿Por qué optimizar las imágenes?

Como habíamos visto en el primer capítulo sobre minimizar las peticiones HTTP, estábamos intentando reducir el número de peticiones HTTP combinando todas nuestras imágenes en una única imagen. Reduciendo el número de imágenes estamos reduciendo también el número de peticiones HTTP.

Una vez tenemos claro el formato de imagen que nos conviene es importante optimizar cada una de nuestras imágenes para reducir su tiempo de carga lo máximo posible.

Ahora que tenemos un menor número de imágenes a cargar, necesitamos reducir el tamaño de estos archivos en disco, reduciendo así el tiempo de carga de nuestra web.

En este artículo trataremos de conocer la forma en la que podemos reducir el peso de las imágenes .GIF.

Convirtiendo las imágenes GIF en PNG

¿Cuál es la mejor forma de optimizar y reducir el tamaño de nuestras imágenes GIF? Convirtiéndolas a formato PNG.

Si echamos un vistazo a la 2ª parte de la serie de tutoriales de optimización “Seleccionando el Formato de Imagen” hemos concluído que no deberíamos usar el formato GIF a no ser que estemos mostrando imágenes animadas (GIF) o fotos (JPG).

En la mayoría de los casos convertir una imagen GIF a PNG reducirá el tamaño, pero no siempre, trata de revisar siempre ambas opciones.

A continuación veremos cómo convertir las imágenes GIF a PNG mediante el uso de la librería ImageMagick.

Cómo convertir de GIF a PNG mediante ImageMagick

La herramienta ImageMagick nos permite crear, editar y componer mapas de imágenes, por tanto podremos convertir nuestras imágenes GIF a PNG sin problemas.

Mediante el comando convert podremos lograr la conversión de forma rápida y sencilla:

convert imagen_original.gif imagen_final.png

De esta forma ImageMagick aplicará las opciones recomendadas en la conversión a PNG, pero podemos por ejemplo forzar la conversión a PNG8 si lo deseamos:

convert imagen_original.gif PNG8:imagen_final.png

¿Sencillo verdad? Pero como todo lo podremos complicar todo lo que queramos, así que no dudéis en echarle un vistazo al resto de opciones que nos proporciona ImageMagick, entre otras cosas también podremos:

  • Transformaciones tales como reescalar, rotar, cortar o voltear una imagen.
  • Aplicar efectos como desenfoque, afilado de vértices, umbrales, tintado…
  • Animaciones, pudiendo crear secuencias GIF tomando varias imágenes.
  • Eliminar información “oculta” de las imágenes tales como fecha de creación, comentarios…
  • Dibujar sobre un lienzo y combinarlo con la imagen original.

ImageMagick es empleada en multitud de proyectos de gran envergadura tales como Facebook, que no dudan en hacer uso de la misma para optimizar sus imágenes.

Veamos ahora cómo optimizar las imágenes .GIF que son usadas para animaciones.

Optimizando nuestras animaciones en formato GIF

Hace ya algún tiempo las animaciones GIF se empleaban contginuamente para mejorar la experiencia del usuario, haciendo los sitios web mucho más “dínamicos, accesibles y ricos” (nótense las comillas), usados en barras de navegación, cabeceras, etc…

Actualmente las animaciones GIF son empleadas en la mayoría de las ocasiones para mostrar estados de carga cuando utilizamos AJAX.

Las animaciones GIF son una serie de fotogramas mostrados uno tras otro, por tanto podremos reducir nuestras animaciones suprimiendo aquellos fotogramas que no cambien durante la animación.

¿Cómo logramos esta optimización? Pues mediante otra herramienta muy útil y gratuíta llamada GIFsicle. Como siempre un ejemplo vale más que mil palabras:

gifsicle -O2 imagen_original.gif > imagen_final.gif  

¿Por qué no estamos convirtiendo las animaciones GIF a formato PNG para reducir el tamaño del archivo? Porque no podemos. Recordad que las imágenes GIF son especialmente recomendadas para animaciones, los formatos JPG y PNG simplemente no pueden mostrar animaciones.

Reflexión final

Una vez más vemos que con un poco de investigación, uso de las herramientas apropiadas y sentido común podemos conseguir optimizar nuestros sitios web de manera relativamente sencilla.

Si bien el tutorial no ha sido el más extenso escrito hasta la fecha, hemos tocado dos importantes herramientas como son ImageMagick y GIFslice, las cuales podréis utilizar en multitud de ocasiones, descubriendo nuevos usos a los tratados en este artículo.

En el siguiente capítulo veremos cómo optimizar las imágenes en formato JPEG… ¡no os lo perdáis!

¡Nos vemos en la próxima publicación!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (5 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Cabe mencionar que ahora, es posible utilizar imagenes .PNG animadas ;) ,aunque solo es soportada por navegadores perrones.

La muerte del Gif esta cerca.

@elporfirio a qué te refieres con navegadores perrones?

Hombre, el gif siempre ha estado ahí. Decir la muerte del gif es como afirmar la muerte de IE. Cosa poco probable.
´
Muy buenos consejos para reducir los tiempos de carga.

Un saludo

Rocio Michael 777

Hola yo necesito saber como poner una imagen gift en mi muro de facebook,ya intente de todoy nada la imagen queda estatica…pero tengo contactos de facebook que tienen estas imagenes gif y se mueven como lo hacen?ya les pregunte y nadie lo quiere decir..hace 4 hs que intento y nada…estoy agotada alguien me puede ayudar?gracias

diego

amigo como añades o subes una imagen gif al facebook llevo días y no puedo :(
te cuento que cuando subes una imagen gif quedan estatica :/