Los Gif molan. Alguien dijo que una imagen vale más que mil palabras, pues hoy nos ponemos el traje de gurú y decimos que un gif vale más que 10.000 palabras, y si es de gatitos un número aún mayor.
Bromas a parte, utilizar gifs en tu estrategia de contenidos es una buena idea, porque sirven para romper la monotonía tras un montón de párrafos donde cuentas tu película.
Hay veces que es más fácil transmitir una idea o sensación con un gif que con varios párrafos Sin embargo, los gifs son más pesados que el peor de tus amigos, y esto puede afectar al rendimiento de tu web.
En este post MÁGICO te vamos a contar cómo comprimir un gif, hacer que pese menos y que lo puedas utilizar a lo largo y ancho de tu web. ¡Empezamos 👇!
¿Por qué debería comprimir un gif?
Básicamente porque son muy pesados. Los gif son un formato de imagen muy antiguo que siguen siendo utilizados a día de hoy. A pesar de esto, nunca se tuvo en cuenta su peso y hoy en día cualquier gif pesa demasiado, haciendo que aumente el tiempo de carga de tu web.
➡️ Aquí puedes leer más sobre el mejor formato de imágenes para tu web
Para que te hagas una idea, a lo largo de este post vamos a ver diferentes ejemplos de compresión y reducción de peso de un gif.
Caso práctico: Compresión y reducción de peso de un gif
Vamos a seleccionar 3 gif y a analizar su peso. Veremos diferentes métodos de optimización y el resultado que obtenemos con herramientas de compresión de gifs y otras soluciones con el objetivo de reducir su tamaño.
Paras evitar que puedas preparar un café mientras carga este post, te vamos a poner los gif ya optimizados. Hemos seleccionados gifs de peso medio sin optimizar.
Para que te hagas una idea, un gif con poca calidad y poca animación suele pesar menos de 1 mb mientras que un gif complejo más largo puede pasar de 6 mb sin problemas
➡️ GIF 1 El lobo de Wall Street.
Este simpático Gif pesa 1,99MB tiene unas dimensiones de 268×240.
➡️ GIF 2 Homer Simpson
El bueno de Homer come bastante y se nota. Este gif pesa 1,46 MB con unas dimensiones de 480×354.
➡️ GIF de la reina de Inglaterra
La reina madre nos saluda con su peso de 1,33mb y sus dimensiones de 500×281.
Una vez elegidos diferentes gif con diferentes calidades, pesos y resoluciones, vamos a revisar que opciones tenemos para añadirlos a cualquier página web y averiguar cómo afecta a su peso.
Opción 1: No comprimimos los gifs.
Si decidimos no hacer nada, nuestra página va a pesar como poco 4,77mb. Si le añadimos la imagen de portada y el resto de cosas que necesita para funcionar, sería raro que no pasásemos de 6mb, lo cual sería excesivo.
Por ejemplo, nuestra página de inicio pesa 1.3mb y aunque es fea y sencilla carga muy rápido.
Opción 2 Comprimimos el GIF con una herramienta de compresión.
Existen diferentes herramientas que nos permiten reducir el peso de un gof online. Solo tendremos que seleccionar la imagen, subirla a la web y descargar su versión comprimida.
Para ello nos gusta recurrir a la web https://ezgif.com/ qué es una de las más completas para reducir el peso de un gif de manera sencilla.
Tiene diferentes opciones, lo que la diferencia de la mayoría de este tipo de páginas.
Nosotros recomendamos un nivel de compresión de 50, ya que por encima se suele perder mucha calidad en comparación con la reducción del peso.
Estos han sido los resultados
➡️ GIF 1 El lobo de Wall Street. 1,6mb. Ahora la imagen pesa un 19,81% menos.
➡️ GIF 2 Homer Simpson 1,18mb. Tras usar la herramienta para comprimir gifs, se redujo su peso en un 19,74%. Para que sea fácil comparar, si en este caso hubiésemos hecho una compresión del 200 en lugar de 50, el peso de este gif sería de 0,91mb. La calidad se reduce bastante en este caso si aplicamos ese 200.
➡️ GIF de la reina de Inglaterra Ahora pesa 1mb, lo que supone una reducción del peso del gif de un 24,86%.
En general, gracias a la compresión, pasamos de un peso de 4,77mb a 3,78. Hemos conseguido reducir en 1mb el peso total. ¿Será la mejor opción? lo vemos a continuación 👍.
Opción 3 Incrustar el gif desde la url original.
En este caso, decidimos que en lugar de alojar los gifs en nuestro servidor y con el objetivo de ahorrarnos el proceso de compresión, vamos a incrustar cada gif.
En principio, ahora la página no tendría ni un mb extra de peso. Pero al estar cada gif alojado en el servidor de un tercero, tendremos que valorar cuanto tiempo tarda en cargarse correctamente en nuestra web.
Además corremos el riesgo de que si se borra el lugar donde se ha publicado, aparezca un error y se quede en blanco.
Para poder valorarlo, hemos analizado una a una las peticiones que genera cada sitio donde está alojado cada gif. Hemos publicado los gifs en una entrada de prueba, le hemos pasado Pingdom Tools a esa url para detectar cada gif, y éstos son los resultados.
Tiempo de carga del GIF 1: 1,11 segundos.
Tiempo de carga del GIF 2: 0,35 segundos
Tiempo de carga del GIF 3: 0,39 segundos.
Utilizando éste método en el que ni reducimos ni comprimimos los archivos gif, tardamos casi 2 segundos en recibir esos gifs de esos dominios externos a la vez que realizamos 3 peticiones externas.
Si a eso le sumanos el tiempo de carga normal de la página, pasamos de 3 segundos ampliamente.
Debemos tener en cuenta que si alguno de esos dominios es muy lento, nos penalizará todavía más el rendimiento.
Opción 4 convertir el gif a mp4 para reducir su peso.
Esta opción no la conocíamos y dimos con ella cuando nos planteábamos los pros y contras de usar gifs en nuestro contenido. No queríamos que reducir el peso en exceso del gif, los dejase con mala calidad, pero tampoco nos interesaba asumir el incremento de la velocidad de carga.
¿Cómo lo solucionamos?
Gracias a la página https://onlineconvertfree.com/es/ podemos convertir un gif a formato mp4 para posteriormente subirlo a nuestra web sin perder su calidad y conseguir reducir de manera sustancial su peso.
Aquí puedes ver como funciona:
y cómo conseguimos bajar el peso de la reina hasta que el gif pesaba 153k.
Estos han sido los resultados:
➡️ GIF 1 El lobo de Wall Street. Pasamos de 1,99mb a 219 kb
➡️ GIF 2 Homer Simpson 1,46mb a 197 kb
➡️ GIF de la reina de Inglaterra 1,33mb a 153 kb
Cómo insertar gifs en Mp4.
A la hora de insertar un gif convertido a mp4, tenemos que seguir un breve proceso para que nadie note la diferencia.
En nuestro caso usamos elementor, pero la mayoría de opciones de wordpress te vas a permitir hacer lo mismo
¡Sigue estos pasos!
- Subimos el vídeo en mp4 a nuestra web.
- Insertamos un vídeo con elementor
- En el panel de opciones de elementor marcamos los siguiente: autoreproducir (para que empiece solo). Reproducir en el móvil (para que también actúe igual en móviles) Bucle (para que se repita una y otra vez) y controles del reproductor (en ocultar, para que no salga la opción de darle al play o pausa).
Una vez seguidos estos pasos nadie notará que no es un gif sino un vídeo 😎
Opción 5 comprimir gif con Adobe Photoshop
Como tenemos los conocimientos justos de Adobe Photoshop, le hemos pedido a un conocido que nos intente reducir el peso de nuestros gif empleando menos de media hora.
El mismo nos ha comentado que empleando más tiempo y analizando frames y capas, podría reducir el peso del gif animado aún más, pero consideramos que emplear más tiempo no sería útil.
Aún así, ha hecho un gran trabajo y éstos son sus resultados (manteniendo las mismas dimensiones y con una calidad un pelín menor a la original).
➡️ GIF 1 El lobo de Wall Street. Pasamos de 1,99mb a 923kb
➡️ GIF 2 Homer Simpson 1,46mb a 658 kb
➡️ GIF de la reina de Inglaterra 1,33mb a 575kb
Como puedes ver, esta opción también reduce bastante el peso, pero no llega a igualar a cambiar el formato de archivo.
Comparación de resultados
Aunque seguro que te has dado cuenta nada más empezar el post, hemos optado por elegir la opción de pasar nuestros GIFs a MP4. En la siguiente tabla puede ver el resumen con el paseo de los gif y en ahorro generado en cada caso.
Lógicamente, no podemos comparar la compresión de archivos gif con el incrustarlos desde una web de terceros, pero aún así, ahí tienes los datos.
| Opción | Gif 1 | Ahorro 1 | Gif 2 | Ahorro 2 | Gif 3 | Ahorro 3 | Ahorro total |
|---|---|---|---|---|---|---|---|
| No hacer nada | 1,99mb | - | 1,46mb | - | 1,33mb | - | - |
| Compresión online | 1,6mb | 16,60% | 1,18mb | 19% | 1mb | 24% | 1 mb |
| Compresión manual | 923kb | 53,61% | 658kb | 54,94% | 575kb | 56,84% | 2,6 mb |
| Pasar a mp4 | 219kb | 88% | 197kb | 86,5% | 153kb | 88,49% | 4,21 mb |
Una vez publicado el post, lo hemos vuelto a pasar para comprobar la velocidad de carga y el peso que tiene. Para incluir varios gifs e imágenes no esta mal 😘
Esperamos que este post haya sido de tu agrado y que hayasvisto suficiente infrmación para decidir la mejor manera para reducir el peso de los gifs y poder utilizarlos en tus contenidos.
