¿Qué es un GIF?

Desde sus inicios como el primer formato de imagen a color hasta los gifs animados de hoy, descubre todo sobre qué son y cómo se utilizan.

¿Qué es un GIF?

Ya sea que digas "gif" o "yif", no se puede negar que este formato de archivo de imagen está en todas partes.

En los primeros días de internet, los gifs eran el formato de imagen estándar. Hoy en día, el png y el jpg son los tipos de archivo dominantes. Aunque ya no son el formato preferido para imágenes web debido a su menor calidad y falta de accesibilidad, los gifs siguen persistiendo.

Echemos un vistazo más de cerca.

El nacimiento del formato de archivo gif

En 1987, CompuServe era un importante proveedor de servicios de internet. Eran los tiempos de la conexión telefónica, donde las velocidades de transmisión de datos estaban limitadas por lo que las líneas telefónicas podían soportar. Internet era lento, pero no conocíamos nada mejor.

CompuServe quería ofrecer a sus clientes la capacidad de descargar fotos a todo color, pero con tamaños de archivo lo suficientemente pequeños como para no tardar horas.

El informático Steve Wilhite lideró un equipo en CompuServe para desarrollar un formato de archivo de imagen que ofreciera una paleta a todo color con tamaños de archivo más comprimidos.

Como resultado, desarrollaron el Graphics Interchange Format o gif, basado en el algoritmo LZW. La iteración original, también conocida como gif87a, ofrecía 8 bits por píxel y 256 colores indexados. La primera imagen a color que apareció en la web fue un avión pixelado volando sobre un fondo de nubes animadas. Se ve de baja calidad para los estándares actuales, pero en su momento fue una gran innovación.

La caída de los gifs

Los gifs fueron el estándar que los desarrolladores web utilizaban para imágenes estáticas, hasta que perdieron popularidad a mediados de los años 90.

En 1994, el titular de la patente del algoritmo LZW, Unisys, ya no estaba contento con que su tecnología se utilizara de forma gratuita. Unisys tomó la decisión comercial de cobrar tarifas de licencia a quienes usaran gifs en software y aplicaciones comerciales, y la gente no estaba nada contenta.

Las computadoras e internet también estaban mejorando. Cuando se lanzaron los gifs, sus colores basados en RGB de 24 bits eran la norma para la tecnología de la época. Pero con una paleta limitada de 256 colores, la falta de fondos transparentes y las representaciones pixeladas de imágenes complejas como las fotos, los gifs tenían sus limitaciones.

Un nuevo formato de archivo, el Portable Network Graphics o png, cobró protagonismo. Ofrecía compresión sin pérdida, mejores capacidades de color y era un formato abierto, sin titulares de derechos de autor que cobraran regalías.

El resurgimiento del gif

An image of Nyan Cat, a meme featuring a gray cat with a pop-tart body. A rainbow trail follows the cat.
Muchos de nuestros primeros recuerdos usando internet involucran a Nyan Cat. [Fuente: Know your meme]

Aunque ya no son adecuados para imágenes de alta resolución, los gifs ocupan un nicho importante en la comunicación web.

¿Esos memes de The Office que han sido tu forma principal de interactuar con tus colegas? Esos son gifs. Los stickers animados, que son otra forma de expresar emociones en plataformas de mensajería y redes sociales, también son gifs.

La lógica es: ¿por qué escribir un texto largo cuando puedes enviar un clip de video corto que comunica inmediatamente lo que sientes? Dilo con un gif y te entenderán al instante.

Cómo funcionan los gifs animados

Los gifs a menudo se crean tomando clips de video y comprimiéndolos en animaciones en bucle. Los gifs animados están hechos de fotogramas individuales, muy parecido al cine de la vieja escuela. Esta conversión de una animación o video en una sucesión de fotogramas sincronizados termina siendo de cinco a diez veces más grande que un archivo mp4.

Aunque pueden ser bastante pesados, los GIF animados se pueden utilizar en sitios web modernos de varias formas, entre ellas:

  • Vistas previas de archivos de vídeo
  • Grabaciones de pantalla
  • Fondos animados
  • Demostraciones de flujos de trabajo en aplicaciones
  • Animaciones de estado de carga
  • Gráficos retro con estilo

Los GIF y la accesibilidad

Aunque los GIF se usan mucho, no siempre son fáciles de usar. Las personas con discapacidad visual u otras dificultades pueden tener problemas al encontrarse con GIF animados en sus navegadores.

