How to create, optimize and embed an animated GIF in WordPress with Gutenberg

In this tutorial, I'm going to show you how to create, optimize and embed an animated GIF on your self-hosted WordPress blog using the Gutenberg editor.

This will be particularly useful for anyone looking to use animated screencast GIFs for a tutorial post.

Step 1: Create your GIF

There are many apps for Mac and Windows that enable you to create screencast GIFs. For MAC, I recommend the free version of GIFOX. For Windows, try Recordit.

Screen Shot 2019-03-28 at 16.02.50

I'm a Mac user so I'll show you Gifox. After you download and install the app, you'll see a fox icon in your top menu bar. Click on it and select the settings icon. Make sure you assign an output directory so you can easily access your GIF recordings. You can also change the frame rate too if you want. Next, click on the fox icon again and this time choose the “area recording” icon on the left. You can also use the following shortcut = Command + Shift + 5.

Record your screencast. Note, for animated GIFs the shorter the screencast the better. Aim for less than 20 seconds. Ideally 5-10 seconds.

Step 2: Optimize your GIF

Go to Compressor.io and upload your newly created GIF. You should see a screen showing you how much your GIF has been reduced in file size.

Diff

This step is crucial if you are going to host the animated GIFs on your own WordPress installation. Getting the file size down to a minimum will help with the load time of your posts.

Once you've compressed your GIF, download the new version.

Step 3: Upload to WordPress and insert in your blog post

The final step is simple. Create a new blog post. Add an image block in your Gutenberg editor and select your compressed GIF. You should see some settings for your image block in the right hand sidebar that look like this.

Make sure you choose “Full Size” for the image size option otherwise the animation on your gif won't display and you'll only see a still image.

Save the post and voila! You should see an animated GIF like this one below:

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like