Cómo usar .gifs animados

Mantén la atención de los visitantes con animaciones en bucle que se reproducen automáticamente.

Última actualización: 21 de mayo de 2024

Un .gif (formato de intercambio de gráficos) es un tipo de imagen que admite animaciones cortas. Los .gifs animados se reproducen automáticamente, no incluyen sonido y, por lo general, se repiten.

En Google Imágenes y sitios como giphy.com puedes encontrar imágenes .gif, o crear las propias con software de terceros. Cuando tengas un archivo .gif, puedes cargarlo en cualquier lugar de tu sitio que admita imágenes.

Este es un ejemplo de un .gif animado:

gif-example.gif

Cómo agregar un archivo .gif

Puedes subir un .gif en cualquier lugar de tu sitio donde puedas agregar imágenes, tales como:

El .gif tendrá las mismas opciones que una imagen estática. Por ejemplo, si las imágenes de banner de tu sitio admiten texto superpuesto, este puede mostrarse sobre un banner .gif.

Nota

Si editas un .gif con el editor de imágenes incorporado, o agregas efectos de imagen, convertirás el .gif en un archivo .jpg estático.

Buenas prácticas

El tamaño debe ser pequeño

Los .gif grandes pueden ralentizar tu sitio. Recomendamos dar formato a .gif animados para que tengan el tamaño que quieres que se muestre en tu sitio. Sigue nuestras prácticas recomendadas para las imágenes para asegurarte de que tus .gif cumplan con nuestras pautas de tamaño de archivos.

Incluso si tu .gif está por debajo de nuestro límite de tamaño, el número de cuadros individuales puede impedir que se cargue. Puedes intentar comprimir el archivo usando herramientas de imagen de terceros. Esto está fuera del alcance del soporte de Squarespace. Si la calidad es deficiente después de comprimir el .gif, convierte el archivo en un video y agrega este video a tu sitio.

Evita imágenes que distraen

Si bien los .gif pueden ser una excelente manera de llamar la atención o agregar movimiento dinámico, esto también puede distraer. Evita usarlos:

  • En secciones donde quieres que los visitantes se centren realmente en el texto u otro contenido.
  • Varias veces en una sola sección, ya que tanto movimiento podría ser desagradable.

Consejo

Para aprender a hacer tus .gifsmás accesible, visita Hacer que el audio, las imágenes y los videos sean más accesibles.

Comprueba la configuración de compresión para evitar distorsiones o colores extraños

Si el archivo .gif se ve distorsionado, especialmente en áreas con degradado de color o sombras, es probable que se deba a la compresión. Un archivo .gif solo puede contener 256 colores por fotograma, por lo que las herramientas de edición de imágenes utilizan un proceso llamado tramado para reducir el número de colores al crear un .gif.

Ajustar la calidad de una imagen está fuera del alcance de Atención al Cliente de Squarespace. Intenta ajustar la configuración de compresión o tramado de la herramienta de edición de imágenes, utiliza una fuente de mayor calidad para el archivo .gif o revisa la documentación de ayuda de la herramienta que estás utilizando.

Cómo crear botones animados

Las URL clickthrough convierten las imágenes en enlaces a otras páginas del sitio, páginas externas o archivos. Estos enlaces están disponibles en bloques de imagen, bloques de galería y algunas páginas de galería.

Consejo

Los logotipos tienen una URL clickthrough integrada que te lleva a tu página de inicio.

A continuación, te presentamos un método para crear un botón animado:

  1. Agrega un bloque de imagen de póster a un área que admita bloques, como una página de diseño.
  2. Carga el .gif en la pestaña Contenido.
  3. En la pestaña Diseño, agrega el vínculo en el campo URL clickthrough. Si estás enlazando a una página de tu sitio web, crea un vínculo de contenido.
  4. Utiliza el título o subtítulo del bloque de imagen de póster para añadir texto.
  5. Modifica el estilo del bloque de imagen y agrega otros bloques para cambiar su tamaño.
gif-example4.gif

Cómo usar una URL de video en lugar de un .gif

Puedes crear un efecto similar al de un archivo .gif animado si agregas un fondo de video a una sección de página, banner o página de portada.

  • Al igual que los .gif, los fondos de video se reproducen automáticamente, se repiten y no incluyen sonido.
  • En lugar de utilizar un archivo .gif, debes enlazar a una URL de video, por ejemplo, a un video de YouTube
  • Los banners de video solo se admiten en algunas plantillas de la versión 7.0, pero los fondos de video para las secciones de página se admiten en todos los sitios de la versión 7.1, y los fondos de video para páginas de portada se admiten en todas las plantillas de la versión 7.0

Para obtener más información, visita Añadir un video de fondo.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.