Mailing List
Articles Atom Feed
Comments Atom Feed
Twitter
Reddit
Facebook
Animated PNG for all!
I recently discovered that Animated PNGs are now supported by most major browsers:
I stumbled across the concept of an animated PNG a number of years ago (on caniuse.com actually if I remember right!), but at the time browser support was very bad (read: non-existent :P) - so I moved on to other things.
I ended up re-discovering it a few weeks ago (also through caniuse.com!), and since browser support is so much better now I decided that I just had to play around with it.
It hasn't disappointed. Traditional animated GIFs (Graphics Interchange Format for the curious) are limited to 256 colours, have limited transparency support (a pixel is either transparent, or it isn't - there's no translucency support), and don't compress terribly well.
Animated PNGs (Portable Network Graphics), on the other hand, let you enjoy all the features of a regular PNG (as many colours as you want, translucent pixels, etc.) while also supporting animation, and compressing better as well! Best of all, if a browser doesn't support the animated PNG standard, they will just see and render the first frame as a regular PNG and silently ignore the rest.
Let's take it out for a spin. For my test, I took an image and created a 'panning' animation from one side of it to the other. Here's the image I've used:
(Credit: The background on the download page for Mozilla's Firefox Nightly builds. It isn't available on the original source website anymore (and I've lost the link), but can still be found on various wallpaper websites.)
The first task is to generate the frames from the original image. I wrote a quick shell script for this purpose. Firstly, I defined a bunch of variables:
#!/usr/bin/env bash
set -e; # Crash if we hit an error
input_file="Input.png";
output_file="Output.apng"
# The maximum number of frames
max_frame=32;
end_x=960; end_y=450;
start_x=0; start_y=450;
crop_size_x=960; crop_size_y=540;
mkdir -p ./frames;| Variable | Meaning |
|---|---|
input_file |
The input file to generate frames from |
output_file |
The file to write the animated png to |
max_frame |
The number of frames (plus 1) to generate |
start_x |
The starting position to pan from on the x axis |
start_y |
The starting position to pan from on the y axis |
end_x |
The ending position to pan to on the x axis |
end_y |
The ending position to pan to on the y axis |
crop_size_x |
The width of the cropped frames |
crop_size_y |
The height of the cropped frames |
It's worth noting here that it's probably a good idea to implement a proper CLI to this script at this point, but since it's currently only a one-off script I didn't bother. Perhaps in the future I'll come back and improve it if I find myself needing it again for some other purpose.
With the parameters set up (and a temporary directory created - note that you should use mktemp -d instead of the approach I've taken here!), we can then use a for loop to repeatedly call ImageMagick to crop the input image to generate our frames. This won't run in parallel unfortunately, but since it's only a few frames it shouldn't take too long to render. This is only a quick shell script after all :P
for ((frame=0; frame <= "${max_frame}"; frame++)); do
this_x="$(calc -p "${start_x}+((${end_x}-${start_x})*(${frame}/${max_frame}))")";
this_y="$(calc -p "${start_y}+((${end_y}-${start_y})*(${frame}/${max_frame}))")";
percent="$(calc -p "round((${frame}/${max_frame})*100, 2)")";
convert "${input_file}" -crop "${crop_size_x}x${crop_size_y}+${this_x}+${this_y}" "frames/Frame-$(printf "%02d" "${frame}").jpeg";
echo -ne "${frame} / ${max_frame} (${percent}%) \r";
done
echo ""; # Move to the line after the progress indicatorThis looks complicated, but it really isn't. The for loop iterates over each of the frame numbers. We do some maths to calculate the (x, y) co-ordinates of the frame we want to extract, and then get ImageMagick's convert command to do the cropping for us. Finally we write a quick progress indicator out to stdout (\r resets the cursor to the beginning of the line, but doesn't go down to the next one).
The maths there is probably better represented like this:
$this_x=start_x+((end_x-start_x)*\frac{currentframe}{max_frame})$
$this_y=start_y+((end_y-start_y)*\frac{currentframe}{max_frame})$
Much better :-) In short, we convert the current frame number into a percentage (between 0 and 1) of how far through the animation we are and use that as a multiplier to find the distance between the starting and ending points.
I use the calc command-line tool (in the apcalc package on Ubuntu) here to do the calculations, because the bash built-in result=$(((4 + 5))) only supports integer-based maths, and I wanted floating-point support here.
With the frames generated, we only need to stitch them together to make the final animated png. Unfortunately, an easy-to-use tool does not yet exist (like gifsicle for GIFs) - so we'll have to make-do with ffpmeg (which, while very powerful, has a rather confusing CLI!). Here's how I stitched the frames together:
ffmpeg -r 10 -i frames/Frame-%02d.jpeg -plays 0 "${output_file}";-r- The frame rate-i- The input filename-plays- The number of times to loop (0= infinite; defaults to no looping if omitted)"${output_file}"- The output file
Here's the final result:
(Filesize: ~2.98MiB)
Of course, it'd be cool to compare it to a traditional animated gif. Let's do that too! First, we'll need to convert the frames to gif (gifsicle, our tool of choice, doesn't support anything other than GIFs as far as I'm aware):
mogrify -format gif frames/*.jpegEasy-peasy! mogrify is another tool from ImageMagick that makes such in-place conversions trivial. Note that the frames themselves are stored as JPEGs because I was experiencing an issue whereby each of the frames apparently had a slightly different colour palette, and ffmpeg wasn't smart enough to correct for this - choosing instead to crash.
With the frames converted, we can make our animated GIF like so:
gifsicle --optimize --colors=256 --loopcount=10 --delay=10 frames/*.gif >Output.gif;Lastly, we probably want to delete the intermediate frames:
rm -r ./framesHere's the animated GIF version:
(Filesize: ~3.28MiB)
Woah! That's much bigger.
(Generated (and then extracted & edited with the Firefox developer tools) from Meta-Chart)
It's ~9.7% bigger in fact! Though not a crazy amount, smaller resulting files are always good. I suspect that this effect will stack the more frames you have. Others have tested this too, finding pretty similar results to those that I've found here - though it does of course depend on your specific scenario.
With that observation, I'll end this blog post. The next time you think about inserting an animation into a web page or chat window, consider making it an Animated PNG.
Found this interesting? Found a cool CLI tool for manipulating APNGs? Having trouble? Comment below!
