Publicar GIFs animados en WordPress no tiene mucho misterio si publicas alguno muy de vez en cuando. El problema es cuando publicas varios en un mismo artículo. Un GIF animado, como un vídeo, es una sucesión de imágenes por tanto suelen pesar bastante.
Muchos GIFs animados en una página harán que el peso y velocidad de tu página se vean terriblemente afectados, un problema para tu posicionamiento y sobre todo para la experiencia de usuario.
Imagina una página con 15 GIFs animados de 2MB cada uno a la que se accede desde un móvil. Vamos a ver cómo controlar y reducir esa carga a demanda.
Solución Lazy Load
Una solución sería utilizar algún sistema de Lazy Load, esto hace que tus imágenes no se carguen hasta que estén visibles en el navegador. Mejoras el tiempo de carga, la velocidad y el rendimiento de tu sitio aunque afectará al posicionamiento de tus imágenes. Puedes implementarlo a mano o con algún plugin como BJ Lazy Load que además funciona también con iframes, muy útil si publicas muchos vídeos de YouTube o Vimeo.
Solución sólo GIF animados
Si no te gusta el sistema Lazy Load y sólo quieres mejorar el rendimiento y velocidad de páginas que contengan GIF animados puedes usar una de estos 2 plugins gratuitos
GIF Animation Preview | Demo
Añadirá una vista previa del primer frame de cada GIF animado de todo tu sitio, en entradas antiguas, sin necesidad de editarlas. Todos los GIFs animados que hayas publicado, hasta los de una fuente externa no se cargarán hasta que el usuario pasa el ratón por encima.
WP GIF Player | Demo
Lo mismo que el anterior pero con un control manual de a qué GIF animados va a afectar. Este plugin creará una imagen previa de cada GIF animado y añadirá un botón para reproducirlo o pararlo. Sólo se reproducirá un GIF animado. Igual que el anterior. Para usarlo se añadirá un botón para añadir los GIF animados al lado de «Añadir multimedia» en tu editor.
Si subes el GIF animado desde el botón «Añadir multimedia» no surtirá efecto, de esta forma mantienes el control por si por ejemplo sólo vas a publicar 1 GIF animado de poco peso.
Optimizar GIF animados
El último consejo es optimizar los GIF animados, como cualquier imagen, hacer que pesen lo menos posible sin que pierdan calidad. Obviamente lo ideal es tener un sitio responsive y mostrar distintos tamaños de imagen según el tamaño del navegador, además de optimizar esas imágenes, manualmente, con un servicio online o con algún plugin como EWWW Image Optimizer. Este plugin reducirá el peso del GIF animado aunque si quisieras editarlo tendrías que usar gifsicle.
Bonus: si queréis crear vuestro propio GIF animado fácilmente capturando algo de vuestra pantalla, este es un buen software, también gratuito LICEcap
Y para el final un gran GIF animado del gran post recopilatorio de mi amigo David. Ideal para la web que estoy a punto de presentaros El Final de películas, series y libros
Un artículo muy interesante. Gracias!
Estoy pensando en po er en mi blog, pero es un recurso con el que no estoy familiarizada. Tendré en cuenta que pesan, tampoco es cuestión de que el post tarde mucho en cargar y se vayan antes de leer1
Gracias por la ifnormación. Llevo varios días buscando alguna solución, porque había intentado con el HTML code, pero cuando publicaba aparecía como un link.
¡Gracias!