How to Add a GIF to WordPress

Capturing the attention of online audiences can get more and more challenging as entertainment options increase. Including dynamic elements in small, simple ways can be an effective way of attracting target users to your content. 

This is one reason adding animated GIFs to your website can come in handy. Whether you create them yourself, purchase them online, or source them from a free repository, GIFs can be a fun way to convey meaning and increase engagement. 

In this article, we’ll cover how to add a GIF to your WordPress website. We’ll also provide you with a quick troubleshooting guide in case you run into any problems. If you’re ready, let’s get started!

How to add a GIF to WordPress in 5 easy steps

Adding a GIF to your website might seem like a fairly straightforward process. There are some tricks involved in making sure the animation will actually work, however. With that in mind, the following steps will walk you through the process of adding a working GIF to your WordPress site content.

Step 1: Optimize your GIF

As with your other images and media, you’ll want to make sure your GIFs don’t slow down your site’s loading speed. You can avoid that by optimizing your GIFs with a tool like Compressor.io: 

Taking this step will help keep your site running smooth and fast. That’s especially important if you plan on hosting your media on your website’s server, rather than on a separate media host or with a Content Delivery Network (CDN).

Step 2: Add an Image block to your page

Once you’ve prepared your GIF file, you can open up any page or post in WordPress and add an Image block using the Add block icon:

Alternatively, you can enter “/Image” into the blank area.

Either method will insert a block that serves as a placeholder for a media element on your page.

Step 3: Upload your GIF file

You now have three options for placing a GIF on your page. We’ll talk about the Media Library later on. For now, choose Upload:

With this option, you can upload your new GIF file right into your post.

Step 4: Adjust the image size setting

Once you have the GIF placed in your content, you’ll need to go over to the right-hand side of the edit window and scroll down to Image Size. By default, it will likely be set to Large. In order to preserve the GIF’s animation, you’ll need to choose Full Size instead: 

Setting your GIF to Full Size will ensure that it displays the full GIF instead of a static image. 

Step 5: Insert your GIF from the media library (optional)

If you’ve already uploaded your GIF to your site’s Media Library, you can choose the Media Library option instead after adding a new Image block: 

Once in the Media Library, you can select the GIF you want to insert it into your content:

Then you can adjust the GIF’s setting as in the previous example, to ensure that it displays at its full size.

At this point, your GIF should be looping through its animation on the page as a part of WordPress’ live preview functionality. If your GIF is not looping correctly, however, you can check out the troubleshooting information below. 

How to troubleshoot common GIF issues

As we discussed earlier, GIFs can be a dynamic and fun way to catch your readers’ attention and convey meaning. There are some common issues you might encounter when incorporating them into your content, however. Here are a few of the most frequently-asked questions about GIFs.

1. Can I use GIPHY GIFs on my website?

The answer to this question is both yes and no. GIPHY is an online repository for posting GIFs. The site also offers free software that you can use for creating your own GIFs.

However, just as with other forms of digital content, it’s important to know the rules. If you want to use a GIF you find on GIPHY that you did not create, you must follow the Digital Millennium Copyright Act per GIPHYs user policy. This means you can not use someone else’s copyrighted or personal intellectual property for commercial gain.

GIPHY does make it easy to embed content on your website by providing a link for sharing. Still, it’s best to do some research on the content you want to use before placing it on your site.

2. Can I copy and paste a GIF to 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 onto a WordPress post or page.

It’s important to note that this method does not add the actual GIF file to your Media Library, but links to it via its URL. This is something to keep in mind, as you won’t have control over the GIF. If the owner takes it down or changes it, that will affect your content. 

3. Why did my GIF stop moving?

When a GIF that was previously working stops moving, there are a number of possible causes. Depending on what tool the GIF was created with, the looping function may have a limit. If the GIF was not set to loop infinitely, it might stop on its own after a while.

Additionally, your website’s code or your browser could have interfered with the GIF’s display. You can try viewing the GIF in another browser or on another device to determine whether this is the case.

4. How Do I fix my GIF animation?

Figuring out the cause of your GIF’s problem is the first step to resolving any malfunctions. Always check to make sure your GIF file is set to Full Size in WordPress.

If you’ve copied and pasted the GIF, you might need to check the original file’s location to see if it is still functioning. If it isn’t, your GIF will likely not work either. Ultimately, creating your own GIFs and storing the files securely is the best way to avoid unwanted problems. 

Customize your site experience with WP Engine

WordPress’ flexibility and diversity of design options are just two of the reasons it’s such an excellent Content Management System (CMS). With the right tools and developer resources, you can create a unique and engaging experience for your website’s visitors.

Of course, your content will shine brightest when backed by a reliable web host. Check out our diverse options for hosting WordPress sites and take your website to a new level of functionality!