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 prepare animation for the web
• How to adding animated gif to WordPress
• Add a hosted gif image

Prepare Animated Gif

You can use an online platform like Giphy to create your gif. However, different programs save gif animations in different ways. You will have to check the export settings and make sure the animation is set to repeat in your preferred fashion. You can have an animation repeat for a predetermined amount of cycles or to an endless loop.

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.