GIFs (Graphic Interchange Format) are great. They usually illustrate a point better than any amount of still images would, require no user interaction (e.g.: no pressing the play button of a video) and are widely supported. Squarespace, however, is a little late to the party (in fact, it’s late to the party). You can add all sorts of “blocks” to a Squarespace page to add content but a GIF block isn’t part of the list. In the continuing quest to offer better content, I wanted to add GIFs (or at least explore the option) to the blogs. Fortunately, I have found a way to do so and I’d like to share it with you. We’ll accomplish it using Quicktime, Photoshop, Imgur and a Code block. Let’s go.

Step 01: Record the GIF

The first step is to actually record the media. There are diverse ways to achieve that but the simplest is, by far, to use Quicktime. It’s already on your Mac. To get started, open the application and press ⌃⌘N or....

Then, press the red recording icon and drag to set the frame’s bounding box. When you’re done recording, go to the menu bar and click on the stop icon. Finally, go to the red close button in the Quicktime playback window. The software will ask you if you want to save the work. Of course, you do. So,  set the desired saving settings and click Save.

Step 02: Photoshop

Now, I want to preface this paragraph by mentioning that Photoshop is, and by far, not the best software to accomplish the task but it does anything we need and does it easily. So, you’ll need to, of course, open the Quicktime movie file to start. Then, you can trim the start and ending of your video by simply taking the endings and gliding them. A preview of the frame you’re on shows up. When that’s done, you can adjust the length or speed of the clip. You need to understand that a GIF limits after 500 frame. Quicktime records at 60 frames per second, leaving us with 8 and a third seconds maximum possible content. To squeeze more time out of the clip (if you need to), right-click on the video layer and modify either the duration (will trim content off the ending) or speed.

After, you can save the file as it’s all we absolutely need to do. In order to save, head over to the Save for Web dialog box by smashing ⌥⌃⌘S on your keyboard. From there, I usually use the GIF 128 Dithered and change the colours to 256. A dithered GIF is one that has smoother gradient and a bigger file size. Be sure to specify whether you want the file to play forever or for a specific amount of time (up to 32) Then, just save the file.

Step 03: Imgur

For the Squarespace site to be able to play the file back, it needs to be hosted on a Internet-connected datacenter. Imgur is one of them. It provides free hosting without even having to get an account. So start by clicking the Upload images button and choose the file on your computer. Start uploading and, after it’s done, you’ll get to your GIF’s page. The secret link we need is the HTML link located at the middle right of the frame.

Step 04: Squarespace

Now, most of the work is done. Once a blog page is created, click on the line to add a block and choose the Code block. Remove the Hello, world! HTML code, Then, pasted the copied HTML code that you got from Imgur. After, save the block.

That should work A-okay. Now, if a reader clicks on the GIF inside your page, he’ll be taken to the Imgur page where the source file is located. I believe that it’s no biggie and that it’s just fair to give Imgur some credit for the free hosting.

Conclusion

So, folks, that was the most easy way to add a GIF to a Squarespace blog. We could go more advanced by, for example, using a dedicated screen recorder that allows you set the framerate, resulting in up to 2.5x longer possible GIFs (given you set it at 24fps). However, 8 and ⅓ seconds are likely more than enough for most needs. Using GIFs in blogs is an awesome way to add liveliness to your blog and up its quality.

What did you think of this blog post? Do you like Squarespace-related posts? Tell me below!

Cheers,

Tristan