How To Add Animated GIF To WordPress Image Block

Animated Gif Image to WordPress

Animated GIF images have been on the internet since personal home pages became popular. 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. Adding an animated GIF to WordPress can be done with a simple image block and through images from a hosted site like Giphy.

Using animated GIF images can save resources because they are much smaller than normal animation files. As a result, GIF images can help lower resource usage and improve website performance. Additionally, animated GIF images are often more visually appealing than static images, making them a great choice for sites where you want to stand out from the crowd.

How to Add an 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. The steps to add an animated GIF is identical to how you add images to WordPress.

  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
    Plus sign to create block in Gutenberg
  4. Upload your GIF image

You will now have your GIF image in the post. The animated GIF image should be set to “full size” dimensions under the block settings as you can see below. Previous versions of WordPress would not show the animation of the GIF in action unless you had published it. However, WordPress 6.0 and later have the animations working in the editor or in preview.

Make sure that the image is set to full size.

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 image, can slow down your site.

How to Add a Hosted Animated GIF

As mentioned above, there are hosted sites, like 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
    Plus sign to create block in Gutenberg
  4. Select the GIF block
  5. Paste the URL of your hosted image in the field
    Jetpack GIF block

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.

Check out other tutorials on using Blocks in WordPress!

If you need a new home for your WordPress site, look no further than InMotion’s WordPress Hosting solutions for secure, optimized, budget-friendly servers.

Fast & Easy Transfers    Free SSLs    Hack Protection    Affordable

View WordPress Hosting Plans

AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!