GIFs Slowing Down WordPress Blog? Read 4 Ways to Boost Site Performance!

It’s a truth universally acknowledged that a slow website is a dead website.

According to KISSMetrics, once a visitor clicks on a link, the page has three seconds to load – any longer than that and there’s a 40% chance that the visitor will bounce. Sites with slow page loads usually have higher bounce rates. Visitors aren’t going to stick around long enough to wait for a page to load when there are other, faster options elsewhere.

This can pose a problem for websites that rely heavily on GIFs.  

How do GIFs affect site performance?

Despite their popularity as a file format for animations, GIFs were not truly created for this purpose in mind. They are one of the oldest file formats still used today, developed in 1987 using a compression technique called the Lempel-Ziv-Welch (LZW) algorithm. LZW traces its roots all the way back to the 1970s and GIFs today still operate using it.

Unfortunately, this reliance on an old-school algorithm means that GIFs are less performant than file formats that use modern compression techniques. This is why formats like PNGs take up so much less file size compared to a GIF with the same content.

The large file sizes of GIFs are also the reason why websites that utilize them can suffer from page bloat, leading to slower speeds, poor user experiences, and higher bounce rates.

This can mean death for a developing website.

Fortunately, we have compiled here four ways to optimize your GIFs and boost performance on your website, keeping your visitors (and yourselves) happy:

1. Render static GIFs as PNG

There are two kinds of GIFs: static (unmoving images and simple graphics) and animated (moving images created through time delays). Both take up an unnecessarily large amount of space compared to other file formats.

One way to optimize static GIFs is to render the image using the PNG format. It might sound simple but it’s incredibly effective. PNGs operate using modern compression techniques and can be compressed 5-25% smaller than their GIF counterparts.

Free web-based programs like Pic.io and Convertio can make GIF to PNG file format conversions a piece of cake.

2. Lessen use of animated GIFs

Now, this tip might seem obvious, but lessening the number of animated GIFs on your website really does have a significant impact on your page load speeds.

Animated GIFs have a tendency to cause overhead, which is a measure of an additional cost in addition to a normal cost. If you’re having trouble conceptualizing this, try thinking of it in the way of two options for placing a video on a web page. These options were created for the same purpose, but Option A has an overhead of 25% in both size and speed compared to Option B. This means that Option A is 25% larger and takes 25% longer to execute. Basically, overhead compares the performances of two things. In this case, Option A has a poorer performance than Option B because it takes up more space than necessary, causing lag.

Now imagine Program A is an animated GIF. Now imagine multiple animated GIFs, all with overhead, all slowing down your website.

This isn’t to say that GIFs don’t have their uses. They are attention-grabbing and easily accessible; there’s a reason they’re found everywhere online. However, they can also cause page bloat if overused.

Optimize your site performance by only using animated GIFs when absolutely necessary.

3. Compress animated GIFs using lossy optimization

In the case of compression techniques, there are two common methods: lossy and lossless.

Lossy compression reduces file size by removing data from the original file. However, this method can lead to a pixelated image since the graphic quality worsens every time you save the file after compressing it.

Lossless compression is less effective in reducing file size than lossy compression, but the graphic quality doesn’t worsen. Since it preserves all the data from the original file, it can also be uncompressed back to its original size. This method can’t be used to alter graphical data.

Animated GIFs, which largely involve graphical data, use lossy optimization.

Lossy optimizations are based on the principle that there’s a limit to how well the human eye can distinguish between very slight changes in color. For example, imagine a brick wall. From a distance, the bricks all appear to be the same shade of red. Only by moving closer are you able to see differences in the bricks. Now apply this thinking to an animated GIF, which in this case is the brick wall. However, since one GIF can comprise of thousands or millions of pixels, it’s virtually impossible to move close enough for the human eye to differentiate the color of one pixel from the others of similar shades next to it.

That’s where lossy optimization comes in. Since the human eye won’t see the difference, one shade can replace the other. Fewer colors are used and the overall size of the animated GIF becomes much smaller.

Lossy optimization can be performed using software such as Lossy GIF compressor.

4. Consider HTML5 video instead of external plug-ins

Previously we used the example of two options for placing video on a web page to discuss overhead, which compared their performances in size and speed. Let’s consider this hypothetical example in a real-world context. Option A is the animated GIF, a large size and causing overhead. GIFs were never meant to store video and too many of them will slow down the website. Then there’s Option B, which is optimized precisely for streaming video on a web browser – but without the bulkiness of a GIF.

This is HTML5 video, an umbrella term for using the <video> tag to play video on a browser without having to resort to external plugins (which are often used to help GIFs run more smoothly).

By using HTML5 video, GIFs can be converted to a size up to 95% smaller. This is a huge statistic, especially for sites struggling with slow speeds. These videos can be stored in an MP4 container file, which is supported on most browsers, including Chrome, Safari, Firefox, and Opera.

There are different ways to convert GIFs to MP4, including the open-source tool ffmpeg and the web-based program Cloud Convert.