Animated GIFs Not Working in WordPress: Quick Answer Section
Why don't animated GIFs in posts work?
When a GIF doesn’t animate, it is most likely due to an issue, connected to the way WordPress processes this type of file. In some cases, it can be due to plugin or theme settings.
Can I fix the non-animating GIFs?
No, the files have been damaged, so they can’t be fixed. You can’t fix the processing issue in WordPress either. You can, however, use the still undamaged original GIF.
When GIFs in posts and GIFs as featured images don't animate, is it the same issue causing it?
Yes and no. Yes, because it’s again WordPress’ way to process the files that causes the issue. No, because the size of the featured image, which is basically the problem, is coded directly into WordPress core, meaning that a whole other solution is necessary.
Can I fix non-animating GIFs with a plugin?
In the case of featured images, yes. In the case of media in posts, this is not necessary.
Do I need to code to solve the GIF-issue?
It’s not required but might come in handy.
While browsing different WordPress groups on Google+, I stumbled upon a question regarding an animated GIF issue on a WordPress site: the GIF was uploaded to the media library and added on a page. When the page was published, the GIF was on it but wasn’t animating. If you, however, were to click on the GIF so that it opens in a new browser tab, it starts animating as it should. This isn’t the only GIF-issue WordPress users are battling with either. The other most common WordPress-related GIF-issue is that GIFs set as featured images never animate.
Does it sound familiar?
Frustrating indeed but there is a fix. This post will help you understand the issue and enable you to use animated GIFs in WordPress, both in a post/on a page and as a featured image.
Why Don’t Animated GIFs Work in WordPress?
GIF in Post
The short answer is, well, they do work. But there is a twist.
Whenever uploading images to WordPress, including GIFs, they are automatically processed and 3 or more, depending on your theme, standard image sizes, besides the original size, are generated. While this is absolutely fine for other file types, WordPress can’t process GIFs properly when resizing them. This results in WordPress “grabbing” just one of the frames and turning it into a still frame, thus destroying the animation.
Because the animation gets destroyed due to resizing, you end up with one fully functional and properly animating GIF and 3+ resized still frames. You cannot make an animating GIF out of the still frames. You can, however, use the preserved full-size file.
Animated GIFs work indeed only, if you use the Full-Size-option when adding them to posts and pages. This means that, whenever you want to add animation to your site, you have to resize the file prior to upload. Make sure that the frame fits the spot on the page/post that it’s supposed to fill.
What Else Can Destroy GIF Animation?
Some themes and plugins, especially image optimization plugins, can enforce resizing even on full size images on upload. A good example here is the ShortPixel image optimizer that offers the option to resize very large images, so that they don’t eat up a lot of disk space and resources.
While this is smart optimization for the rest of the images on the site, it will destroy your GIFs, as long as the frame is larger than the defined limits. This is, luckily, just an option that you can turn off or adjust, if necessary. As some plugins search for images that aren’t optimized in the media library and optimize them post-upload, you must make sure this isn’t the case of your plugin or deactivate it altogether, if there isn’t a better workaround. If the plugin gets a chance to resize the GIF, it’ll stop working again.
If full-sized GIFs still don’t animate in WordPress, be sure to look for other plugin or theme settings, messing up with image size. Such settings can be found under Settings->Media in your WordPress admin panel or directly in Theme Options.
GIF as Featured Image
Much like in the case of animated GIFs in posts, frustrated WordPress users upload GIFs as featured images on posts only to discover that they don’t animate. The reason is that themes, supporting featured images, use a specially resized variation of images, called thumbnail but not identical with the thumbnail sizes you can set in Settings->Media. Featured images use by default this resized “thumbnail”.
When a resized version of the GIF is fetched to serve as a featured image, it, much like in the case of GIFs in posts, doesn’t animate because it gets destroyed and turns into a still frame.
Luckily, there is a way to make animated GIFs work in posts and as featured images in WordPress.
How to Make Animated GIFs Work in WordPress
GIF in a Post
If you want to use a GIF in a post, you should simply do the following:
- When creating an animated GIF to use in WordPress, make sure it is exactly as big (both height and width) as you need it to be on the page. If you want to fill a spot that is 400x250px, this is the size you should set for the GIF.
- Upload the GIF as usual
- When inserting the GIF on the page, make sure to choose the option Full Size. WordPress will without a doubt create different resized variations of the GIF but you should remember that they can’t be used as animated GIFs.
That’s it!
GIF as Featured Image
If you want to get really fancy and use animated GIFs as featured images on your site, you have two options: use a plugin or mess with your site’s code.
If you decide to use a plugin, you can safely choose Autoset Featured Image. Even though the plugin hasn’t been updated in about 3 years, it has 9000+ active installs, witnessing that it works fine.
The way it works, is simple: you add the animated GIF as the first image in the post (full-sized), the plugin fetches it, and sets it as a featured image. The obvious downside here is that you must have the GIF on the page, you cannot just use it as a featured image.
If you prefer to not use plugins and “do it right”, you have to tweak WordPress core code. You have to find the function the_post_thumbnail in wp-includes/post-thumbnail-template.php in the root of your site on the server. Then, you can modify it to use the full size of images instead of the thumbnail by changing the value within the parentheses to ‘full’:
the_post_thumbnail( 'full' );
When ready, remember to save the file, upload it on the server again by replacing the existing file there, and check, whether GIFs used as featured images have started animating – they should have. If not, you probably made a mistake in the process of editing the file, so simply retrace your steps to troubleshoot.
While the described solution is an easy fix for the problem with using animated GIFs as featured images, keep in mind that there is a catch: this file will be overwritten the next time WordPress updates. Therefore, make sure you keep a copy and re-apply the changes to the updated file. If you are certain that nothing else has changed in the updated file, you can simply re-upload the modified post-thumbnails.php and replace the one on the server with it.
NB! Whenever you tweak WordPress files, it is a good practice that you always save and keep local copy of modified files. Whenever an update is available, you update the modified files with the new code instead of applying your modifications to the updated files again. However, this depends on how much you have changed in the file. If it’s a single line, as in this case, you might be better off modifying the updated version of the file, instead of trying to find and apply all updates to the modified file.
