Home > WordPress > How to Add Animated Gif in WordPress?

How to Add Animated Gif in WordPress?

If you are looking for a way to add animated gif images to your WordPress website then you are in right place. You can easily upload a gif image and show it. It is a very simple straightforward process.

GIF (Graphics Interchange Format) is a bitmap format image. It is a single image that has multi-frame motion that shows the animation in images.

GIF, we mainly used to get the visitor’s attention, so they can more engage with content. Sometimes when you have added the animated gif image in WordPress, it shows the normal static image instead animation. There could be many reasons like optimizing the gif, adjusting the size settings, not using the image block, etc.

In this article, we will learn about how to add animated GIF images in WordPress.

Adding Animated Gif in WordPress

To add animated gif images in WordPress, we will take the example of creating a new sample post and insert gifs in it.

Step 1: Create New Post

First, you need to create a new post or page to add the gif and then show it on the front.

Step 2: Add Image Block

When you open the post content editor, you need to add the image block by clicking on the + button, it will show you many blocks, search for an image block, and select.

Add image block in wp

Step 3: Upload Gif Image

After adding the image block in the post, you will see the upload image block like the following image.

Upload GIF in WordPress

There are three options to upload the animated GIF image in WordPress. From the first option “Upload”, you can directly upload a gif from your computer, and from the second option “Media Library”, you can select the gif image from the library if you already have uploaded it, and the last option “Insert from URL”, for upload directly image from the other URLs.

For this tutorial, we will use the first option to upload the gif from a computer, but you can use any option to upload.

Step 4: GIF Style and Size

When you successfully uploaded the GIF in your post, you will see the image block settings, style, and size on the right side.

GIF settings style size

Here you need to adjust the settings as you want. You can set the image style as round corners, borders, or with a frame, etc.

You can set the image size as a thumbnail, medium, and full size along with setting up the image width height or dimension with percentage.

Step 5: Save Post with GIF

After making all the changes you need to save the post. For this tutorial, we are going with the default settings. We also added some dummy content in the post and then Publish it.

Step 6: Display GIF in WordPress

After making it publish, click on the view post link and check how it looks like the animated gif in WordPress.

Fronted GIF View in WordPress

You can also add the animated GIF image as a featured image in WordPress. You can check this post’s featured image as a GIF.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment