Animated GIF not working on WordPress

Animated GIF not working on WordPress is more common than you might think. WordPress does not always display animated gifs properly.

Even though the original size of an animated gif may appear fine as you are creating the post. Once published you may notice your animations stopped working, and instead a still image is shown.

Your WordPress website might restrict the size of large image files, which means that you have to check the platform’s regulations. Some WordPress themes might not allow you to display images that are above 10MBs.

WordPress themes auto resize the dimensions of animated gif images for better presentation, and as a result, you end up losing the animation during the resizing process. This is the same for certain image optimisation plugins.

The theme will not enlarge a gif that is smaller than the framing templates, but it will shrink any gif that is larger than the template’s dimensions automatically. This is so that it looks better on your website page.

This process of downsising a large image might complicate the properties of your GIF files and result in them not animating correctly on your website.

The animated gifs do not fail due to the theme’s issues alone. They might also fail due to server issues and browser settings. If you have not set your website browser to display animated gifs correctly, you should do that now.

Some web browsers like Chrome and Mozilla Firefox do not play animated gifs properly if you have not checked off some settings such as the “Load images automatically”. Slow web hosting services are also likely to interfere with the display of your animated gifs.

Specific issues with the display on mobile device

Large file images might be the culprit for not animating on mobile devices, particularly on underpowered mobile devices. Because animated gifs are a group of individual stills, the file sizes can increase fast.

For optimal results, you should always keep the resolution on the lower side. Whether you are using a mobile device or a desktop, you will have to avoid the large animated files. Ensure that the gifs are smaller in pixels (width) than the full width of the live event.

You can save the size by including both still and moving components. A quick example, you can use a single full frame to keep the background still. After that, layer the small frames on the animation’s background. Even though that will need more work, it will shave on the size of the file, and as a result, the animated gif will work after posting.

Instead of waiting for the theme to resize your animated gifs, you should do the work manually. Use of some advanced tools like the gif reconstructors such as Ezgif.com could also remove the animations during the process.

Some resizers shrink the properties of your animated gifs, but you will have to reconstruct the animated gif. Moreover, you will have to revise the appearance of your animated gif to appear the best on the small size.

Troubleshooting

Often the most common problem is plugin or theme resizing. We ran into this issue while using imagify an image optimisation plugin that resizes images for better page loading.

The way we combated this was to go into our post and make the image in the post display as a full image instead of a compressed version of it.

Similarly, with themes, they can often make your image half the size of the original so check by clicking your image and ensuring it is displayed as a full image and not large, medium or small.

You could also try uploading the original GIF onto your image hosting websites like Photobucket or ThingLink. Grab the frame code and embed it into the post. This will avoid your theme resizing the image.

Animated GIFs not working on WordPress

Unfortunately, some themes restrict the use of GIFs for logos, and some do not offer support for them. If that is the reason your animated GIFs are not animating, there is no solution. You will have to change the theme of your site if animated GIFs logos are very important.

The theme may also resize your animated GIFs, which means that they will destroy the animation. Some themes use strictly specified logo sizes, and the theme will resize each file you upload so that it can match the needed logo size. The animation will get destroyed in the resizing process. The issue is also hard to solve. The only option is to get help from the theme author.

You can try looking through the theme files and find the header.php, header-main.php, branding.php or something similar. One of the things that make the task complicated is that the authors are free to name and structure their theme files as they want.

Therefore, you are likely to find that your theme file features a single header.php file or several header-something.php files in addition to a full Header folder that contains many files. If identifying the file that contains the logo-function is hard, contact the theme author. They will provide you with the help you need to solve the animation GIFs problem.

Use header.php

If you find the header.php or any respective file that contains the logo settings, you should locate the logo function. It should be something similar to $logo .= presscore_get_the_logo()orget_theme_mod (custom_logo), (medium). Or if(has_custom_logo() ) or the_custom_logo ()

Create a child theme for your website

Copy the header.php file and copy it into the child theme. Remember to preserve the original folder and the file structure of your parent theme. Change the size of your log situated in the function to the full size.

If there is no predefined logo size in the function, you will be able to set the full size. Remember that the function might reject it. If it rejects it, you will have to contact the theme author for help. They might be in a position to help you.

When it comes to the troubleshooting of the animated GIFs problems, you will highly depend on the author of the theme because they are the only ones who understand how they designed the logo style without the need of closely examining the entire theme.

