Essential WordPress Plugins for Working With Animated GIFs

Once limited to tacky, flashing banners with neon colors and cartoons that floated through pop-ups and email headers, GIFs have changed for the better. With this change, they are here to stay, especially for WordPress users and developers. Designed specifically for the web, GIF files are typically small in size, making them perfect for adding a touch of movement to a post. In fact, animated GIFs can bring a refreshing sense of life to an otherwise static article or topic.

However, animated GIFs come with their fair share of problems and frustrations. Since animated GIFs are comprised of many frames, they can quickly go from being small, unobtrusive files to being some of the most unwieldy graphics on your server. GIFs are known for slowing down load times on pages where they are used, making them a barrier to repeat traffic and a problem point for webmasters who understand the importance of speed in an age of impatience.

Then there are all the WordPress-specific issues. WordPress was not created with animated GIFs in mind, and their resurgence has given developers some headaches. While WordPress generally resizes images automatically, this process breaks animations by only displaying the first frame. Furthermore, animated GIFs can be difficult to use as featured images on WordPress. They can disrupt RSS feeds, email campaigns, front page displays and thumbnails.

In most cases, the benefits still outweigh the negatives. However, to make GIFs a successful part of your WordPress publishing, you may need to try out some new techniques. Check out some must-have plugins and techniques for working with animated GIFs below.

Basic: Make Your WordPress Site Faster

Make Your WordPress Site Faster

One of the main issues using animated GIFs in WordPress is the load time issue. Keeping load times as quick as possible is essential for keeping your visitors happy and making your website as effective as possible.

According to KISSmetrics, load time is a major contributing factor to page abandonment. With a loading time of just 4 seconds, the page abandonment rate jumps to 25% and closer to 50% as that time approaches 10 seconds. Additionally, a 1 second delay in page response can result in a 7% reduction in conversions.

This means that if a site brings in $100,000 per day – an eCommerce site or other online retailer – a 1 second page delay could amount to $2.5 million in lost sales each and every year. It also directly affects customer satisfaction. A 1 second delay decreases customer satisfaction by 16%. Your customers want your site to function with little to no delay.

Because GIFs can be used to increase user satisfaction, this becomes even more problematic. Maybe you use an animated GIF to illustrate how a product works, as is the case with this animal trap below. The GIF is simply the quickest and easiest way to explain the setting and release mechanism of the trap.

Animated GIFs

Even off of eCommerce sites, GIFs can be used to illustrate specific points, add humor to an otherwise dry topic, or increase the feeling of user interaction. They can be a great way to tie an unfamiliar concept to a familiar one, using pop culture as a connection. For example, WebpageFX blogs for an audience of business owners, who may or may not be familiar with terms like “meta keywords” and “keyword stuffing.” These practices are outdated and completely ineffective – but instead of saying this, they showed just how (in)effective it would be with an animated GIF.

Animated GIFs

Obviously GIFs are great for increasing comprehension or simply bringing a smile to the reader’s face – but this creates a direct dilemma. Despite their inherent positives, these files can be quite large, and slow load times can lead to profit losses and lower traffic levels over time. If GIFs are important to you and to your blog, eliminating issues that lead to delays and slow load times is critical. The plugins below can help make file sizes smaller and loading experiences better, without sacrificing your animations or their quality.

WP Smush.it

WP Smush.it

Widely used and available to developers at all skill levels, WP Smush.it comes with the features necessary to optimize images in a way that decreases load times and keeps end users satisfied. The plugin is designed to:

  • Optimize JPEG compression
  • Convert some static GIFs to indexed PNGs
  • Strip unused colors from indexed images
  • Remove unnecessary meta data from images
  • Make animated GIFs more efficient by removing pixels that stay the same across frames

Unlike some other image compression plugins, which break animated GIFs the same way WordPress itself does, WP Smush.it specifically includes optimization techniques for animated GIFs.

Images that are added to pages by backend users and administrators alike are automatically run through the plugin upon upload. What this means is that you don’t have to change your process at all to have an improved user experience. It doesn’t get much better than that! Users concerned about how existing images are affecting load times can also use the plugin to scan existing content. WP Smush.it is simple to install and straightforward to use.

