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:
Adding a .gif
You can upload a .gif anywhere on your site where you can add images, including:
- Cover Pages (version 7.0)
- Gallery Blocks (version 7.0)
- Gallery Pages (version 7.0)
- Gallery sections
- Image Blocks
- Indexes (version 7.0)
- Portfolio Pages and sub-pages
- Site background (version 7.0)
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, it will convert the .gif to a static .jpg file.
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.
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:
- Add a Poster Image Block to an area that supports blocks, such as a Layout Page.
- Upload your .gif in the Content tab.
- 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.
- Use the Poster Image Block's title or subtitle to add text.
- Style the Image Block and add other blocks to resize it.
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 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 backgrounds for Cover Pages are available in all templates. Video banners are only supported in some templates.
To learn more, visit Adding a background video.