We’ve recently been investigating file formats to allow our animated 3D product photography to be optimised for different use cases, rather than just on the web. Currently our viewer loads 108 JPEGs of various sizes depending on the user’s device. In some situations, a javascript environment may not be available so we wanted to investigate alternative options.

We’ve done an analysis of some popular formats which may be better suited to different applications.

We’re really keen to hear prospective clients thoughts on this, please leave a comment if you want to see any other formats included or have an interesting use case you’d like to talk about.

Formats

GIF is the first format that springs to mind, but unfortunately, file sizes are huge for 36 frame images. While compression can be performed prior to GIF encoding, the format itself isn’t wonderful for a few other reasons. GIF doesn’t commonly allow for keyframes which makes seeking something of a problem in large images, and colour support is poor compared to modern formats.

Animated WebP is Google’s take on the problems inherent in GIF, the format does seem to offer a lot of advantages including 24-bit colour and 8-bit alpha along with real keyframe support allowing for good seeking performance.

We also looked at x264 and Google’s WebM video formats.

Encoding:

All our examples were generated from 108 frames at both 500x500px and 1000x1000px resolutions. Encoding commands were as follows:

The WebM encoding settings were chosen to roughly replicate the quality of lossy x264.

Results:

108 JPEG GIF WebP Lossless WebP Lossy x264 Lossy x264 Lossless WebM 500px 2.3M 7.6M 6.5M 1.1M 1.1M 5.2M 1.4M 1000px 6.8M 27.8M 26M 3.3M 3.6M 17.2M 2.4M

In both cases, GIF lost by a fair margin in terms of filesize, likely due to the simplistic compression scheme used (LZW). WebP is clearly a better format for lossless animations, with a reduction in filesize of 19% compared to GIF. GIF also uses a limited colour palette (256 colours) so colour reproduction will be better in WebP.

x264 also performed fairly well, even with minimal tweaking of encoding settings. There is very little visual difference between x264 and lossless WebP although the filesize of x264 was smaller than WebP.

Comparing lossy encodings, WebP and x264 were both roughly similar in filesize, giving around an 88% reduction compared to GIF. Interestingly, WebM was larger for the 500px version and smaller for 1000px.

Here are a few links to the output files if you’d like to compare. WebP versions are currently only supported by Chrome and Opera.

Analysis:

To compare these formats, a reasonably objective scoring system is employed.

Scored on:

Browser/device support: +1 per platform supported out of Android, iOS, Chrome, Firefox and IE. 10 points for universal support. Perceived Quality 0 - 5, relative to original JPEGs. File size +/- 5, relative to original JPEGs. Decoding performance, +/- 5 (approximate) relative to original JPEGs. These were analysed using ffmpeg decoders.

108 JPEG GIF WebP Lossless WebP Lossy x264 Lossy x264 Near Lossless WebM Browser Support 10 10 2 2 10 10 3 Perceived Quality 5 4 5 4 4 5 4 File Size 5 0 1 6 6 2 6 Decoding 5 4 3* 2* 4 0 4 Score 25 18 11 14 24 17 17

* Calculated using statistics from Google since ffmpeg’s WebP decoder doesn’t support animation.

Lossy x264 came out very well in this analysis, mainly due to universal support and small files of good quality. One other advantage is that x264 commonly enjoys hardware support on mobile platforms making decoding much faster.

At present we’re going to be sticking with JPEG since it forms a good balance between all measures whilst maintaining the critical universal browser compatibility which few of the others enjoy. Despite this, there are cases such as use in apps or producing video renders where it would be very useful to access the content in a more compressed format.

Coming Soon:

We’ll be rolling out some of these encoding schemes for Zoetrope Images in the near future, giving our customers a great choice of formats to use wherever they need. All of this and more will be available via our image API. We’re working on a very flexible platform to support all your 3D and 2D imaging websites and apps. If this is of interest to you, our developers mailing list signup form is below the comments.