Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Do you want to add animated GIFs to your WordPress blog posts?

GIFs (graphics interchange format) can help capture your visitor’s attention and increase engagement with your blog posts. However, when you add an animated GIF in WordPress, it could lose the animation and appear as a plain static image.

In this article, we will show you how to properly add animated GIFs in WordPress, step by step.

How to add animated GIFs in WordPress

Why Are Your WordPress GIFs Not Working Properly?

Sometimes, GIF animations become static images in WordPress because it automatically generates multiple sizes of the image, but only from the first frame of the animation.

Why does that happen?

Whenever you add any type of image to your WordPress website using the media uploader, WordPress automatically creates several copies of that image in different sizes.

There are 4 default WordPress image sizes, including thumbnail, medium, large, and full size.

Image size in WordPress

However, when creating new image sizes for animated GIFs, WordPress ends up saving only the first frame of the GIF file.

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.

Having said that, let’s take a look at how to properly add animated GIFs in WordPress without losing 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.

Add 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 using this because it does not upload the image to your website.

Upload your animated GIF

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.

Choose full size as image size

The full-size image is the original animated GIF you uploaded to WordPress. Picking this will prevent your WordPress GIFs from showing up as static images and not playing the animation.

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

See GIF preview

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.

Similarly, you can also use EmbedPress to automatically add animated GIFs and memes from Gfycat. Simply enter the URL of your GIF from Gfycat, and the plugin will embed it into your content.

We hope this article helped you learn how to add animated GIFs in WordPress. You may also want to see our list of great WordPress plugins for managing images and our complete WordPress tutorial on how to choose the best WordPress hosting for better performance.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

26 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dana

    Thanks for this. Super helpful and easy to follow.

    • WPBeginner Support

      You’re welcome :)

      Admin

  3. Mike

    Is it better to embed some code or insert the gif as you describe above for site speed? Or does it not really impact anything?

    • WPBeginner Support

      As long as the gif is optimized then there shouldn’t be a major impact having the gif uploaded on your site instead of embedding it.

      Admin

  4. Evans Mary

    So grateful for this knowledge. Thankyou so much for sharing.

    • WPBeginner Support

      You’re welcome, glad you found our article helpful!

      Admin

  5. Lise

    This was a very helpful blogpost.

    I’ve been uploading gifs to giphy, but they became blurry in my page.

    However I now have high quality gifs.

    • WPBeginner Support

      Glad you found our guide helpful!

      Admin

  6. Karl Heinz Burkhardt

    This was very helpful. Thank you very much.

    • WPBeginner Support

      Glad our guide was helpful!

      Admin

  7. Melissa

    Thank you – lifesaver!

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      Admin

  8. Alexandre

    Doesn’t work for me? :(

    • WPBeginner Support

      You may want to ensure you don’t have an image optimization plugin that is attempting to modify the GIF

      Admin

  9. Giron

    How to make start and stop by clicking the mouse for gif animation?

    • WPBeginner Support

      While we don’t have a recommended method at the moment, we will certainly take a look for a possible addition to this article

      Admin

  10. Joy

    Thank you guys. This really helped.

  11. ed

    are there any user comment plugins out there that allow users to add gifs?

  12. Brian

    Any idea how to easily add a post with an iOS Live Photo? Thanks!

  13. Christophe

    Hi,

    I’ve added a animated gif on my WordPress site following your example. It worked but now the .gif has completely disappeared, even from my Media Library.

    Any idea where this could be coming from?
    Many thanks

  14. Christopher Eldridge

    Hi, in my case, the media uploader does not offer the option to change the size of the file. Is that because I’m using the free version of WordPress? If so, which version must I purchase to be able to modify the size of the file and have a functioning GIF animation?

    Thanks!
    Chris

  15. Johnson

    I have an auto blog site in which I use to post to my social networks. I do not write posts I only upload images and use Auto Image Post and Draft Scheduler plugins to automate them.

    Admin please how do I make all my uploaded gif animate automatically?
    I have tried several plugins but none worked. i will greatly apreciate your help.

    Thanks.

  16. John Mauldin

    Great article and GREAT Timing! Just looked at and downloaded an animated gif I need to put on a wp site. Thanks so much for this information, wpbeginner.com!

  17. Rakesh kumar

    Thanks a lot!! It was very simple and yet very effective. Most of us will miss this trick.

  18. Donna Merrill

    To my knowledge I’ve always heard that adding a GIF will slow down my blog. This is why I haven’t used it as yet. However I do have some niche sites that it just may not be a problem.
    Thanks for clarifying it.

    -Donna

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.