Cómo añadir GIFs a una web WordPress



Actualizado el:

El uso de los GIFs vuelve a estar de moda. Aplicaciones como Twitter, WhatsApp y Telegram ya lo tienen directamente integrado, y su uso en blogs también ha sido una de las tendencias en los últimos años. Por ello te queremos explicar cómo usar correctamente los GIFs en WordPress y de paso aprovechamos para darte unos consejos sobre su utilización, cómo optimizarlos y algunos plugins para usarlos más fácilmente.

Pros y contras de usar GIFs en tu web

Ventajas

+ Si los usas correctamente, pueden aumentar el tiempo de permanencia de tus lectores en tu blog. Puedes echar un ojo al artículo en el que te damos unos consejos sobre cómo utilizar correctamente imágenes en tu web, que también puedes aplicar a los GIFs.

+ Son divertidos y empáticos, con ellos puedes llegar a conectar emocionalmente con tu lector, conseguir mayor fidelización y que tu artículo sea más compartido.

+ Puedes mostrar pequeños ejemplos o esquemas dinámicos sin la necesidad de crear un vídeo y con un peso menor.

Desventajas

– Usado en exceso puede abrumar a tu lector y ocasionar lo contrario a lo que estás buscando.

– Si utilizas varios en una misma página y no los optimizas correctamente, pueden hacer que tu web cargue más lenta. En este mismo artículo te vamos a explicar, cómo puedes reducir su peso para así, evitar lo máximo posible una carga lenta.

GIF de Weeg - Agencia de Diseño y Desarrollo Web

Cómo añadir GIFs en WordPress

Esto no tiene mucho misterio, pero si estas empezando en WordPress o no habías usado antes GIFs en tu web, es posible que te haya ocurrido que, al intentar poner el GIF en el contenido se quede como una imagen estática, sin movimiento. Te mostramos rápidamente cómo solucionar esto, tanto en vídeo, como por escrito.

 

Lo que ocurre es que, cuando subes una imagen a la biblioteca de medios, WordPress crea miniaturas de distintos tamaños para que puedas utilizar el recorte de la imagen que se ajuste mejor al hueco donde la quieres colocar y gracias a esta funcionalidad podrás tener más optimizada tu web.

El problema es que al subir un GIF, WordPress también crea recortes de diferentes tamaños:

Usar GIFs en WordPress

Aunque veamos que los archivos son “.gif” estas miniaturas son imágenes estáticas, ya que al realizar el recorte, WordPress solo captura la primera imagen del GIF. Como resultado tenemos un GIF con tan solo un fotograma, sin animación.

Como ya te estarás imaginando si añades el GIF a tu contenido y esta seleccionado como tamaño uno de los recortes, lo que tendrás es, una captura fija de tu GIF.

La solución es sencilla, lo único que tienes que hacer es seleccionar el tamaño completo de tu GIF al añadirlo, de este modo WordPress usará el archivo original y no uno de los recortes que ha creado:

Usar Gifs en WordPress

 

Es algo muy simple pero, cosas como esta, te pueden robar mucho tiempo y a volverte loco cuando estás comenzando con WordPress así que, esperamos haberte ahorrado tiempo y el disgusto de que te ocurra.

Cómo optimizar tus GIFs

Tener optimizada tu web lo máximo que puedas es algo muy importante, así podrás ganar velocidad de carga. Está comprobado que la mayoría de los visitantes que entren en tu página los perderás si tarda en cargar más de tres segundos. Además que los buscadores posicionan mejor webs que cargan más rápido.

Al igual que ocurre con las imágenes, a los GIFs también les podemos reducir el peso sin con ello perder calidad, nosotros hacemos lo siguiente:

Para el ejemplo usaremos el GIF de Weeg usado más arriba. El archivo original tiene un peso de 299 KB, para algunos esto puede parecer poco, pero tienes que tener en cuenta que no es lo único que se carga en tu web y que cuando empiezas a sumar, puedes llegar a unos cuantos MB. Cada cosa que puedas optimizar será un paso más a que tu web cargue en menos tiempo.

Ve a la herramienta online gratuita http://gifgifs.com/es/optimizer/

Usar GIFs en WordPress

  1. Lo primero que tienes que hacer es seleccionar el GIF que quieres optimizar. Al hacerlo te aparecerá una previsualización y algunos datos del archivo.
  2. Selecciona el tipo de optimización que más te interese, hay varias opciones: reducción de colores, eliminar frames y “Lossy GIF” para optimizar cada fotograma del GIF. Dependiendo de la que elijas puedes obtener más o menos reducción, pero ten en cuenta que, cuanto más peso le quites, menos calidad tendrá el GIF final. Te aconsejamos que juegues un poco y pruebes las distintas opciones y que elijas la que más te convenga para obtener un termino medio entre peso y calidad. En este ejemplo hemos dejado marcada la que viene por defecto “Lossy GIF level 30”.
  3. Presiona el botón “Optimize”. Cuando acabe te mostrará el GIF original y el optimizado, para que puedas comparar si ha tenido perdida de calidad, además te va a mostrar el antes y el después de su peso, colores y frames. Una vez que estes convencido del resultado, dale al enlace de “Download the result” para descargar tu GIF optimizado.

Ya ves lo fácil que ha sido, en este caso usando la optimización por defecto, de los 299 KB que pesaba el archivo original ha quedado en 132 KB. Aunque te parezca cosa de poco, la suma de esta optimización junto a otras que veremos en próximos artículos, podrás bajar incluso segundos en la carga de tu web.

Si necesitas optimizar varios GIFs y no tienes tiempo para ir uno a uno puedes usar la aplicación ImageOptim también gratuita pero no online. Hemos comprobado que reduce un poco menos el GIF, usando el mismo archivo del ejemplo anterior el resultado ha quedado en 158 KB. También es cierto que hemos usado la configuración que tiene por defecto, que es la que la aplicación recomienda para no tener perdidas de calidad.

Plugin para usar GIFs en WordPress fácilmente

Si eres un GIFadicto y los vas a usar con regularidad en tu WordPress, tal vez te interese más utilizar el servicio de Giphy. Giphy en resumen es, una plataforma que reúne los GIFs más populares de Internet y su plugin para WordPress te permite añadirlos fácilmente a tu contenido.

El plugin se llama Giphypress y es gratuito. Una vez que lo tengas instalado, aparecerá un nuevo botón en el editor de contenido de WordPress.

Usar GIFs en WordPress

Al pulsarlo te aparecerá una nueva ventana, en la que podrás ver los GIFs más recientes y justo debajo una barra de búsqueda para encontrar lo que necesites. Cuando selecciones el que quieres, se ampliará y dando en el botón de “Embed into post” se añadirá a tu contenido.

Esperamos que todo esto te sea de ayuda para añadir dinamismo a tu web, divertir y captar más la atención de tus lectores.

¿Te ha parecido interesante? ¡compártelo!

Deja un comentario

Suscríbete

¡Únete al corral de Weeg! Artículos sobre todo lo que rodea al mundo web y al amplio universo del diseño.

Weeg – Copyright © 2017