UPDATE: later the same day Much of my assumptions here were just that and pretty much wrong. Thanks to replies on the wordpress forum to my request from catacuastic, it looks like WordPress is not doing any native resizing (just cropping the original voa CSS) and its more complicated than I guessed to resize. Best suggestion still is ti upload the proper display size of your GIF (keep this size in mind when you create it).

The WordPress media uploader does a lot of work under the hood- when you upload an image, it automatically creates at least 3 different sized versions of your original- a thumbnail (usually 150x150px), a medium size (usually 300px x 300px), and large (1024px x 1024px):

media settings

plus it keeps your original size. All of these are available when you go to upload and add an image to a post. The medium size is frankly small, and I always change (and recommend) that you make this the width of the column that contains your post so it fills the space- this is why you see a lot of new blog with tiny pictures in them (well the newer themes are pretty good at sizing an image to the full width of the image is bigger).

It does this fine with JPG and PNG images, but sadly, it does not resize the images if you upload an animated GIF. So if you create an animated GIF that is like 500px wide, upload it to wordpress, and add it to your post, what you get is an animated single frame image.

An unanimated GIF is a sad thing ineed.

The trick is to know the size of your blog’s main column width, create the GIFs in that size, upload to wordpress, and use the original size when you insert it into your post. I wrote this up as a tip in the ds106 handbook along with a screencast:

At almost 7000 views it is one of the most viewed of my sad collection of YouTube videos, and that, IMHO says that this is a problem in WordPress.

The thing is… I have noticed that the WordPress media uploader does know how to generate an animated thumbnail sized version of animated gifs, because they are animated in the media library. Why does it not create all of the sizes? Hallo WordPress? To document this, I looked at the library for the Collaborative GIF story site, where all of the uploaded media are animated GIFs.

However, I noticed that they are not all animated as thumbnails — specifically, the animated gif thumbnails are generated only up GIFs that are smaller in width than the medium size (in this case 300px). So for animated GIFs that are smaller than 300px in width, WordPress generates an animated version of it as a thumbnail, but if the original is bigger, it does not generate an animated version in thumbnail size.

This seems (ahem) curiously inconsistent.

To make this more clear, I did some screen recordings of the media gallery, imported them into PhotoShop to make some animated GIF demonstrating this phenomena:

Original animated GIF smaller than the WP image size (300px)

(click the gif to see a bigger version)

(click the gif to see a bigger version)

Original animated GIF bigger than the WP image size (300px)

(click the gif to see a bigger version)

(click the gif to see a bigger version)

So WordPress is quite capable of generating different sized versions of an animated GIF, but it does not do so like other kinds of uploaded imager. Given the obvious popularity of animated gifs (cough tumblr) WordPress ought to make this more consistent and easier on their users who do not grok the way media sizes work.

UPDATE (5 minutes later):
The Animate GIF resize plugin seems to address this issue.. but IMHO this functionality should not require a plugin.

UPDATE (15 minutes later):
Put a request in to WordPress forums….

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Become a patron at Patreon!
Profile Picture for cogdog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Leave a Reply

Your email address will not be published. Required fields are marked *