Using animated .gifs

false

Using animated .gifs

Last updated March 03, 2026 21:28

Hold visitors' attention with looped animations that play automatically.

A .gif (Graphics Interchange Format) is an image type that supports short animations. Animated .gifs play automatically, don't include sound, and usually loop.

You can search Google Images and sites like giphy.com to find .gif images, or create your own with third-party software. When you have a .gif file, you can upload it anywhere on your site that supports images.

Here's an example of an animated .gif:

A short video automatically plays and loops continuously without sound.

Adding a .gif

You can upload a .gif anywhere on your site where you can add images, including:

The .gif will have the same options that a static image would have. For example, if your site's banner images support overlay text, the text can display over a .gif banner.

Note: If you edit a .gif with the built-in image editor, or add image effects, it will convert the .gif to a static .jpg file.

Best practices

Keep the size small

Large .gifs can slow down your site. We recommend formatting animated .gifs to be the size you want it to display on your site. Follow our images best practices to ensure your .gifs meet our file size guidelines.

Even if your .gif is below our file size limit, the number of individual frames may prevent it from uploading. You can try to compress your file using third-party image tools. This is outside the scope of Squarespace support. If the quality is poor after compressing your .gif, turn your .gif into a video and add the video to your site.

Avoid distracting imagery

While .gifs can be a great way to grab attention or add dynamic motion, their movement can also be distracting. Avoid using them:

  • In places where you want visitors to really focus on your text or other content.
  • Multiple times in a single area, as the amount of motion could be jarring.

Tip: To learn about making your .gifs more accessible, visit Making audio, images, and videos more accessible.

Check compression settings to avoid distortion or weird colors

If your .gif looks distorted, especially in areas with a color gradient or shadows, it's likely due to compression. A .gif file can only contain 256 colors per frame, so image editing tools use a process called dithering to reduce the number of colors when creating a .gif.

Adjusting the quality of an image is outside the scope of Squarespace support. Try adjusting your image editing tool's compression or dithering settings, using a higher quality source for the .gif, or reviewing help documentation for the tool you're using.

Creating animated buttons

Clickthrough URLs turn images into links to other pages on your site, external pages, or files. These links are available in image blocks, gallery blocks, and some gallery pages.

Tip: Logos have a built-in clickthrough that takes you to your homepage.

Here's one method for creating an animated button:

  1. Add a Poster image block to an area that supports blocks, such as a layout page.
  2. Upload your .gif in the Content tab.
  3. In the Design tab, add your link in the Clickthrough URL field. If you're linking to a page on your site, create a Content link.
  4. Use the Poster image block's title or subtitle to add text.
  5. Style the image block and add other blocks to resize it.

An animated button placed on a website page that has a moving background behind text that says Click Here.

Using a video URL instead of a .gif

You can create a similar effect to an animated .gif by adding a video background to a page section, banner, or cover page.

  • Like .gifs, video backgrounds play automatically, loop, and don't include sound
  • Instead of using a .gif file, you'll link to a video URL, such as a YouTube video
  • Video banners are only supported in some version 7.0 templates, but video backgrounds for page sections are supported in all version 7.1 sites, and video backgrounds for cover pages are supported in all version 7.0 templates

To learn more, visit Adding a background video.

Was this article helpful?

Yes No

165 out of 344 found this helpful

Yes No

Using animated .gifs