WPO para ficheros GIF’s

Últimamente estoy agregando muchas animaciones para ayudar a la comprensión de mis artículos. Y a simple vista parecen GIF’s de toda la vida, pero déjenme decirles que no todo es lo que parece.

A raíz de un mensaje en Twitter decidí escribir este artículo, ya que por todos los medios posibles debemos evitar el uso de GIF’s en nuestras entradas. Ya explicaré por qué.

¿Y qué usamos entonces?

En su lugar vamos a utilizar vídeos que se reproduzcan automáticamente en bucle. Sí, has leído bien, vídeos. Vamos a ver cómo con la etiqueta video de HTML5 y un par de atributos podemos simular el comportamiento de un GIF:

<video autoplay muted loop playsinline>
  	<source src="video.mp4" type="video/mp4">
  	<source src="video.ogg" type="video/ogg">
	Your browser does not support the video tag.
</video>
  • autoplay: permitirá que el vídeo se reproduzca automáticamente ni bien cargue la página (los navegadores Chrome lo cargarán en diferido).
  • muted: Chrome no reproduce automáticamente los vídeos a menos que indiquemos que lo haga sin sonido.
  • loop: este es el simple atributo que permite reproducir el vídeo en bucle dando la sensación que es un GIF clásico de toda la vida.
  • playsinline: atributo necesario para que el video pueda reproducirse automáticamente en dispositivos iOS.

Insertar un vídeo en WordPress

El nuevo editor Gutenberg nos permite agregar y configurar el vídeo con para que se comporte como un GIF, solo debes seguir los siguientes pasos:

  1. Añade un nuevo bloque Gutenberg a tu entrada del tipo Vídeo.
  2. Selecciona el vídeo de la Librería de Medios o bien carga el fichero.
  3. Activa los atributos de Reproducción automática, Repetir y Silenciado.
  4. Mantén desactivada la opción Controles de reproducción.

¿Por qué no debemos usar GIF’s?

Básicamente porque el algoritmo de compresión de la tecnología GIF es muy pobre, resultando en ficheros demasiados pesados.

En su lugar los ficheros de vídeos, en sus múltiples formatos, pueden devolvernos la misma información con igual o mejor calidad pero con un tamaño muchísimo menor. Sí, este es otro punto a agregar en vuestra lista de técnicas de WPO.

Veamos un simple ejemplo de dos ficheros con la misma animación y las siguientes características:

  • Dimensión: 270px x 266px
  • Duración: 4.1s
  • FPS (Frames Por Segundo): 15
Fichero GIFFichero de vídeo MP4
Tamaño de fichero: 183Kb 👎🏻Tamaño de fichero: 21Kb 👍🏻

Vemos como con este simple ejemplo el fichero de vídeo llega a pesar un 88,5% menos que su respectivo en el formato GIF.

Herramientas para crear GIF’s y Vídeos

Para crear todas las animaciones que uso en mi blog utilizo la herramienta GIPHY Capture. Es muy fácil de utilizar ya que nos superpone una ventana en nuestro escritorio «para capturar» los movimientos que realicemos y nos permite editar y exportar la animación tanto en GIF (por favor no lo hagáis), en vídeo (👍🏻) o bien subirlos a sus propios servidores.

Una vez capturada la animación la aplicación presenta un panel donde podemos configurar los parámetros para renderizar un fichero final de calidad y de bajo peso.

Editor nativo de la aplicación GIPHY Capture

Hala señores, ya tenéis todo lo necesario para crear vuestros propios memes de gatitos optimizados. Voy a revisar vuestro código fuente para asegurarme que son vídeos y no GIF’s 😝.

Happy coding! ❤️


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (2 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


4 thoughts on “WPO para ficheros GIF’s”

  1. Hola Mauricio, acabo de terminar el artículo y me impactó la reducción de tamaño del video con respecto a su versión en GIF. Así que me dispuse a echarle un vistazo a GIPHY Capture, pero lamentablemente parece que solo está para Mac (y yo uso Windows).

    ¿Conoces alguna herramienta compatible con Windows que permita comprimir las capturas en video tanto como GIPHY?

  2. ¡Buenas Mauricio! Curiosamente, en el ejemplo del gif frente al vídeo, el gif se me reproduce pero el vídeo no (estoy desde Chrome). Entonces, creo que la mejor solución sería utilizar gifs sin excedernos y solo si es estrictamente necesario.

    La solución que le doy es utilizar una de las miles de herramientas de compresión online, como por ejemplo esta: https://www.iloveimg.com/es/comprimir-imagen/comprimir-gif

    De esa forma, el gif solo pesa poco más de 2 veces que el vídeo (unos 54kb) y tendrás la seguridad de que se vea en cualquier navegador. ¡Un saludo!

    1. El error fue mío en especificar mal la dirección del vídeo. Ya debería estar resuelto.
      Con respecto a utilizar GIF’s con esa herramienta, al fin y al cabo todo siempre depende del caso. Una opción es más óptima aunque lleva más trabajo a la hora de escribir un artículo, la otra es más simple sacrificando algo más de peso en el fichero.
      ¡Un abrazo Pablo!
      Mauricio

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *