How to Add WordPress GIFs to Keep Readers Engaged

There are three ways of adding GIFs on WordPress

1. Loading GIF to WordPress Media Library (or directly from Gutenberg Editor)
2. Embedding GIF from another site (such as Giphy.com)
3. Using a GIF WordPress Plugin

As you will see all three are super-easy ways of adding WordPress GIFs, and no coding is needed.

I’ve been adding GIFs to my sites for some years now and I will show you my process to add GIFs correctly, so you avoid the mistakes I made in the past.

Here are the topics I will cover in this article:

• How to Load GIFs to your WordPress Media Library
• How to Embed a GIF from another Website
• Adding GIFs using WP Plugins
• How to Create a GIF for your Website 
• Why a GIF may not be working Properly
• Benefits and Downsides of Adding GIFs

And because this post is about graphics interchange formats, I will be going slightly crazy with my own animated GIFs to help with the description.

Let’s dive into it.

How to Add GIFs to WordPress – 3 Methods

In this section will be going over the three different ways you can add WordPress GIFs to your website.

Let’s start with my favorite one.

Load GIF to your WordPress Media Library

The best way to have full control of the animated GIFs on your website is to upload them to your WordPress Media Library.

To ensure that these work properly use the following process:

Step 1: Make sure that your GIF file size and duration is optimized.

Keep in mind that a GIF file size can be quite large, which will slow down your site and take up a lot of server space. So you don’t want it to be larger than necessary.

When creating a GIF, to ensure I generate the exact file size I need, I calculate beforehand the dimensions of the GIF I need on my website. So, for example, if I need a GIF of 500 pixels by 500 pixels for my site, I create it in these dimensions and not larger.

Furthermore, once the GIF is ready, I compress the file size by using a tool like Compressor.io. With this tool you just drag your GIF into the compressor.io box and it compresses the file. Make sure you choose the Lossy option, though, so that it does not affect the quality.

As a final tip; the duration of a GIF should not be longer than 10 seconds in my opinion, as otherwise you’re just creating a video. Remember, longer GIFs, mean larger file sizes.

Step 2: Upload the GIF in WordPress Media Library

There are 2 ways you can do this.

1. Uploading into the Media Files from the WordPress Dashboard, or
2. upload directly from the Gutenberg Post or Page editor.

To upload in your WP Media Library, first log into your WordPress dashboard, then go to Media section in the left-hand menu of your WP dashboard and click on ‘Add New’.

How to insert a GIF into a Blog Post

If you are uploading directly into the blog post or page editor, then you need to Go to the WP Page or Post where you will be including your GIF. Click on the + section where you want to insert the GIF and add an image block.

Remember that you can use a short cut by typing ‘/image’ or just click on the + sign and choose the image block option.

In the image box click on the ‘Upload’ button, or if you have already uploaded it in the Media Library just click on the ‘Media Library’ button.

Now select the GIF from the Media library and click on the ‘select’ button in the bottom right corner. The GIF should now appear within your content editor.

Step 3: Make sure GIF is set at Full Size

This is a very important step. For a GIF to work in WordPress (i.e., animation and continuous looping effect) it needs to be set as a ‘full size’.

To do this, click on the GIF image while you’re still on the Gutenberg Editor and go to the right-side options menu. Here you will find ‘Image Size’ drop down option.

Click on the drop-down bar and choose ‘Full Size’.

You might have to do this step when you upload a GIF because by default WP will resize the image to fit within the content.

If it’s not full-size, then the animation of the GIF will not work, and it will only show as a static image on your website.

Once you select the ‘full size’ option you should start seeing the GIF moving immediately, even in your content editor.

Step 4: Align and Resize Animated GIF on WordPress Editor

The final step is to edit the positioning and dimensions of the GIF.

If you click on the GIF within the WordPress post or page editor, you can align it to the left, to the right or in the center. You can also crop it, by clicking one of the sides of the image and dragging it to make it smaller or larger.

Feel free to write a short caption underneath the GIF if it makes sense.

Remember to Publish your post or page so that you can see the GIF on your live website.

Pros and Cons of Adding WordPress Gifs to Media Library

The main benefit of uploading GIFs directly to your media library is that you get full control of the GIF, since it is located within your WP media files.

If you are creating your own unique GIFs than this is the only way you can display them, unless you are sharing these GIFs also on other platforms, like Giphy.

The downside of this method is that you are uploading large files, which can slow down your website, and also take up server space in your hosting account.

Embed a GIF from another Website or GIF Repository Site

An alternative method you can use is to take a GIF from a GIF Repository Site, such as giphy.com or Gfycat.com, or from any other website, for that matter.

I will show you three simple ways of doing this.

It’s important to note that the following methods will not add the actual GIF file to your Media Library, but only links to the original source where the GIF is located. In other words, linking to the external website you got it from.

How to add a GIF using the ‘insert URL’ Method

If you are using a GIF taken from another site, you can add this directly by inputting the URL of that GIF page in the WP image block.

The initial process to insert the GIF will be the same as I showed you above, but instead of uploading the GIF to your image library, this time you will just insert a link to the web page where the GIF is located.

So, go to you page or post editor, click on the + sign where you want to insert the GIF, and choose the ‘Image’ block.

This time, instead of clicking ‘Upload’ or ‘Media Library’ options in the Image block, you will choose the ‘Insert from URL’ button.

You then input the URL of the GIF. Make sure that the URL is correct and leads to the exact GIF you want to display.

The way I like to do this is by right-clicking on the GIF image that I want from the external website and choose ‘Copy image address’ from the drop-down. I then paste it in my WP image URL field.

How to Copy and Paste GIFs in WordPress

If the GIF you want to use is live on the internet, you can right-click on it and copy the image. Then, you can paste it into the WP Gutenberg Editor for your post or page.

Not much to add here. I right-click on the GIF I want to copy. Choose the ‘copy image’ option. Then I go to my Page or Post editor, right-click in the spot I want to include the WordPress GIF and press ‘Paste’.

Embed a GIF using the iframe Code

Some GIF library websites, such as, Giphy.com will give you the option to copy the iframe code of every GIF they have on their site.

This will allow you to add GIFs to your site simply by embedding the iframe code in the WP content editor. Once the iframe is included in your editor, the GIF will instantly appear animated.

The iframe method does not host the GIF on your site. It acts like a link to another site, and so by inserting the iframe you are simply opening a window to content hosted on another website.

To copy the iframe from Giphy, just click on the GIF you want and then select ‘Embed’. You can then copy the iframe code that is displayed.

To insert an iframe in your Gutenberg content editor, you need to choose the ‘Custom HTML block’. Once this opens just paste the copied iframe.

You will see the GIF in action when you click ‘Publish’ or ‘Preview’.

Pros and Cons of Embedding Gifs from another Website

The main benefit of this method is that it is quick and easy to upload the GIF.

Another advantage is that you won’t be hosting the GIF on your website’s folders, so it won’t take up server space.

On the other hand, the fact that you don’t have it uploaded on your website means that you don’t have full control of the GIF. So, if changes are made in the source site, like if the GIF is taken down or replaced, then the GIF on your site will not show up in the content.  

Anther downside of copying GIFs form other sites is the legal risk. You must be careful with digital copywrite rules when using third party GIFs on your site.

There’s also the downside of not having unique GIFs on your site. GIFs copied from third party sites are already available on the internet, which means that plenty of other websites could already be using them.

Using a WordPress GIF Plugin

Now this is my least favorite method simply because I like to keep as few plugins as possible on my WordPress site, for site speed and site security reasons.

However, since this is one of the options, I want to mention it, for the sake of completeness.

To be fair, GIF WordPress plugins do provide some ease of use and added functionality to your GIF game.

For those of you who are still green to WordPress, you can easily add a plugin by going to your WP dashboard, clicking on Plugins in the left-side menu and ‘Add New’.

Here are 4 popular WordPress plugins for GIFs:

GIF Master Plugin: this plugin allows you to easily embed free GIFs from Giphy and Tenor.

So basically, you won’t have to open the sites where the GIF library is located. Instead, the plugin adds a ‘GIF’ button in your WP editor, which, when clicked will open a pop-up where you can search all the GIFs directly from there.

In other words, it allows you to search for free GIFs directly from your WP editor.

EmbedPress: just like the previous one, this plugin allows you to embed content from other websites directly from your own WP editor.

The additional benefit of this plugin is that apart from GIFs it also allows you to embed other types of media files, such as videos, images, audio files, or maps. Whatever is available from its repository of over 100 websites.

Giphypress: Another simple embed option. This plugin is the official plugin for Giphy.com. Which means you get a Giphy Logo Button in your WP content editor.

When you click on this logo button, you can search through Giphy’s thousands of GIFs and select the one you want. The GIF will automatically be inserted into your WP site.

Needless to say, this plugin only gives you access to Giphy’s media library.

Hyena – Animated GIF WordPress Plugin. Unlike the previous 3 plugins, Hyena is a Paid Plugin. It does, however offer much more functionality than the others.

With Hyena you can actually create GIFs directly from your WP dashboard and not just copy them from other sites. The plugin provides different layouts and skins to create your own unique GIFs.

Pros and Cons of using Plugins to add WordPress GIFs

The benefit of these plugins is that it makes life easier since you can search or create GIFs without leaving your WordPress editor.

The downside, as I mentioned is the added vulnerability you are exposing your site to with more plugins, which, let’s face it, you could easily live without.

How to Make a GIF for your Website

