Animated GIFs in WordPress

How often have you tried uploading an animated GIF to your WordPress blog just to see that it doesn’t show the animation? Shouldn’t this issue be already solved and integrated into the core of WordPress since GIF’s insane rise in in the last 10 years?

It should all work smoothly, right?

 

It fu*ing won’t loop!

 

But it doesn’t and, here’s why: WordPress has a very good built-in logic – whenever you upload something through the Media uploader it automatically creates at least 3 different sized versions of your original image – a thumbnail (usually 150x150px), a medium size version (usually 300px x 300px), and a large copy (1024px x 1024px), plus – it keeps your original file. WordPress uses different sizes of your image on different places on your pages, depending on a required size. In this way, your site is more optimised and faster. So, basically, WordPress saves us a lot of time by doing this and it works great most of the time.

Well, at least it works great with .jpgs and .pngs.

However, if you upload a GIF, by resizing it, WordPress unintentionally 😀 kills the animation by saving just one frame of the GIF  and making it a static image. And that is why GIFs don’t move after being uploaded to WordPress blogs or sites. Simple, right?

What can you do about this? There are two solutions. One, when adding a GIF to your blog post ALWAYS choose full-sized (original) file that you uploaded. You can find this option on a right side of a Media Library once you select the image/gif. It is under “Attachment display settings”. See picture below.

 

screen-shot-2016-09-29-at-7-18-31-pm

Now, since you will be using original files, make sure they are not too heavy, otherwise you can have some trouble with loading of your pages.

Ok, now all the GIFs should be working properly everywhere. Yes, except in featured areas. Aham.

 

 

You can’t make GIFs move when you set them to be Featured images because logic we just described is no longer applicable. When inserting Feature image WordPress doesn’t give you option to choose file size. There is no “Attachment display settings” in Media Library anymore and your theme grabs a resized version of the image you uploaded. And that’s pretty much it.

But if you don’t want to give up so easily you can install some third-party plugins to do this job for you. There are some on the market and you even can find them for free.

Because we think WordPress should work much smoother with GIFs and because we, as a passionate GIF makers and true GIF fans, were frustrated so many times over not-moving GIFs, we created a GIF friendly theme. Check it out here: DAZE

Basically, what we did is to force WordPress that whenever it sees a .gif extension on a file uses the original file size. This means that GIFs now work everywhere: in single posts, on post lists as featured images, even in sliders! Off course, if you are using a lot of GIFs it would be wise to pay attention to the file sizes so you don’t slow down your site unintentionally.

Cheers!