Lateral Code
A Web Development Blog Focused on Code and Technology
Currently Browsing: Home » How Can This Image Detect My Browser!?
Streamlining MySQL Insert Queries »
« Under the Hood: Custom WordPress Pagination System
How Can This Image Detect My Browser!?
By Patrick Lin
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.
This entry was posted on Monday, December 27th, 2010 at 06:03:48. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
- RSS
- Tweet this!
- Delicious
- DFloat
- DMoo
Leave a Reply
Click here to cancel reply.
Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.