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

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.

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.

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

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

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

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

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 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

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

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

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

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.