How to Have an Animated Feature Image in Your Ghost Blog Post

An animated feature image is always eye-catching but Ghost only allows specific file types for header images. In this post we'll look at an easy way to attract readers with an animated feature image.

How to Have an Animated Feature Image in Your Ghost Blog Post

If I want to catch the eyes of a potential reader, the only chance is a header image and some words - I'm going to make all of that count by adding a dash of movement.

We'll first look at competing file formats then go through a worked example by seeing how I created the featured image for this post.

File Formats


The classic. They've been around for ages but aren't what they used to be due to limitations of:

  • No transparency
  • File size scales too harshly with image size and length

We can see an example of a gif performing poorly with my post Making a Living Dex: Part 7:

Making a Living Dex: Part 7 - Wrapping up the First 898
The final part of the original Living Dex project. Here I’ll reflect on both the good and bad of the project such as duration, cost, loves, and frustrations.

That header gif is only a couple of seconds long at 400x219 and ended up as a whopping 2.5mB! It will load 2.5mb on each preview (like above), on the posts page, and when read. We've got to do better.


I love how the web has adopted mp4 as the new "gif" standard. Way more efficient in size, can be encoded in all sorts of different ways to suit your needs, and can have sound.

I'd be using this type as my header except Ghost doesn't allow for it:

And if I try to add an mp4:

Meaning we have to keep looking.


An absolutely viable alternative if you're just using vector graphics. I used one in my post How I Added an Animation to the Browser Devtools Console:

How I Added an Animation to the Browser Devtools Console
You might have heard of colouring browser devtool console output with CSS or even using an image. But this post will take you through my journey of making an animated SVG and how I put it on my console window. Check out the dev tools yourself!

The animated header is about 10 seconds long, 760x400 and comes in at a tiny 11.8kB.

The only problem is is the vector part. Most images you see and videos you watch probably aren't being animated due to maths - but rather pixels being painted. Meaning the header you see for this post you're reading, didn't use SVG animations.


A newer file format from Google. It does great compression with either static or animated content. It supports transparency and can be lossy or lossless. Read about it here:

An image format for the Web | WebP | Google Developers
An image format for the Web.

Though it's still somewhat earlyish days for this file format, and with any change there is a little bit of growing pain:

Unhappy posts about the webp file format.

However, once all the normal image tooling understands this format (just like any other), we'll be fine. In fact, this is the file format we'll be using, and our tooling, including Ghost, understands and is just fine with this. We can see this from an earlier post of mine The Weird Things Roslyn Gets up To:

The Weird Things Roslyn Gets up To
Ever wanted to see some strange, interesting, and weird .NET behaviour and features? What about bizarre C# to baffle? If so, then welcome to this little curated and peculiar collection.

At a couple of seconds, 783x800, the header image weighs in at 210kB.

Now that we've picked out format, webp, time to get to creating!

Tool - ScreenToGif

ScreenToGif - Record your screen, edit and save as a gif or video
Free screen recorder tool. Record, edit and save as a gif or video.

Sure it has "Gif" in the name, but it does a lot more than that:

  • Want to show a video for troubleshooting? ✅
  • Want .gif, .mp4, .webp, mkv, mov? ✅
  • Want basic video editing? ✅
  • Want tools to help optimise and shrink your video? ✅

And so much more. For this post, we'll be using ScreenToGif to capture the video and write text on it for this header.

Step by Step Example

We'll recreate the feature image for this post. The video is for Words Like First Light by Levi Patel:

Step 1: Capture the video

I scoped out the part I wanted to grab - a lovely ocean shot. Then selected the area to record. It's a little larger than the video because it's easy enough to crop it later. The framerate has been set to 20fps because I won't be needing high frames for this purpose which saves on file size.

Step 2: Tidy frames

Here I:

  1. Remove excess frames from before and after the part I want
  2. Crop
  3. Resize
  4. Add text

A trick is to make sure all the frames are selected before applying changes - as it's completely valid for just a single selected frame to be up for editing.

Also keep in mind that this step is a major contributor to the final file size. If your file size is still too big, consider changing how many frames are in the video, or slightly reduce the width or height of the video.

Step 3: Export

When saving there are numerous options and in this case I used the advanced mode for creating my webp. This advanced mode shows the flags sent to ffmpeg - which does the actual encoding and saving.

I felt I could get away with 80% quality which made the file size even smaller. My settings ended up being:

-vsync passthrough 
-c:v libwebp_anim 
-lossless 0
-quality 80 
-loop 0 
-f webp 

And ultimately the result:

Final result

To Conclude

I hope this helps you get that attention grabbing featured image. Remember to to be considerate to your readers and be cautious around the size of the image. But otherwise, go nuts!

One day I'll be better at graphic design and make far cooler headers 💪

Check out more music by Levi Patel (I'm not sponsored 😁) either on his website, or on Spotify: