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

Previewing post - GIF animation is visible and plays fine

---

Published, but something is missing

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

---

Published blog with an image error

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

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

Published post - GIF loaded and animation plays

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

The original file is only 2.7MB large

---

The missing GIF is only 1.4MB large