Take a look at this image in Firefox or Opera. Now view it again in any other browser. Notice a difference?

In case you don’t have multiple browsers, here’s a screenshot of a side-by-side comparison of Firefox and Safari:

So how is it possible that this PNG file can magically detect what browser you’re using? Read on to find out.

Well the answer is that it actually can’t. It’s exploiting a feature that some browsers support but others do not.

The image is an APNG, or Animated Portable Network Graphics, file. The APNG standard was developed as a possible replacement to animated GIFs, with the intention of using the advantages of PNGs.

APNG isn’t an official standard, though. In fact, only Opera, Firefox, and Firefox derivatives currently support it. Safari, Chrome, Internet Explorer, and other browsers do not.

The APNG file mentioned at the beginning of this post has two frames. Browsers that do not support the animation only display the first, grey frame, whereas browsers that do switch to the second, indigo frame.

Interesting concept, eh? If you’re interested in the technicalities of it, you can read the APNG Specification at Mozilla.