How to Add GIFs to WordPress?

by Vipe Team in WordPress Design; Published on 15.06.2020 Last updated on 17.07.2021

READING TIME: MIN

You probably don’t need our WordPress Agency for Development to tell you that but here’s the truth – the Internet is a crowded place. When we say crowded, what we mean is that there is so much choice that is being presented to the online community every single day. Of course, there is still some place left for people with great ideas who can make a splash. So, what does it take to really grab the Internet users’ attention and make your content stand out from the rest? One way would be to simply use more dynamic elements that will attract your target audience.

This is where the animated GIF comes into play. It is one of the oldest image formats on the Internet. Old but gold, as the saying goes. The GIF is still one of the easiest ways to spice up your content. While netizens will forever debate the proper pronunciation of the word (Fun fact: the WordPress developers at Vipe Studio say “jif”; don’t judge), there are a lot of different ways in which you can use GIFS. You can buy GIFs, you can embed them from sites like Tenor or GIPHY, or you can even make them yourself. One thing is undeniable though – the effect a GIF can have on your content is absolutely stellar.

This is the first part of our GIF series and today we’ll discuss how you can add GIFs to a WordPress website. But first, why don’t we take a deeper dive into the GIF history?

How the GIF Came Into Existence

Call us total nerds and weirdos but we think that if you want to use GIFs for your WordPress website development, it would be cool if you knew a thing or two about this particular image format.

Learn About The Image Optimization Process In Your WordPress Website

For example, do you have any idea what the acronym GIF actually means? No? Don’t worry, our WordPress development agency has the answer. Take out your notebook, pick up your pen and write that down:

GIF – Graphics Interchange Format. You can thank us later when you win a pub trivia quiz with this valuable information. No, but really, joking aside, the Graphics Interchange Format is a bitmap image format.

Another interesting fact is that the GIF is a kid of the 80s. That’s right folks. It was developed by a team at CompuServe – an online services provider, led by American computer scientist Steve Wilhite. The GIF was officially released on 15 June 1987. Pretty cool, huh?

Since its inception, the GIF’s usage has become wildly popular on the Internet. WordPress developers love it, too. And we mean, what’s not to love? It’s fun, it looks pretty awesome and it has a wide support and portability between applications and different operating systems.

What Can You Use GIFs For?

So, you might be asking yourself “How can I use GIFs to overall improve my WordPress website development when it comes to creating visually pleasant content?”. Well, GIFs can be used in a variety of different ways. Our WordPress Agency for Development will give you some examples:

GIFs are very applicable for sharp-edged line art with a limited number of colours. If this sounds like a new language to you, think logos. The GIF format has a lossless compression, which favours flat areas of uniform colour with well-defined edges;
You’re a die-hard gamer? Did you know that GIFs can be used to store low-colour sprite data for games? Yes, they can – take our word for it because the WordPress developers at Vipe Studio unsurprisingly also love gaming;
Need small animations or low-resolution video clips? No worries, you can use GIFs for that purpose;
GIFs are most popular on social media platforms such as Tumblr, Facebook, and Twitter. People love using them as a reaction when messaging their friends online. GIFs are a perfect way to express emotion when words fail and are simply not enough. Our WordPress development company also adores using GIFs in our internal communication.

7 Types of Visuals to Use in Your WordPress Blog Posts

Adding a GIF to WordPress

At first glance, adding a GIF can seem easy. But do trust our WordPress development agency when we say problems arise nonetheless. This is why we prefer to walk you through a 5-step process that ensures the animated GIF will actually animate and work reliably. Let’s dive in!

Step 1: Optimize

Just like any other content on your page or post, and perhaps even more so, GIFs can easily increase loading time. As WordPress developers, slow loading time is our biggest nightmare. In situations like this, we recommend online optimizing tools such as Compressor.io. That way, you can ensure that your site loads as smooth as your GIFs animate. This becomes all the more important if your media is hosted together with your content, as opposed to using a dedicated media host or a CDN (Content Delivery Network). Also, remember to make sure that your GIFs are exactly the right dimensions that you need them to be for your page.

Step 2: Add Image Blocks

When your GIFs are ready, load up the intended page or post for editing and click on the ‘Add block’ button to add image blocks. You can also type in “/Image” in the blank portion to create image blocks, which are essentially placeholders for any media elements, including GIFs.

Step 3: Upload the GIF(s)

Our WordPress developers provide you with three different ways you can do this – uploading, using the Media Library, and using a URL. For now, considering we’ve got the GIFs optimized and just right, click on ‘Upload’ and upload the GIF right into the post.

WordPress Development, UX Design and Everything In Between: The Best Practices

Step 4: (Optionally) Use a GIF from the Media Library.

For a GIF you have already uploaded to the Media Library, our WordPress development company advises you to click the ‘Media Library’ option instead of ‘Upload’. Then simply select the GIF you need and it will be inserted.

Step 5: Tweak the GIF Size

Once the GIF has been placed as a media element, scroll down along the right side of the edit window and pick ‘Image Size’. Here’s a trick straight out from our WordPress developers. This one is super important. After you pick ‘Image Size’, the default setting sets it to ‘Large’, but we need to pick ‘Full Size’ for our GIFs to properly animate. Otherwise, they will appear as static images. This is why we told you it’s very important to pick the right size of your GIF in Step 1.

Animate Your WordPress Website With GIFs!

If you managed to perfectly follow these steps that our WordPress Agency for Development provided, the GIF should be ready for prime time. Load up the WordPress live preview and you can watch the GIF loop its animation on the page you just edited.

In case the GIF animation or looping seems broken and you are sure the original GIF isn’t wonky, Part 2 of our ‘GIFs for WordPress’ series will look at frequently asked questions and troubleshoot your misbehaving GIFs.

So now that your GIFs are all in place and working as they should, we’ll see you again in Part 2. Keep coming back for more WordPress info and guides and stay animated!