El primer problema es el bucle infinito. La regla general es que, después de cinco segundos, el clip debería dejar de reproducirse o los visitantes deberían tener la opción de detenerlo o pausarlo. Además, si un GIF animado tiene un parpadeo intenso o tipo estroboscópico, supone un gran riesgo para quienes padecen trastornos convulsivos. Se recomienda que las imágenes no parpadeen más de tres veces por segundo.

Nick Gard, ingeniero de software sénior en Webflow, nos dio estos consejos para usar GIF al crear en Webflow:

  • Los GIF deben ocultarse cuando los usuarios tengan activada la opción de "preferir movimiento reducido" en sus ajustes. Para esos usuarios, sustitúyelos por una imagen estática del propio GIF.
  • Incluye siempre texto alternativo, especialmente cuando el GIF contenga texto. Esto ayuda a que quienes usan lectores de pantalla entiendan qué representan o transmiten las imágenes. También ayudará con la optimización para motores de búsqueda.
  • Para gestionar todo esto, puedes usar el elemento <picture>:

<picture> <source srcset="moving.gif" media="(prefers-reduced-motion: no-preference)"> <img src="still.jpg" alt="texto que se aplicará a la imagen que se renderice" /></picture>






¿Han llegado los GIF para quedarse?

Aunque han aparecido formatos como WebM, MP4 y Theora, el GIF sigue siendo uno de los tipos de archivo más longevos que permiten animaciones en páginas web, redes sociales y aplicaciones de mensajería. Resulta sorprendente que un desarrollo tecnológico de 1987 se siga utilizando, pero aquí estamos.

Los GIF pueden tener su momento y lugar, pero su falta de accesibilidad para muchos grupos de personas, junto con su formato increíblemente pesado y poco eficiente, hace que ocupen un lugar bajo en nuestra lista al elegir un gráfico o imagen.

Si decides usar GIF, es importante seguir las pautas generales: detener el GIF después de cinco segundos o dar a los usuarios la opción de pausarlo, evitar imágenes que parpadeen más de tres veces por segundo y añadir siempre texto alternativo para que sean comprensibles para los lectores de pantalla.

Accesibilidad en Webflow

Descubre nuestro compromiso con la accesibilidad web y cómo puedes crear experiencias en línea más inclusivas.

→
↗
►
↓
←
↑
Leer ahora

Última actualización
August 18, 2022
Categoría

Artículos relacionados

PNG frente a JPG: ¿qué formato de imagen le va mejor a tu sitio web?
PNG frente a JPG: ¿qué formato de imagen le va mejor a tu sitio web?

PNG frente a JPG: ¿qué formato de imagen le va mejor a tu sitio web?

PNG frente a JPG: ¿qué formato de imagen le va mejor a tu sitio web?

Desarrollo
Por
Jeff Cardello
,
,
Leer artículo
Archivos SVG: Por qué elegir SVG en lugar de los formatos de imagen tradicionales
Archivos SVG: Por qué elegir SVG en lugar de los formatos de imagen tradicionales

Archivos SVG: Por qué elegir SVG en lugar de los formatos de imagen tradicionales

Archivos SVG: Por qué elegir SVG en lugar de los formatos de imagen tradicionales

Diseño
Por
Equipo de Webflow
,
,
Leer artículo
Los 9 mejores generadores de favicon
Los 9 mejores generadores de favicon

Los 9 mejores generadores de favicon

Los 9 mejores generadores de favicon

Diseño
Por
Jeff Cardello
,
,
Leer artículo
Favicons: Todo lo que necesitas saber en 2025
Favicons: Todo lo que necesitas saber en 2025

Favicons: Todo lo que necesitas saber en 2025

Favicons: Todo lo que necesitas saber en 2025

Diseño
Por
Jeff Cardello
,
,
Leer artículo
5 herramientas para que te luzcas regalando GIFs
5 herramientas para que te luzcas regalando GIFs

5 herramientas para que te luzcas regalando GIFs

5 herramientas para que te luzcas regalando GIFs

Desarrollo
Por
Mat Vogels
,
,
Leer artículo
¿Puedo usar WebP? Un formato hecho para la web
¿Puedo usar WebP? Un formato hecho para la web

¿Puedo usar WebP? Un formato hecho para la web

¿Puedo usar WebP? Un formato hecho para la web

Desarrollo
Por
Equipo de Webflow
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.