How To Add Animated Gif To WordPress Image Block

Animated gif images have been on the internet since personal home pages became popular. They fell out of fashion for a while but they seem to be everywhere again. Using gif images on your site can be a fun and easy way to bring some dynamic graphics to your site while keeping your resource usage low. But adding a gif image to WordPress is not as simple as uploading it and displaying it. In this article, you’ll learn how to properly include animated gif images in a WordPress image block and from a hosted site like Giphy.

• How to adding animated gif to WordPress
• Add a hosted gif image

Gif images are typically much smaller in size that large static images, and only require the server to process the image once. As a result, using gif images can help to lower resource usage and improve website performance. Additionally, gif images are often more visually appealing than static images, making them a great choice for sites that want to stand out from the crowd. So if you’re looking for ways to lower resource usage on your WordPress site, consider using gif images instead of static images. You may be surprised at the difference it makes.

Adding Animated Gif To WordPress

Once you have created an animated gif that matches your specifications, it’s time to add it to your WordPress media library. If you are familiar with how to add images to WordPress, the process here is the same, until you have added the image.

1. Log in to the WordPress dashboard
2. Select a post or page to edit, or create new content
3. Use the + sign to add an image block
   
4. Upload your gif image

You will now have your gif image in the post. But if you preview the post you will notice the animation is not working. The image is still. This is because WordPress creates multiple images when you upload a single image, and different dimensions for each image.

To animate the image you must select the “full size” dimensions under the block settings:

You will now notice your animation behaving as expected.

Remember, while a few gifs can help make your site more interesting, having too many animations, like any kind of image, can slow down your site.

Add a Hosted Image

As mentioned above, there are hosted sites, Giphy, where you can upload your own animations and share them. These can also be used in your WordPress site. The only difference is instead of uploading your image you will use the URL.

If you are using the Jetpack plugin, you actually have access to a gif image block.

1. Log in to the WordPress dashboard
2. Select a post or page to edit, or create new content
3. Use the + sign to add an image block
   
4. Select the GIF block
5. Paste the URL of your hosted image in the field
   

Well done! You now know how to add dynamic gif animations to your WordPress site. If you have any questions or comments feel free to drop them below.