Any Lazy Loading Plugin

Lazy Loading Plugin

Another option for optimizing load times while incorporating GIFs is to use a lazy loading plugin. These plugins are designed with users in mind. Instead of waiting for an entire page to load – which slows times and leads to frustration – lazy loading plugins load only the content that is currently visible on the visitor’s screen. Lazy loading speeds up image-heavy sites and can be an effective way of keeping your visitors happy.

Many free options exist that make lazy loading simple. They include – but are not limited to:

  • Lazy Load – Lazy Load uses jQUery.sonar to load only visible images. It was written by the WordPress VIP team and receives consistently high rankings from users.
  • Image Lazy Load – Designed as a lightweight version of the original Lazy Load, Image Lazy Load (Unveil.js) provides support for high-res images on devices with retina displays.
  • BJ Lazy Load – BJ Lazy Load replaces embedded post images with placeholders and loads content just before it becomes visible to end users during scrolling.
  • Rocket Lazy Load – Rocket Lazy Load is designed as a small (less than 2kb) script that displays all page images – widgets, embeds, thumbnails, avatars and more, while scrolling. It’s most known for its small size.

Intermediate: Install Some Convenient Animation Plugins

Install Some Convenient Animation Plugins

Once you’ve mastered load times and speed, it’s time to move onto something a bit more advanced, yet still doable for most general WordPress users. These animation plugins make existing GIFs more user friendly and even more visibly attractive. The convenient animation plugins listed below enhance WordPress’s ability to display GIFs.

Animated GIF Resize

Animated GIF Resize fixes WordPress’ automatic resizing feature so that you can resize animated GIFs without breaking the animation. This eliminates the frequently-encountered issue of WordPress displaying the first frame of an animated GIF without anything else.

Giphypress

Giphypress

Anyone who has frequently worked with animated GIFs is probably familiar with Giphy, an animated GIF archive that allows users to search by tag and find GIFs relevant to just about any subject. Giphypress makes it easy to embed Giphy files on your site – just use the button added by the plugin to search for the perfect image and click “Embed into post.”

GIF Animation Preview

GIF Animation Preview

GIF Animation Preview searches out and finds any place you’ve used an animated GIF on your WordPress site and replaces them with preview images. Regardless of where the GIF originated (onsite or offsite image sources both work), the plugin uses the first frame of animation to generate a preview. Then, site visitors are given the option to click play to see the remainder of the animation or to move on without viewing the animation.

This is a great way to decrease the load times of pages on your site, especially if you have opted not to use a lazy loading plugin – instead of having to load every single frame of every animated GIF on the page, visitors only need to load the first frame. This kind of functionality is used by large websites like BuzzFeed, especially for mobile visitors, who have more of a reason to be selective about what data they choose to download.

Advanced: Do Cooler Things With Animated GIFs

Do Cooler Things With Animated GIFs

These plugins and techniques are a bit more difficult to set up, but they are pretty powerful. Keep reading to learn how to set a GIF as your featured image (something we’re seeing on sites like BuzzFeed, Mashable and TechCrunch more and more) and how to turn a series of separate image files into an animated sequence right on your site.

Setting an Animated GIF as a Featured Image

Setting an Animated GIF as a Featured Image

For the most part, web designers and developers have been limited – especially in WordPress – when attempting to set an animated GIF as a featured image. Since WordPress automatically creates a thumbnail image from the featured image you provide, breaking animated GIFs, it can be really tough to pull off. That doesn’t mean it’s impossible, however.

One way around the hold up is to insert the URL of the image into the featured image box, instead of downloading and uploading a graphic from your computer or somewhere on the web. This is hit or miss.

Another – perhaps less than ideal, yet still workable for those well-versed in WordPress development – option is to change the format of the featured image from “featured” to “full” inside of the theme’s index file. This allows the featured image to pull original, undistorted animated gifs. This requires a willingness to do a little coding, and comes with the downside that it applies to all of your featured images – so you’ll need to start manually sizing them to the proper width and height.

