How to Add Animated GIFs in WordPress (The RIGHT Way)

I once found the perfect GIF to make a post more engaging, but it turned into a static, non-moving image immediately after upload. It was incredibly annoying to see the animation disappear right when I wanted to engage my readers.

This happens because when WordPress automatically creates smaller image sizes (like thumbnails), it only uses the first frame of the animation. The rest of the animation data is not included in these generated sizes.

Luckily, fixing this is simple once you know which setting to tweak. I have used this specific method on my own sites to keep animations playing smoothly without any code.

Here is how to add animated GIFs in WordPress the right way.

Why Are WordPress GIFs Not Working Properly?

Whenever you upload an image to the media library, WordPress automatically creates several copies of that image in different sizes.

There are 3 default WordPress image sizes that are automatically generated: thumbnail, medium, and large. WordPress also keeps your original upload, which is called ‘Full Size’.

The problem is that when creating these new image sizes for animated GIFs, WordPress only captures the first frame of the animation.

As a result, when you add any of those generated image sizes to your post or page, they will be static images and result in WordPress GIF not working.

Now, let’s look at the right way to add animated GIFs in WordPress so they keep their animation.

Properly Adding Animated GIFs in WordPress

First, you need to edit or create a new WordPress post or page in the WordPress Gutenberg editor to add the animated GIF.

Once you are in the WordPress content editor, go ahead and click the ‘+’ button and add an Image block.

Next, you’ll find multiple ways to upload your animated GIF in the Image block.

To start, simply click the ‘Upload’ button and select your animated GIF from your computer. Or you can click the ‘Media Library’ button and add media files that have already been uploaded to your media library.

There’s also an option to enter the link to your GIF by clicking the ‘Insert from URL’ button, but we don’t recommend this because it does not upload the image to your website.

Once you upload your GIF, the block editor will insert it into your content, and you can customize it.

After adding the GIF, you’ll need to select the ‘Full Size’ option under ‘Image size’ from the menu on your right.

It’s important to select ‘Full Size‘ because this tells WordPress to use the original, untouched animated GIF you uploaded.

The other sizes (like ‘Thumbnail’, ‘Medium’, or even ‘Large’) are static copies that WordPress generated using only the first frame. By choosing ‘Full Size,’ you ensure the animation plays correctly. 👍

You will be able to see the animation right away in the content editor.

Go ahead and publish or update your blog post to see the animated GIFs in action.

Bonus Tips for Using Animated GIFs in WordPress

Animated GIF images are usually larger in file size than other image files. That’s because they contain several compressed images used as frames to create the animation.

Using large GIFs or adding too many GIF images on a WordPress page can slow down your website and hurt your search engine optimization (SEO). See our ultimate guide on how to improve WordPress speed and performance for more details.

If you use Giphy.com to find animated GIFs, then you may find the GIF Master plugin very useful. It allows you to search the Giphy database from your WordPress dashboard and add GIFs without leaving your WordPress site.

If you have a link to a GIF from Giphy, you can also simply paste the URL directly into the WordPress editor on its own line. WordPress will automatically embed the animated GIF for you, no plugin required.

Frequently Asked Questions About GIFs in WordPress

Here are answers to some of the most common questions we get about using animated GIFs in WordPress.

Why are animated GIFs so large?

Animated GIFs are essentially a series of static images, or frames, packaged into a single file. The more frames and colors a GIF has, the larger its file size will be.

This is why they are often much larger than standard JPG or PNG images.

How can I optimize GIFs to make them smaller?

You can use free online tools like EZgif or GIMP to optimize your animated GIFs. These tools can reduce the file size by removing extra frames or lowering the number of colors.

Is it bad to use many GIFs on a single page?

Yes, adding too many large GIF files to a single page can significantly slow down your website’s loading time. This can create a poor user experience and negatively impact your SEO rankings.

It’s best to use them sparingly to highlight key points or add visual interest where it matters most.

Additional Resources for Managing Your Media

We hope this guide helped you correctly add animated GIFs to your WordPress site. Now that you’ve mastered GIFs, you may find these other articles on media management useful.

• Great WordPress Plugins for Managing Images – Discover tools that can help you organize, optimize, and display your images more effectively.
• Why You Should Never Upload a Video to WordPress – Learn why hosting your own videos can hurt your site’s performance and what you should do instead.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.