If you want your GIF to be distinctive and relevant to your article, then sometimes you will need to create a GIF from scratch.

It’s not a very complicated process. In this next section I will show you a quick and easy way how to create a GIF.

Convert Video to GIF

This method involves making a GIF from a video. This can be a video you took with your mobile phone, camera or, as in my case, from a screen recording I made on my desktop.

The tool I use for this is Canva. The best part is that you can create GIFs using the free version of Canva.

Step 1: Log into your Canva dashboard and click on the ‘Create Design’ button at the top-right of your screen.

Step 2: Choose the size you want your GIF to be. If you know the exact dimensions you can click on the ‘Custom Size’ option at the bottom of the drop-down menu in Canva.

If you’re not sure, you can click on one of the default size templates, such as ‘Instagram Post’ for a square shape or ‘Presentation’ for a rectangular shape.

If you hover your mouse over the options, you will see the exact size in pixels.

Once you click on your choice you will be taken to a blank canvas.

Step 3: In the next step you will need to upload your video. Don’t worry if it’s too long. You will be able to crop it from within Canva itself.

Click on the ‘Uploads’ option in the left column, then click on the purple ‘Upload media’ button.

Once the video is uploaded, you will see it in your video section. Just click on it and drag it onto the blank canvas.

Step 4: If you need to decrease the length of the video then click on the scissors icon at the top which shows the current length of the video.

Drag the blue bars on the left and right of the video timeline shots, until you cover the exact section of the video which you want to turn into a GIF.

Step 5: In the last step we just need to download our video in GIF format. So, click on the Share button (top-right corner), then click on Download and select GIF as file type. Click Download.

It will take a few seconds to download. Once you get the pop-up box notifying you that ‘You Saved Your Design’, go to your downloads folder on the computer and you will see your GIF saved there.

A Common Issue: The GIF on my WP site is not working properly. It shows a static image and not looping.

When you upload a GIF file on WordPress, it automatically resizes it. Actually, it creates 3 different sizes of the file. A thumbnail version, a medium version, and a large version. All these, apart from your original full-sized file.

It does this so it can use the appropriate size for the different areas of your website where the image will be featured.

The problem is that when it resizes the GIFs you upload, it saves them in jpg, which means they are turned into static images.

So, make sure you select the ‘Full Size’ option for the GIF when you insert it in your content. This can be done from the right-hand options of your Gutenberg Post or Page editor under ‘Image Size’.

Benefits of Adding GIFs to Your WP Site

Research shows that people’s attention-spans are declining and it’s becoming harder and harder to engage website users just though written content.

This is why the popularity of video content, like YouTube and Tok-tok keep growing stronger and stronger.

Same reasoning applies to GIFs.

Rather than adding a simple picture to your article, the use of an animated WordPress GIFs can go a long way in grabbing people’s attention. At the same time, it doesn’t disrupt the content consumption flow of the reader, since it’s not too long.

Furthermore, it is proven that the looping effect of GIFs is a psychological ‘Attention Grabbing’ technique.

The main benefits of using GIFs on your site are:

• Grabs readers attention (can be ideal as a Call-to-Action).
• It is a better way of expressing an emotion.
• Helps users absorb information easily (this makes GIFs ideal to use when describing an action).
• Creates more engagement to the topic and consequently can lead to more shares on social media.
• GIFs are a good way to showcase products in more detail than a simple picture. You can show a product in use, for example.
• You can use the same GIF for your WP content and for your Social Media content. Convenient.
• GIF can have SEO benefits since users spend more time on your page. GIFs can also help attract links from other sites to your page.

Downside of Adding GIFs to Your WP Site

GIFs uploaded in your WP media library may slow down your website.

Remember that GIFs are made up of hundreds or thousands of picture frames that, added together, make up the animation aspect. So, when you load a GIF on your WP you are basically uploading various images in one go and the file size becomes much larger.

The longer the GIF, the more images it is made up of, and the bigger the file size of that GIF.

Too Many GIFs in your Articles may look Unprofessional

It’s important that you don’t lose sight of why you are inserting GIFs in your content article. They need to have a specific purpose and sites that have many GIFs added all over an article just look silly and unprofessional in my opinion.

Back to You. How Will you Add your WordPress GIFs?

My favorite method is to add a GIF by loading it into my WP Media library.

This is because I usually create my own unique animated GIFs and therefore, I can’t just copy and paste from a GIF Database site. It also gives me more control over my content.

Having said this, there are some really entertaining GIFs out there which can spice up your content piece, so don’t be afraid to embed these where it makes sense.

Speaking of entertaining content, I recently came across Lottiefiles which is an advanced way to easily add animations to your website. If this is something you’re interested in, then go ahead and check my Lottifiles Review.  

Let me know in the comments below, how you add your WordPress GIFs.