Animated Images

ManaKeep allows you to use 3 animated image formats on your game site.  Here is a quick rundown of the benefits and drawbacks of each format, and how you can create then from a video you recorded of your game footage.

For all of these examples, we will be using the ffmpeg program, which is a command line tool that allows you to convert between many video and image formats.  You can download ffmpeg here.

Animated GIF

You can use gifs to show your game footage, which is a well known format with great browser support.  However it has the drawbacks of a 256 color limit, lower quality, and large filesizes.

To create a high quality gif, you should first create a palette of colors to use from your video; you can do this with the following command:

ffmpeg -ss 30 -t 5 -y -i input.flv -i palette.png -filter_complex "fps=10,scale=1080:-1:flags=lanczos[x];[x][1:v]paletteuse" output.gif

Then create your actual gif using the palette:

ffmpeg -ss 30 -t 5 -y -i input.flv -i palette.png -filter_complex "fps=10,scale=1080:-1:flags=lanczos[x];[x][1:v]paletteuse" output.gif

To explain a few of the flags used here:

  • ss: the start time in seconds you want to record from
  • t: the amount of time in seconds you want to record
  • i: the input file you are converting from (any video)

Animated PNG (APNG)

A lesser known but better option for animations is apng.  This uses the png format, allowing 24-bit color, transparency, and high quality. It also has great browser support, working in Firefox, Chrome, Safari, Android, and iOS.  Where it is not supported (IE), it falls back to a static png, so is pretty safe to use.

To create an apng from your video, use the following command:


ffmpeg -i input.flv -ss 20 -t 5 -y -plays 0 output.apng

By default apng do not loop.  To make them loop I added the "plays" flag here, -plays 0 means loop infinitely.


Animated WebP

The newest option, webp is an image format created by google.  This format has great quality with very small filesizes, as it uses the VP8 codec to compress keyframes.  WebP also has good browser support, working in Firefox, Chrome, IE, and Android.  Where it is not supported (iOS), a broken image will be shown.

Depending where and how you are using WebP, you can add your own fallback image.  Here is an example of an easy way to do this with html (ex if using on your blog or your own html blocks):


<img src="https://www.gstatic.com/webp/gallery/1.webp" onerror="this.onerror=null; this.src='https://www.gstatic.com/webp/gallery/2.jpg'">

And here is a way to do this with css (ex if using as a background image):

#header {
  background-image:image("https://www.gstatic.com/webp/gallery/1.webp", "https://www.gstatic.com/webp/gallery/2.jpg");
}

To create a webp from your video, use the following command:


ffmpeg -i input.flv -ss 25 -t 5 -y -loop 0 output.webp

By default webp does not loop.  To make it loop I added the -loop 0 flag, which means loop infinitely.


Using with ManaKeep

Once you have your animated images ready for use, simply load up the ManaKeep editor and drag-and-drop (or click) the elements you want to add them to.  You can use these as your header background, as any of the image elements, and in your blog posts.

ManaKeep currently has a 16MB filesize limit on your images, so be sure your animations are smaller than this.