How to Solve GIF Animation Issues in WordPress (SEO Tips Included)
In the event that you utilized one or more GIFs in your postings, the chances are that you confronted a situation where the GIF refused to run. The GIF was actually handed to the site, but it remains still. The matter may be quite irritating, but its solution is quite simple. WordPress is the culprit for your GIF not operating as it resizes GIFs on the fly.
Each image or GIF depending on your WordPress theme that you upload to your website is resized in a few different dimensions. In this case, your GIFs are also resized. And if GIFs are resized in WordPress, they become non-animated due to the removal of their animation attributes. So the question remains- how do you fix this? If you want to stop your GIF from resizing, you have to change your WordPress theme. Nevertheless, this is not the right way to solve such a simple problem.
Here’s how to fix GIFs that won’t work in WordPress.
Animated GIFs hardly ever work correctly with WordPress. Animated GIFs are not always shown appropriately. Thus, even if the original size of an animated GIF appears to be fine, following the publication, your animations may cease to work, and a static image may be displayed. The file size limits of your WordPress website may be the reason for large image files. Some WordPress themes put a cap on the size of images at 10MB. While WordPress themes may automatically resize the animated GIF images for a better look, the animations get lost in the process.
Similarly, an image optimization plugin may cause the animation to be lost. In that case, the theme will not upscale the gif that is smaller than the frame templates. This will enhance the appearance of your website.
On your website after the image is shrunk, it might lose some of its features, and that is why it doesn’t animate properly anymore. The animated GIFs are not only the issues of the theme. They may also be the server issues or browser settings. If you didn’t know, browsers need to be set appropriately for GIFs to work correctly. Some browsers such as Chrome and Firefox will not display animated GIFs unless certain options are enabled.
Slow web hosting providers can negatively affect the loading of animated GIFs.
How to Add GIF to WordPress?
Before diving into reasons of WordPress GIF not working, I would like to show you how to add or insert a GIF to your WordPress site in short.
For Gutenberg
Open the Gutenberg editor and add an image block
Add your GIF – Upload a file, select a file from the library or paste a link
Enjoy it
- For Classic Editor –
- Press the “Add Media” button
- Pick “Upload Files”
- Press the “Select Files” button
- After the selection is made, click the “Open” button
- On the GIF, choose “Full Size”
- See the GIF on the screen
That’s how quickly you can add a GIF to your Elementor or WordPress site.
Embedding a GIF in a WordPress post or page is an excellent idea to beautify your content with attractive, animated visuals. WordPress has multiple ways of placing GIFs including utilization of the inbuilt Image block in the Gutenberg editor or linking GIFs from external hosting services. Unfortunately, users sometimes face problems like GIFs not animating, showing only static images, or not uploading due to file size restrictions.
This guide features the best ways to place GIFs on WordPress, gives reasons why GIFs fail to play or animate, and provides solutions to fix common issues. We will also dwell on perfect practices of GIFs performance optimization, how plugins and WordPress settings can influence GIFs, and how services like Cloudinary can facilitate the management and delivery of animated GIFs on your site.
GIFs are basically of three types: video-based, animation-based, and stickers. CompuServe is a USA-based system software company that first developed the idea of GIF in 1987. GIF today isn’t used only in web design but also in social media, emails, and text messages.
They are so popular on the internet that they can be used to create animated images. If you have ever seen short animations online, chances are they were GIFs. There are basically three key reasons why GIF files may stop working on WordPress websites. They are:
- Conflict with default resizing
- Conflict with theme
- Conflict with plugin
The following segment is going to provide you with methods to fix them.
Understanding Why GIFs Fail to Play in WordPress
The issue largely stems to the way WordPress handles images when they are being uploaded. In order to serve the appropriate size of an image depending on the location of its display, WordPress by default creates several sizes of any uploaded image.
This approach is perfect for non-moving images, however, it can remove the animation of an animated GIF without the user’s knowledge. If WordPress produces different sizes of the GIF, the animation is preserved only in the full-size file. Consequently, if a theme or a post is utilizing a thumbnail or a medium-sized version of the image, the animation won’t show.
Another frequently encountered problem source is file changes happening during the upload process. Suppose you edit a GIF in WordPress-crop it, for example-it may be stored as a single frame instead of a looped animation. The reason is that most of the built-in editing tools of WordPress are not intended to be compatible with the characteristics of the animated files.
Best Online Animated GIF Makers
Newbie users generally have difficulty in figuring out how to make GIF files. Presently, there are numerous platforms available online through which you can easily create GIF files without needing to be previously acquainted with the process. We will mention some of those platforms here in this talk.
1. Canva
Canva is an internet-based design software used by many. One of its numerous features is the possibility of GIF creation. You can make GIFs with Canva by either designing them completely new or simply animating the texts and images of the pre-designed templates in your own way. It is also possible to put on the GIFs some effects and stickers or any other element in the library.
2. Ezgif
Ezgif is an easy-to-use web-based program that can make different file types, such as GIF, APNG, WebP, MNG, and AVIF. It comes with various options to edit, resize, and crop files. Moreover, you can write some words on the files and add some effects as well to make them more appealing.
3. ImgFlip
With ImgFlip you can make GIFS by turning to GIFS your videos and photos. You can either send the video files or the URLs. The tool will do the job of changing them into GIF files automatically.
4. Picasion
Picasion is a tool that works similarly to the other ones, GIF files can be made simply by letting the software do the conversion job for your pictures and video files. Besides, it has some basic editing features to make the GIFs more attractive with different effects.
5. GIPHY
GIPHY is well-known for providing and sharing GIFs made.
Essentially, it is a GIF portal where you can download the GIFs that are already made and use them directly on your site.
Best Practices for Using Animated GIFs in WordPress
Animated GIFs can attract more visitors and make your content more interactive on WordPress. Nevertheless, if you use them without thinking about their performance or compatibility, they might not show properly. Thus, to prevent such an inconvenience, here are the best practices to be followed while working with GIFs in WordPress.
Use GIFs Strategically to Boost Engagement: No doubt that GIFs are an effective way of getting attention. Employ them in web pages, blog posts, tutorials, or product features to catch people’s eyes and give a fresh look to your content. But, it is absolutely necessary that GIFs complement the content and do not antagonize the user journey.
Ensure Proper Display and Animation: GIFs must play seamlessly without any indication of them being static images. For this, it is always better to insert full-sized GIFs and not resize them in WordPress. By doing this, you not only get the original quality and animation but also the smoothness.
Optimize File Size for Performance: GIFs with high resolution can be a nightmare for your site speed. Hence, before letting it on your site, employ some compression tools to lessen the size of the gifs but keep the appearance intact. In cases of small files, loading time is short and thus, fewer visitors leave your site immediately.
Use the Media Library for Better Control: With WordPress library for media, handling and organizing GIFs turn into an easy task. Therefore, go ahead with your animated GIFs uploading directly and be sure that they are not properly handled if you drag from some other source.
Fine-Tune Image Optimization Plugins: A good number of WordPress image optimization plugins have it as a default that they remove the animation from GIFs in order to optimize them. In order to prevent this from happening it is advisable that you check your plugin configurations and if necessary turn off the optimization for GIFs. Which in turn guarantees that the animations are still wired up and accurate when viewed through different gadgets.
Follow these steps one at a time, and very soon your GIFs will be working again.
Display difficulties particular to mobile devices
Large picture file sizes can be the reason for the non-working of the animations on mobile devices, particularly on low-powered mobile devices. It is important to point out that an animated GIF is a set of different still images, and hence the download sizes can get very large in a short period of time. For maximum results, the resolution should always be kept at the lowest possible level. Whether you are using a mobile device or a desktop computer, large file sizes of the animation should be avoided. Make sure that the width of the gifs is less than the total width of the live event. You can cut down on the file size by still and moving components. As an example, one single complete frame can be used to keep the background static. Then, the small frames can be placed on the background of the animation.
Although this will take more time, it will shrink the file size and as a result, the animated GIF will be able to operate after being uploaded. Instead of allowing your theme to do so, you should resize animated GIFs on your own. Complex instruments like gif reconstructors such as Ezgif.com can be used for the removal of animations. Some resizers lessen the features of your animated GIFs, which means that you will have to recreate the GIF. Apart from that, you will also need to change the look of your animated GIF in such a way that it looks perfect on a small size.
Animation Troubleshooting – Support for GIFs
In most cases, the main problem which is the scaling of plugins or themes is what underlies the issue. The problem was caused by imagify, an image optimisation plugin that resizes photos for faster page loading, which we were using. We fixed the problem by changing the way the image was displayed in our post from a compressed to a full image. Similarly, themes might often make your image half of the original size; hence, you should click on your image to make sure that it is displayed as a full image and not as large, medium, or small image. Further, you can upload the original GIF to a site that hosts images like Photobucket or ThingLink. Add the frame code to the post. This stops your theme from resizing the image.
Top Reasons – Why Animated GIF’s Not Showing in WordPress
GIF as Featured Image
Just like animated GIFs in articles, angry WordPress users post GIFs as the faces of their works in posts only to find out that they are not moving. The reason for this is that themes which allow features pictures use a specifically downsized version of images called thumbnail, which is not the same as the thumbnail sizes that can be set in Settings->Media. By default, “thumbnail” is the scaled version that is used for featured photos. Similarly, if a scaled version of the GIF is taken to be a featured image, it is severed and thus turned into a static frame, hence it cannot be animated. There is a way to get animated GIFs to work both in WordPress posts and as featured images.
How to Make WordPress Animated GIFs Work in a Post
If you want to use a GIF in a post, then just do the following:
While making an animated GIF for WordPress, make sure that it is the exact size (height and width) of the page that is needed. For instance, if you want to cover a 400x250px area, then this should be the size of your GIF.
Upload the GIF as usual
Be sure that you Full-Size option is chosen when you put the GIF on the site. WordPress will definitely create different scaled versions of your GIF, but you should know that these cannot be used as animated GIFs.
GIF as Featured Image
In case you want to employ animated GIFs as featured images on your site, you either can use a plugin or change the code. If you go with a plugin, you can trust Autoset Featured Image. Though the plugin has not been updated for almost three years, it still has more than 9000 active instals. The plugin takes the animated GIF as the first (full-sized) image in the post and makes it the featured image. However, the GIF must be on the page and cannot be used as a featured image. Without plugins, you need to change the WordPress core code.
The function for the post thumbnail can be found in wp-includes/post-thumbnail-template.php at the root of the server. So, replace the value between the brackets with ‘full’ to show photos in their full size rather than thumbnails:
post thumbnail();
Don’t forget to save the file, upload it again to the server and make sure that animated GIFs as featured photos are playing. If they are not, then you probably messed up while you were editing the file; thus, you need to go back and correct it. The presented method serves as a quick fix for the problem of using animated GIFs as featured photos, but it will be replaced when you update WordPress. Therefore, back up your changes and then reapply them to the modified file. In this situation, you just need to upload the new post-thumbnails.php file again and it will substitute the old one on the server.
Animated GIFs are not supported by WordPress.
Unfortunately, some themes prohibit or limit the use of animated GIFs as logos. If this is the case, then there is no way to get your animated GIFs to work. If animated GIF logos are essential for the success of your site, you will have to change its appearance. Moreover, the theme may shrink your animated GIFs and thus the animation may stop. Some themes have very strict limits for logo size and the theme will resize any file that you upload to meet those requirements. During the resizing, the animation will be detached. It is a tough problem to solve and the only alternative is to get in touch with the theme creator for support.
Check out header.php, header-main.php, branding.php, or similar files in the theme folder. Writers can name and organize their theme files as they wish which makes the process a little bit harder. So, your theme file may have only one header.php file or several header-something.php files along with a Header subfolder containing various files. In case you are unable to locate the logo-function file, get in touch with the theme designer. He or she will provide the necessary support for solving the animated GIFs problem.
Use header.php
You should find the logo function in header.php or some other file that has the logo configuration. It would be something like $logo.= presscore get the logo()orget theme mod (custom logo), or something similar (medium). As a second option, you could use if(has custom logo()) or the custom logo() ()
Make a child theme for your site
Put the header.php file in your child theme folder. Always be aware that you need to keep the original folder and file structure of your parent theme. The log function’s maximum size is increased. If the function doesn’t have a set logo size, you can specify the whole size. Be aware that the function might not accept it. If it is not accepted, then you need to get in touch with the theme maker for help.
They might be able to give you some assistance. When it comes to debugging problems with animated GIFs, you must rely on the theme developer as only they can tell you how the logo was made without having to look through the entire theme. If they can’t help you and you still want to have animated GIFs on your site, then you need to change your theme. There are no external fixes or plugins that can help with the scaling issues.
How to make the best WordPress animated GIFs.
WordPress allows animated gifs in logos and website graphics. An animated GIF requires video or picture editing software. Photoshop is a fantastic example. You’ll need photographs to convey a compelling tale. Because each image is only shown for a few seconds, the animations will be better and the objects will move more realistically. Here’s how to make animated GIFs for your WordPress website. On a Windows PC, open Photoshop and select Timeline from the menu bar. Click the button in the screen’s centre on the tab at the bottom.
Optionally create animation frames. Import all photographs used in the animation and set them on the new layer. Make sure the photos fit your WordPress style or brand. WordPress themes that resize animated GIFs deactivate them. Huge gifs can add weight to your website and slow it down. Select “Make Frames from Layers” from the Timeline tab’s hamburger menu. Your timeline now has numerous frames. Each frame has a timer. Using the timer, set the length of each frame. Use the “Forever” option to make your gifs loop.
You can select a number of constraints or continue on indefinitely. The animated gif may be saved by choosing “File > Export”. In the website’s main menu, select “Save.” Before clicking “Save,” select the gif quality. You may compensate for low quality by increasing file size. You may now use animated GIFs with WordPress.
How to create a gif for your WordPress site
If you don’t have the creativity you can simply use animated gifs from the internet on your WordPress site. GIPHY is one of the several websites where you can find animated gifs. However, while searching for the animated gifs you should also be aware of the copyright issues. In a nutshell, it is possible to use any gif you find but that can hurt your site’s SEO. A designer can make an animated gif for you or you can buy the rights to use one.
In addition, you can utilize advanced photo search parameters such as licensing to locate gifs on Google. Do not forget that Google may not index all licensed images. In other words, you will not know if the animation is free unless you actually try it. It is not easy to download an animated gif without breaking it. So, to get started, read some tips on how to download efficiently. You may keep them without having to download anything.
Deactivate Image Optimization Plugins
It may be that your image optimization plugins are set up in such a way that every time you upload a GIF it gets reduced in size. Whether you perform the upload via the media uploader in the WordPress browser or the popup image uploader in the Gutenberg or TinyMCE editor, the file will be saved. Most image optimization plugins do not define that.GIF files should not be used. It indicates that on every occasion in which a.GIF file is uploaded, the respective plugins will shrink it.
Additionally, they might alter the size which in turn will make the GIF not load properly and will result in an HTTP error. In case you have an image optimization plugin active, you can switch it off and then try to upload the GIF once again. Don’t forget to clear the cache after you disable the plugin. This should do the trick as it did for me. If it still doesn’t work, you might want to try another solution.
Disable Images SEO Plugin
Many of you might be using an image SEO plugin. When you upload an image to WordPress and then insert it into a blog post, these plugins will do the job of automatically putting the alt tags for the image. These plugins will also try to resize and compress images in order to reduce the loading time of your pages. So, the image SEO plugin that you are using might be the cause of this problem.
Try to re-upload the.GIF file following the removal of any image SEO plugins that are installed on your machine. You could also disable the image compression that is coming from the plugin in order to avoid the loss of the alt tags. Here is the location of an instructional screenshot for the well-known picture SEO plugin called the SEO image optimizer.SEO image optimizer.
Increase Memory Limit
In case you are on shared hosting, your server is probably low on RAM. That’s why WordPress won’t be able to upload the GIF file. In order for the HTTP issue to be resolved as fast as possible, you better increase the memory limit for WordPress. To increase the RAM limit to 256 MB, you need to copy the below PHP code and paste it into the wp.config.php file of your WordPress installation.
define( ‘WP_MEMORY_LIMIT’, ‘256M’ );
Maybe, you can try to re-upload the GIF file. That will most likely fix the problem.
Ask Your Web Host
If none of the options above brought a positive result, maybe there’s a problem with your hosting. So, contact your hosting provider and ask them to check your server. They should also restart the Nginx servers if you are using Nginx. If uploads are disabled in the php.ini file or the post maximum size is less than the upload maximum filesize, this issue may also arise. You should clear your server cache if you are on a managed WordPress hosting plan.
Also, in case your server is linking your website to a custom CDN, you need to remove the CDN line cache as well. If your present host is unable to fix the problem, you might want to consider moving to a better one. The time for posting GIFs as well as other image formats to your WordPress blog should be without any issues. Sometimes the HTTP error is only temporary, and the only solution is to wait a couple of minutes. An HTTP error may result from server updates or other causes, in which case you have to wait and try again.
Remove Special Characters From Image File Name
If your image’s name contains special characters such as an inverted comma (“) or a semicolon (;), etc., you will be unable to submit it to WordPress using the media uploader. You must delete special characters from the GIF filename and reupload it. After uploading the GIF picture, you may see a second issue in which WordPress does not play the GIF animation. When you upload a compressed or scaled GIF animation to a post, WordPress will not play it. When you submit a GIF file, WordPress keeps its initial frame as the original picture. As a result, the GIF will not play when you embed it in a blog post. The quickest solution to this issue is to upload the GIF through the WordPress popup media uploader.
- Launch the WordPress editor and create or update a post.
- Click the button atop the editor labelled “Add Media”
- Upload the GIF and select the full-size option prior to including it in the post.
This would restore the GIF image’s motion. I trust you may now post GIFs to your WordPress site. Always clear the cache before attempting to preview an animation. In the comments area below, please share which solution worked for you.
How To Repair A Damaged Animated GIF Within WordPress Gutenberg
Animated gifs, like movies, are image files that loop. In the WordPress block editor, you may enter animated gifs with the file extension.gif as images. Your animated GIF may occasionally show as a single image. This file’s animation and looping are not working. This animated gif issue may be vexing, but the WordPress solution is straightforward.
Add or embed an animated gif in WordPress
First, upload an animated gif to the Media Library using Image in the block editor. 
Screenshot of Image Upload in WordPress’s Block Editor
Fix a Broken Animated Gif in WordPress
Make sure that the Image Size option for the animated GIF is set to Full Size. The animation of the gif will not work if the size of the animated gif that is selected is anything other than Full Size. Animated GIFs only work in WordPress when the Image Size is set to Full Size. When you change the Image Size to Full Size, the animated GIF should start looping again. This is a very easy method of fixing a broken animated GIF.
If the problem remains after trying this, then make sure that your GIF file is actually an animated one. You can check this by opening your .gif file in a web browser. Go to File > Open File in Chrome. If the gif doesn’t animate in the browser window, then the issue is with your file and not with WordPress.
Adjust Animated Gif Image Size Settings
Once your animated GIF is uploaded, make sure to check the Block settings. The Block settings can be found on the plus side panel of the page. Set Image Size to Full Size.
FAQs on How to Fix WordPress GIFs Not Working
Here, we’ll put some most frequently asked questions in front of you concerning the topic of WordPress GIFs not working.
Q. Can I use a GIF as a featured image in WordPress?
Any GIF can be set as a featured image in WordPress by you. Doing this is just like working with the usual images.
- Go for a new post or an old post.
- Locate the GIF in the media or drive folder.
- Place it into the featured image area.
Q. Is GIF good for SEO?
Alas, GIFs can also have alt-texts. They are a nice thing for SEO in general. But if they are large and contribute to the page loading slowdown, they might hurt your SEO ranking. So, take this point into account.
Q.What are the best tools to create GIFs?
Firstly, we can mention one tool per line:
- GIFS.com
- GIF Brewery
- EZGIF
- Make a GIF
- Giphy
Q. Can a GIF have audio?
A GIF is basically a set of images. Just a few years ago, GIFs didn’t have audio capacity. But, lately, audio GIF has become a trending phenomenon among digital users. www.giphy.com is an excellent source where you will find lots of free audio GIFs.
Q. What is the best size for a GIF?
There is no one-size-fits-all answer to this question. Most web designers, however, would suggest 480×480 or at least a square shape as the standard size for GIFs on web applications. But, depending on your requirements, you may also
Q. Why is my GIF not working in WordPress?
A GIF that is not working in WordPress can be due to an instance where the file was resized during the upload, compressed by an image optimization plugin, or wrongly uploaded. These processes can remove the animation feature and result in the GIF showing as a non-moving figure.
Q. Do animated GIFs work on WordPress?
Animated GIFs are acceptable in WordPress. Nevertheless, for them to be shown correctly, they ought to be uploaded in the original format without any compression, resizing by plugins or theme settings.
Conclusion – Animated GIF not working on WordPress
Animated GIFs are a nice and powerful way to add movement to your WordPress site, but they are somewhat complicated. If it’s a plugin that is removing the animation, WordPress changing the dimensions of the image, or just an upload issue, in most cases the problems can be fixed with a few simple changes.
First of all, by uploading the GIF in the right way, choosing the correct size, optimizing the file, and managing your plugins, you will be able to keep your animated content playing in a proper manner. In fact, large gifs will almost definitely be the reason for your website to become slow. Thus, you need to control the size that you are going to display on your site.
As a rule of thumb, the animated gif should not exceed 500 kilobytes in size. Try not to use distracting pictures, but rather something that is sure to attract the attention of your website visitors. The reason is that, if the motions are disturbing to the visitors, they should not be used in cases where visitors want to concentrate on the information or more than once in the same place.
Thanks for sharing such a beautiful informative information.
Thanks for sharing such a beautiful informative information.