How to Add Click to Load for GIFs in WordPress

Do you want to add a click to load GIF player on your WordPress website? Animated GIF images take longer to load which affects page speed and user experience. That’s why many popular blogging platforms don’t auto-load GIFs in their apps. In this article, we… Read More »

The post How to Add Click to Load for GIFs in WordPress appeared first on WPBeginner.

Do you want to add a click to load GIF player on your WordPress website? Animated GIF images take longer to load which affects page speed and user experience. That’s why many popular blogging platforms don’t auto-load GIFs in their apps. In this article, we will show you how you can easily add click to load for GIFs in WordPress.

Adding click to load for Gifs in WordPress

Why Add Click to Load for GIFs in WordPress?

If you often add animated GIF images in WordPress, then you already know that they are way larger in size than regular images. This means they take longer to load which affects your website speed and performance.

Some websites deal with this by lazy loading images in WordPress. However, this still affects users experience because GIFs take longer to load as the user scrolls down.

Popular platforms like Tumblr and others use click to load GIF player to mitigate this problem. Instead of loading all frames in a GIF animation, they load just the first frame of the animation. A play button or GIF label on the image indicates that users can click to view the animated GIF.

Paused GIF example

That being said, let’s take a look at how you can add click to load button for GIFs on your WordPress website.

Adding Click to Load for GIFs in WordPress

First thing you need to do is install and activate the WP GIF Player plugin. For more details, see our step by step guide on how to install a WordPress plugin.

This plugin works out of the box, and there are no settings for it.

You can head over to the post edit screen to see it in action.

Add GIF button in WordPress post editor

On the post edit screen, you will notice the Add GIF button above the post editor. Clicking on it will bring up the media uploader popup where you can upload your GIF images similar to any other image.

Upload GIFs using the Add Gif button

Once uploaded, you need to click on the Insert image button to continue.

The WP GIF player plugin will now add the required shortcode in your WordPress post editor.

GIF shortcode in WordPress post editor

You can now save your post/page and click on the preview button to see your click to load GIFs in action.

All the GIFs embedded on your post will now have a button on top of them labeled GIF. Clicking on the button will load the animated GIF in the background and display it.

Click to play animated GIF

One downside of this plugin is that it only works for the new GIFs that upload. It will not add click to load for GIFs uploaded using the normal WordPress media uploader. This means all your previously uploaded GIFs will not have the click to load button.

We hope this article helped you learn how to add the click to load GIFs player in WordPress. You may also want to see our guide on how to fix common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Click to Load for GIFs in WordPress appeared first on WPBeginner.

How to Add GIFs from Giphy in WordPress Using Giphypress

Do you want to add animated GIFs in your WordPress site? Giphy makes it easy to search, discover, and share animated Gifs on the web, in text messages, and on social media. In this article, we will show you how to easily add animated GIFs… Read More »

The post How to Add GIFs from Giphy in WordPress Using Giphypress appeared first on WPBeginner.

Do you want to add animated GIFs in your WordPress site? Giphy makes it easy to search, discover, and share animated Gifs on the web, in text messages, and on social media. In this article, we will show you how to easily add animated GIFs from Giphy in WordPress using Giphypress.

Giphy for WordPress

Pros and Cons of Using Animated GIFs in WordPress

You must have seen animated GIFs being used on popular websites like BuzzFeed, List25, Reddit, etc. GIFs allow you to add animated reactions, amusing anecdotes, and pop culture references to your articles.

The reason why GIFs are so popular is because they are fun and highly engaging. They allow you to boost the time users spend on your website. Articles with Gifs are also more likely to be shared and become viral.

The downside of animated GIFs is that they can slow down your website, and it can take a lot of time to create your own.

That’s when Giphy comes in.

Giphy allows you to find and share Gifs

Giphy is a popular website that makes it easier for you to find and share animated GIFs. It has thousands of GIF images stored in categories and sorted by hashtags.

If you are on shared WordPress hosting, then serving your GIFs via Giphy will save you bandwidth. It will also have a less impact on pagespeed and user experience on your website.

Having said that, let’s take a look at how to easily add GIFs from Giphy in WordPress using Giphypress.

Adding GIFs from Giphy in WordPress Posts and Pages

First thing you need to do is install and activate the Giphypress plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to create a new post or page. On the post editor, you will notice a new button labeled ‘GIPHY GIF Search’.

Giphy button in WordPress post editor

Clicking on the button will bring up the Giphy search in a popup. You will see the recent and trending GIFs along with menu and search bar at the bottom.

You can browse or search for GIFs to find the perfect GIF for the moment.

Search or browse Gifs on Giphy

Once you have found a GIF, click on it for a larger view. Now you can click on the Embed into Post button to add the GIF into your article.

Embed Giphy

Giphypress will now embed the GIF as an iframe into your post. You can save to update your post and view the GIFs in action.

Gif from Giphy embeded into a WordPress post

We hope this article helped you learn how to easily add GIFs from Giphy in WordPress using Giphypress. You may also want to see our guide on how to find royalty free images for your WordPress blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add GIFs from Giphy in WordPress Using Giphypress appeared first on WPBeginner.