Therefore, if they cannot help you and having animated GIFs on your website is vital, you will have to change the theme. There are no plugins or external fixes that might help you solve the resizing issues.

How to create the best-animated gifs for WordPress sites

WordPress allows you to use animated gifs for the logo and as images in your website. To build an animated gif, you will need a video editing or an image editing program.

A good example of the programs is Photoshop. You will require a sequence of images that you can combine to tell a good story. Many images will improve the quality of the animations because each of the images will run for a short time, allowing the movement of the objects to appear like natural. Here are the steps you should follow to create animated gifs for your WordPress site.

Open the Photoshop program in your Windows computer and on the top menu, click the Timeline option.

On the tab that appears at the bottom of your screen click on the small button at the middle of the screen

Choose Create Frame Animation
Import every image that you would use in the animation and include them in your new layer.

Remember to resize the images so that they can fit in your WordPress template or logo size. The automatic resizing of gifs on the WordPress themes will make them lose their animation. Moreover, huge gifs are heavier for your website and might slow it down.

From the burger menu situated on the right-hand side of the Timeline tab, select “Make Frames from Layers”.

At this stage, many frames will appear on your timeline. Under every frame, you will find a timer. Use the timer to set the time every individual frame should remain visible.

Use the “Forever” tab to set the loop of your gifs. You can limit the number of limits or choose to continue forever.

To save the animated gif, click on the “File” tab and then on the “Export” tab. Finally, click on “Save” for the website from your top menu.
Select the quality of gifs you prefer and then click on “Save”. Remember that the large file size will compensate for the quality. You can now upload your animated gif to your WordPress site.

Finding and downloading a gif for your WordPress website

If you’re not that creative, you can download animated gifs from the internet and use them on your WordPress website. In fact, you will find numerous sites that serve as repositories for animated gifs such as GIPHY.

However, when searching for the animated gifs, be careful about copyright issues. Using any gif you find is possible, but that might affect the ranking of your website on the search engines.

To be sure that the animated gif you are about to use is available for use, you will have to buy the rights, browse the available CC resources or pay a designer to build the animated gif.

You can also browse gifs on Google, which provides advanced image search filters consisting of licensing. Keep in mind that Google might not find every image that is marked with a license. In other words, you will be uncertain whether you are ready to use free animation.

After you have found the animated gif you need, it might be hard to download it without damaging it. Therefore, start by reading a few guides on how to complete the downloading successfully. You can also hold them without having to download anything.

How to upload the animated gifs to your WordPress Website

If you are the person who created the animated gif and saved it on your computer, you can upload it normally. Click on the “Media” option, click on “Add new in WordPress” and then browse your personal computer to reach the file. After you have found it, click on upload.

But if you downloaded the WordPress gif from a website, you can upload it without having to download it locally. Here is what to do.

Locate the gif you would want to use on your WordPress site. Find the URL and remember that at times, the URL of the page containing the animated gif might have a different URL to that of the animated gif itself.

Open the gif in a different tab or use an inspect option in your web browser to capture the right URL. When using GIPHY, use the “Copy Link” option to find the link.

Now, select the file you would want to use. You can copy the link to gif version of the animated file. Alternatively, open the gif in your browser and then copy the available link directly.

In your WordPress website, click on the “Media” option and then on the “Add New”.

If the animated file is not available locally, you will not find it by browsing your personal computer. That means you should copy and paste the link into your “File name” field.

Click on the “Open” option.

At this stage, the animated gif file should upload to your WordPress website.
To ensure that everything is working as intended, search for the gif in your media library and then click to open it on a different page. You should see it animating correctly.

Using the animated gif as a logo in your website

After you have uploaded the animated gif, navigate to the settings section of your website and select the gif from your media library. In most cases, you should not experience problems.

However, CSS will help you to resize the logo correctly. CSS will not destroy the animation because it will not affect the original animation. It will only affect how it appears on your website. To resize it, inspect your page and find the class and ID of the logo. Set the new height and width.

Conclusion

Big gifs are likely to slow down your website. Therefore, you should maintain the size you would want to display on your website. As a general rule of thumb, ensure that the animated gif is below 500KB.

Avoid the use of distracting imagery and go for something that will definitely catch the attention of your site visitors. Do not use them in places where the visitors would want to focus on the content or several times in a single place because the motions could be jarring.