Ú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:
- Añade un nuevo bloque Gutenberg a tu entrada del tipo
Vídeo. - Selecciona el vídeo de la Librería de Medios o bien carga el fichero.
- Activa los atributos de
Reproducción automática,RepetirySilenciado. - 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 GIF | Fichero 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.
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! ❤️
