How to add GIF to WordPress
Table of contents
GIFs are a fun way to present content to the readers that also caters to their short attention span. They break the monotony of the countless lines of text and work better than a static image to engage the audience. They are a great way of grabbing the website visitor’s attention and generally have a stronger emotional impact. They can also serve as useful tools for marketing and advertising.
Like the JPEG or PNG formats, GIFs can also be used for static images, but they offer a fairly limited number of colours. A GIF or a Graphics Interchange Format is a file type that allows 8 bits per pixel of the image and up to 256 colours, as opposed to a JPEG file that displays up to 16 million colours. Since GIFs cannot render high-quality images, their usage is suited for logos and web images that require fewer colours and have distinct sharp edges and lines.
GIFs are also used to display animated images.
The GIF file format can hold multiple images at once which can be loaded sequentially to give the impression of a short video. This makes GIFs suited to display animated images and are used extensively to share funny memes online. Memes have become an integral part of emoting and communicating online. Seriously, try imagining the internet without memes!
Sounds so disheartening and bizarre!
GIFs have become so entrenched in our lives that we can probably easily describe one without ever getting to a unanimous conclusion about its pronunciation.
g-IF? or j-IF?!
We don’t mean to stir the pot but… maybe… let’s hear you say the word?
Too much?
Okay, let’s stick to the intended purpose of this article and help you add some fun GIF elements to your WordPress site.
In the subsequent sections of this article, we will dive deep into the process of adding your own GIF to WordPress blog posts. We will look at two simple ways to achieve this:
1. Using the WordPress Editor
2. Using a WordPress Plugin
1. Using the WordPress Editor
Before we begin, let’s address a common issue faced with GIFs: animated GIFs often render like static images. When an image is uploaded to the WordPress library, copies of that image are generated in various sizes. For a GIF, WordPress creates resized versions of only the first frame of the GIF, skipping the other constituent images and therefore, renders a static image. To avoid this, stick to the full-size image in the attachment display settings when adding the GIF.
In this article, we have used the Gutenberg Editor (Block Editor) to add GIFs to WordPress posts. You can use any text editor like the Classic Editor, or any other Page builder.
The following steps will walk you through the process:
1. From the WordPress dashboard, open up a new post or an existing post where you want to add the GIF.
2. In the WordPress Block editor, find and add a new Image block. Click on the Upload Button to add the new image to the WordPress media library and insert it into the post. While uploading, you will see an option to insert the file from a URL. We would not recommend this method as it sources the image from a specified link. The image will not be uploaded to the WordPress library, and you risk losing access to the image in future.
3. Once the image is added to the post, a menu on the right will display the image settings of the gif. Scroll to the image size option. As discussed, select the ‘ full size’ option to display the animated image correctly. You should be able to see the GIF animation preview right away.
4. Publish or Update the post and the GIF should render correctly on the post.
Note: You can also use the easy steps described above to add GIFs to a WordPress page.
2. Using a Plugin
Most plugins that allow you to add GIFs are generally premium plugins that can be quite expensive. In this section, we will look at two plugins to add an animated GIF image.
The manual method of adding GIFs requires you to look for images (on GIPHY or Tenor), download them and add them to the WordPress website. Instead, you can also use a free plugin like GIFMaster to search and add GIFs without leaving the WordPress interface. Once activated, the plugin displays an ‘Add GIF’ button in the post/page editor. The button leads to a popup from where you can search and insert the animated GIF image.
Another plugin that you could try, if you don’t mind paying $25, is Hyena. This plugin offers 100 seamless tiles and 6 customizable skins to create animated GIFs that you can easily add to your website. It allows you to create a custom player and set the event trigger to play the GIF. The plugin displays the gif in a responsive layout and can also customise the featured image of a post.
Which method to use?
GIF images can make your content more interactive and easy to grasp. They can be a fun addition to your WordPress website and attract more visitors.
In this article, we discussed two easy ways to add animated GIFs. We would strongly recommend you use the WordPress editor to add GIFs. The manual process is fairly straightforward and simple. Moreover, GIFs contain a series of images to deliver the animation, which also contributes to their large file size. Large GIFs will take more time to load and can slow down the web page. A plugin in addition to this isn’t a great choice. We would also suggest you optimise the original image before using it on the website.
We hope you enjoyed this article and found it useful. We’ll be back with more helpful tricks to jazz up your website. Until then…