It doesn’t have to be complicated. In fact, there are also plugins to facilitate the process. Autoset Featured Image and Automatic Featured Image Posts are two plugins (choose one) that automatically set the first image – regardless of its format – as the featured image. This means that if your first image as displayed inside a post is an animated GIF, it will become the featured image. However, this workaround comes with other downsides – namely that you’ll always need to be choosy about the image you place highest up in your posts!

Auto Animated Images

Auto Animated Images

The Auto Animate Image plugin allows users to embed animations created from a series of separate files, instead of a standard animated GIF. It can be used to get around the 256 color maximum of animated GIFs, allowing for a more natural, flowing feel. On the downside, it is easy to create something that slows down your site immensely, so using this plugin takes some finesse.

The plugin not only displays multiple images – otherwise non-moving images – continuously, like an animation, it also supports arbitrary filenames, no standard required. This means that GIF, PNG, JPEG, JPEG XR – and other HD Photo options – BMP, TIFF, WebP and SVG can all be used interchangeably to create something new and completely original. Animations created with Auto Animate Image can be set on delay, repeat, rewind, pause and even blank, leading to more options than a standard GIF. It eliminates the need for writing JavaScript, yet can be controlled with it if desired. The plugin supports most browsers, so you don’t need to worry about different end user experiences.

It’s All About Making Your Visitors Happy

It’s All About Making Your Visitors Happy

GIFs are back. Many would argue that they have returned from the dead. However, instead of the old, tacky animations they used to be, they’re now integral aspects of clean, solid, effective web designs. However, when working in WordPress, they can be more than a little problematic.

Start at the beginning – at the basic level. Take the time to look into plugins to increase loading speed, find what you’re comfortable with and test how times decrease. From there, work on more advanced animation plugins. Then, get creative. Break out of the “standard” animated GIF rut by creating your own animations out of static images and ensuring your animated GIFs can be set as featured images.

An animated GIF doesn’t have to cause frustration, negativity or dreaded hours in front of the computer screen, trying to make your pages load faster or display just right. They’re meant to be fun, and the plugins and options outlined above keep them that way.

Like the article? Share it.

LinkedIn Pinterest

13 Comments

  1. What about turning an animated gif into a swf? How does WP treat those? Would it solve issues with slow loading? What if visitors to the site don’t have swf plug-in updated, or don’t allow it? Reason I’m asking is, I’m building a site for a client using WP, and his really cool animated gif logo/banner won’t load right in the header area of Artisteer (I created a custom theme for him). I see on the web various sites that recommend converting the animated gif to a swf, but the conversion programs I’ve tried haven’t worked for me. Guess I need to upgrade my version of Photoshop, so I can generate a swf directly from the psd file. If I update Photoshop I really need this thing to work, otherwise no real reason I need the update. Would appreciate any tips.

  2. Any Lazy Loading Plugin is my favorite plugin it helps me lot for managing a website. Thanks for sharing us a top themes.

  3. Hello im using EasyRotator on my wordpress site brightverge.com you can check and use as well.

  4. This article really helped my site out. It has tons of funny pictures of people from india and china. Also it has tons of gifs and viral videos.

  5. I use GIF a lot for software reviews and tutorial.
    Thanks for this detailed article :D

  6. There used to be flash on this website and the image use to rotate. Now it is static. Can I either fix this or eliminate the flash all together and just replace the image with a static photo.
    I have updated all the plug ins with no charge. I updated to work press 4.1 and there was no change. apparently this theme is no longer supported. I would like to get this at least acceptable until we can do a rebuild. Can you help?

  7. Luckily found this site great suggestion for WordPress plugins. thanks for sharing these..

  8. Thanks for the informative article I really appreciate the information… Actually I was looking for how to add Gif and animated images to WordPress but this article clears all the doubts that I have in my mind…

    Thanks once again.

  9. So WordPress is quite capable of generating different sized versions of an animated GIF?

  10. I’m confused. i don’t want to “capture” the first image in an animated gif and make it my post thumbnail. I want my thumbnail TO BE ANIMATED. AOL does that currently where a lot of the thumbnails are animated images and their views have shown much higher clicks because of it. Is there a way to actually make an animated gif be your thumbnail in WordPress AND stay animated? Or am I misunderstanding entirely? Thanks.

  11. Hello!

    I want to keep my animated GIF in all sizes, any news for that in 2020?

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *