957 07 69 40
contacto@shivaweb.es

gif-o-mp4-cabecera

¿Qué es mejor, GIF o MP4? + Tutorial de uso

Jesús Chicano Ramírez 22 Marzo, 2017 tutorial

Si tienes dudas entre usar imágenes animadas en GIF o MP4, te resolveremos muchas dudas en esta entrada que aclara de una vez por todas quien es el verdadero ganador.

Para todos aquellos que nos dedicamos a crear contenidos, optimizar las páginas webs que regentamos o simplemente, darle un toque visual a nuestros argumentos. Se nos abrió todo un mundo con el uso de GIFs animados en lugar de la utilización de la imagen estática convencional (cosa que no se ha dejado de lado, pero que se ha puesto más de moda el uso de imágenes en movimiento).

Con el uso de archivos GIF nos ha llegado un inconveniente. Estos archivos no son más que un conjunto de imágenes secuenciadas y comprimidas en un único archivo que se reproduce en bucle (normalmente infinitamente) pero con un tamaño excesivo. Esto es muy perjudicial para el rendimiento de una web y ya sabemos que la velocidad de carga es un factor de posicionamiento.

Observemos esta comparativa entre dos archivos idénticos:

Esta es la imagen animada

Como vemos, uno es un archivo GIF y el otro es MP4. Con las mismas imágenes animadas y todo pero ¿qué ocurre?. El archivo GIF tiene un tamaño superior al MP4. Haced la prueba. Os desafío a que os bajéis una imagen animada en ambas versiones, os puedo asegurar que todos los que son MP4 van a ser más livianos.

Desde el punto de vista de programación o gestión de contenidos para un sitio web es obvio que escogeremos la imagen en MP4 antes que en GIF. Si nuestra página tarde demasiado y las imágenes son de los mayores problemas; siempre vamos a optar por la versión más ligera para acelerar nuestra web. No queremos que nuestros lectores se aburran y abandonen desesperados por tanto rato de espera.

¿Tienes ya claro qué es mejor GIF o MP4? Clic para tuitear

Son muchos los directorios de imágenes animadas que podemos encontrar por Internet, y en la mayoría, ya se puede descargar ambos tipos de archivos.

Uno de los más relevantes está siendo GIPHY donde sí encontramos en las opciones de descarga por ambos tipos.

Aunque si queremos fabricar nuestro propio gif animado también existe el sitio GIFMaker.me donde podemos seleccionar un conjunto de imágenes para subirlas y automáticamente se nos genere un archivo GIF, MP3video, MP4…

Pero lo mejor de todo esto es que son directorios, ¿qué quiero decir con esto?. Que en realidad no nos hace falta ponernos a descargar toneladas de imágenes animadas/inanimadas para ponerlas en nuestra web. ¿Por qué no cogemos el enlace al gif y lo agregamos sin más? Estaríamos ahorrando espacio y la velocidad de carga será superior.

Te muestro cómo en este tutorial

Vais a ver este ejemplo con un gif animado de GYPHY, el mismo que he puesto antes. Cuando entramos en el gif escogido, vemos un panel a la derecha que nos da la opción de copiar el link.

copiar-link-gif-desde-giphy

De todas las opciones que nos dan, vamos a escoger la que se indica como HTML5 video. El vídeo en HTML5 utiliza sobre todo vídeos en formato MP4. Lo copiamos y podemos pegarlo en nuestra web.

link-en-html5-de-giphy

Pero ojo, como ya habéis visto antes, es un vídeo y las páginas tienen que entenderlo como un vídeo con la etiqueta <video>, al igual que si fuera una imagen solo podemos ponerla si es con la etiqueta <img>.

Explícame esto…

Lo primero que tenemos que meter en nuestro texto es la etiqueta de video con una serie de atributos. Estos atributos configuran la opción de que se auto-reproduzca el archivo, lo pongamos en bucle, le quitemos el sonido, añadamos alguna clase o le pongamos tamaños. Pero sobre todo tenemos que poner el atributo src que contendrá el enlace que copiamos anteriormente.

Pero ¿qué pasa si nuestra página está bajo un gestor de contenidos como puede ser WordPress?. Pues debemos cambiar la etiqueta de video por la de <iframe>

Este sería un ejemplo de código para incrustar el GIF de Michael Jackson en la web:

<iframe src="https://giphy.com/gifs/lGkUyj3IrEcvu/html5" width="640" height="320" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Conclusiones

El uso de GIFs animados ha aumentado un 700% para darle vida a las imágenes. Como idea de márketing se podría implementar en alguna estrategia para ganar más seguidores o lectores jugando un poco con la ilusión de hacer entrener al público. Lo que equivale a una mayor asiduidad y más visitas de calidad.

Hemos visto también quien es el ganador en esta competición. Como base tomamos el mejorar el rendimiento de nuestro sitio web para no ralentizar la carga del sitio. Así que, cuando pensemos ¿qué es mejor GIF o MP4?, tenemos como mejor postor al video MP4.

Y si con nuestro tutorial no ha sido suficiente, estamos abiertos a mostrároslo en algún video tutorial para que os sea un poco más claro. ¿Alguna sugerencia?.

Desarrollador web full-satck & CEO de ShivaWeb. Mi pasión ha sido el desarrollo desde siempre, así como darle a todo un toque de perfección a lo visual y lo funcional.

¿Te ha servido? Danos tu opinión

Tu email no se mostrará


Conócenos


Apúntate a nuestro newsletter

Y recibe de forma automática nuestro ebook para mejorar la presencia de tu marca en la red.


Descarga nuestro catálogo


Twitter


Facebook


Menú