Sign in
Log inSign up

Improve Animated GIF handling

Denny Trebbin's photo
Denny Trebbin
·Oct 20, 2020·

2 min read

I noticed some issues with GIFs in blog posts.

While in the writing phase, GIFs play fine and nice in Preview and in Shared Draft. After publishing, some of the GIFs never finish loading; others do.

Here is an example from my recent blog post.

GIF shows in the writing phase

image.png Previewing post - GIF animation is visible and plays fine


Published, but something is missing

image.png

Published post - empty space - the reader can't see that something is loading here


Published blog with an image error

image.png Published post - Image error - after waiting for minutes, my browser shows a broken image icon. Happens in Chrome, Safari, Firefox, and Mobile Safari.

Edited: Replacing the GIFs with newly and manually optimized versions doesn't change the result. I reduced the first GIF from 4.5MB down to 2.7MB and the 2nd GIF from 2.8MB down to 1.4MB. I thought the initial file sizes are an issue - but it turns out even with the new smaller file I see this behavior.


Checking with DevTools

image.png After 1.8 minutes (108secs), Chrome receives a 503 server error response. The times vary, so I guess something is odd on the backend side.


Some GIFs work fine, but the 'optimized' file size is almost 4 times larger than the original file

image.png Published post - GIF loaded and animation plays


image.png DevTools reveal a successful download of an 8.9MB large 'optimized' file


image.png The original file is only 2.7MB large


The missing GIF is only 1.4MB large

image.png