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. It doesn’t stop here either. Others have stumbled upon yet another WordPress-related GIF-issue: whenever trying to use a GIF as a featured image of a post, it never animates.
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. Animated GIFs work only if you use the Full Size-option when adding them to posts and pages.
The reason is simply that, whenever uploading images to WordPress, including GIFs, they are automatically resized to the 3 or more, depending on your theme, standard image size options. While this is absolutely fine for other images, WordPress can’t process GIFs properly when resizing them. This results in WordPress grabbing one of the frames and turning it into a still frame, thus destroying the animation.
Because it is the during the resizing that the animation is destroyed, you can still safely use the Full Size- version of a GIF on pages and in posts and it should work fine.
OBS! Some themes and plugins, especially image optimization plugins, can enforce resizing even of full size images on upload. An example of this is the plugin ShortPixel, which gives you the option to reduce the size of files by resizing large images.
While this is smart optimization for the rest of the images on the site, it will destroy your GIFs, as long as they are larger than the defined limits. If full-sized GIFs don’t work in WordPress, be sure to look for plugin or theme settings, messing up with image size.
In case that you discover a plugin, resizing images on upload as described here, you must either turn that feature off while uploading or deactivate the plugin, as long as it isn’t possible to simply turn the feature off.
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.
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 size 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 got destroyed and turned 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.
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 has changed in the file, you can simply re-upload the modified file and replace the one on the server with it.
NB! Whenever you tweak WordPress files, it is a good practice that you always keep local copy of modified files and, 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, it depends on how much you have changed in the file. If it’s a single line, 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.