Animated GIFs aren’t just about memes. They can also be very handy for illustrating actions on a screen for a software tutorial or for comparing before and after shots. (I use Screenflow for creating them, but there are a lot of good apps that can also create screencast GIFs.)
But whether you’re trying to embed a gif of the pop culture meme du jour or a technical how-to guide, there’s a simple trick in WordPress to get your animated GIF to work.
The problem comes down to what WordPress does with images when you upload them to the Media Library. When you hit the Upload button, WordPress adds the image to its database and creates different-sized thumbnails for use in various parts of the site. Those are the ones that you can find in the Media Settings panel or any custom ones you’ve set up.
But the resized thumbnails are always JPG still images. If you upload a GIF, WordPress will create resized JPG thumbnails, not resized GIF thumbnails. So if you embed one of those resized versions in your post you’ll end up with, well, a still image.
All you need to do to fix it is to make sure that you don’t use one of the resized thumbnails but instead use the original GIF file you uploaded. In WordPress, that’s known as the “Full Size” version. So when you’re choosing the image to embed, go to the options to the bottom right and make sure to choose “Full Size” from the list.
Your list might look a bit different–I’ve added some custom thumbnails sizes. But the Full Size option is baked into WordPress.
It’s one of those things that’s incredibly simple when you know it but can create frustration if you don’t.
Using a Plugin
While it’s easy enough to embed GIFs without a plugin, if you prefer to use a plugin to insert GIFs from the Giphy service, you can. The most popular one is GiphyPress.
It adds a new button to the post editor and helps you discover new GIFs to use from the Giphy website. But it’s tied in tightly to their site, and it’s not designed for directly uploading your own GIFs like the screencast GIF above.
Christopher Eldridge says
August 28, 2017 at 8:30 amHI. In my version of WordPress, the option to choose the size of the uploaded file is not given. Is that because I am using the free version of WordPress? And if so, which version must I use in order to have the capability of using animated GIFs on my blog?
Thanks
Chris
David says
August 28, 2017 at 9:45 amIt’s hard to know exactly where the issue with without specifics of the setup, but if you’re using the free version on WordPress.com, I suspect you won’t have any control over upload sizes but don’t personally use it so can’t say for sure. If you’re using a self-hosted version from WordPress.org, the upload size (and filetypes) can be set in the site’s configuration. Exactly how to do that depends a bit on whether you’re using a single standalone site or multisite. It can also depend on whether you’re using one that you have full admin control over or a managed host. And inside WordPress isn’t the only place where upload sizes and filetypes can be set. The server’s configuration also has a say, as does things like PHP config.
Jenna says
July 18, 2017 at 4:32 pmHi, not sure if you know the answer to this, but I am trying to add a Boomerang file to my WordPress post and it will not let me add it because it is a .mov. I am new to all of this so I’m not sure if there is a way I can fix this?
Daniela Ferreira says
July 16, 2017 at 7:42 pmThank you for the help!!!!
Ryan says
May 20, 2017 at 12:53 pmLove finding the answers to my problems. Full-size worked like a charm! Thanks!!
David says
May 20, 2017 at 2:30 pmGlad it worked for you!
Ahana says
May 6, 2017 at 7:22 ammy gif is not playing in loop? is it because of the size or is there something else I need to do
David says
May 6, 2017 at 2:27 pmWhen GIFs are created one of the settings is whether or not to loop. If you didn’t create it, the creator likely turned looping off. If you created it, your creation app should have it as an option when you export or save the GIF. I’m not aware off-hand of a way to override that for playback.
Ralu says
March 29, 2017 at 12:43 pmthx! so simple!
Jose says
March 16, 2017 at 9:34 amthanks a lot, was trying to figure out why I was seeing a static image, your tip worked perfectly!
David says
March 16, 2017 at 4:06 pmYes, that’s precisely the issue that had me stumped at first.
Moon says
November 3, 2016 at 1:25 amThank you! This is really helpful! I’ll try out the trick on one of my upcoming post! :)