APNG Feature Detection
2009 March 3
I have made a simple script that utilizes the HTML5 <canvas> API in only 9 functional lines of JavaScript to detect if a browser supports APNG images. It can be useful for deciding when to serve a client browser APNG images instead of GIF images.
This will set the variable, apng_supported to true if the browser supports APNG.
I have also created a demo that uses this script.
(function(_global) { var apng_test = new Image(), ctx = document.createElement("canvas").getContext("2d"); apng_test.src = "apng-test.png"; // a data URI will cause a security error so you _have_ to link to an external resource // frame 1 (skipped on apng-supporting browsers): 0,0,0,255 // frame 2: 0,0,0,0 apng_test.onload = function() { ctx.drawImage(apng_test, 0, 0); _global.apng_supported = ( ctx.getImageData(0, 0, 1, 1).data[3] == 0 ); } })(this);
Due to a stupid restriction of on loading image data from an image that uses a data URI you will need to download apng-test.png (157 bytes) and put its location in the script.
I just recently found a way to make PNG-8 files that degrade (like GIF) files for IE6.
http://commadot.com/png-8-that-acts-like-png-24-w...
Sorry, my bad. I thought this was about PNGs versus APNGs. Reading a little bit too quickly.
Better demo would be to show AGIF / APNG depending on browser support.
Have anyone found another way to test for apng support?
I'm in a situation where I can't use this because I can't host the test image in the same domain as the html.
Hosting an APNG image on an external server but serve it with an <code>Access-Control-Allow-Origin: *</code> header should work.
If I have "Load images automatically" option turned off, Firefox reports "APNG Supported: No".