simple javascript for detecting WebP

524 views
Skip to first unread message

Pascal Massimino

unread,
May 23, 2013, 10:15:30 AM5/23/13
to WebP Discussion
Hi,

i'd like to add to the webp FAQ a very simple JS script to detect webp features, for reference.

Here's what i was thinking of:

<script language="javascript">
// 'feature' can be one of 'lossy', 'lossless' or 'alpha'.
// callback(result) will be passed back the detection result
function check_webp_feature(feature, callback) {
  var kTestImages = {
    // VP8  (lossy.webp)
    lossy:    "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    // VP8L  (lossless.webp)
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    // VP8X+ALPH+VP8  (alpha.webp)
    alpha:    "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
  };
  var img = new Image();
  img.src = "data:image/webp;base64," + kTestImages[feature];      
  img.onload = img.onerror = function() {
    var result = (img.width == 1) && (img.width == 1);    
    callback(result);
  }
}
</script>

(tested it on most browsers, including the webp-enabled mozilla-central-webp fork).

i'm attaching the small webp files i used there, for completeness.

Any objections? Is there anything wrong, overlooked or missing in the script?

For completeness, here's an HTML body example you can toy with to make use of the script:

<body>
<h3>Javascript-based WebP detection</h3>

<form name="webp_form">
  <input type="button" name="test" value="click to check webp features"
     onClick="check_webp_feature('lossy', function(result) { document.forms.webp_form.lossy.checked = result; });
              check_webp_feature('lossless', function(result) { document.forms.webp_form.lossless.checked = result; });
              check_webp_feature('alpha', function(result) { document.forms.webp_form.alpha.checked = result; });
             "><br/>
<input type="checkbox" name="lossy"> lossy<br>  
<input type="checkbox" name="lossless"> lossless<br>
<input type="checkbox" name="alpha"> alpha+lossy<br>
</form>
</body>
 
I'll check that in in the FAQ in few days unless something is wrong, so please comment if needed!
thx,
skal

alpha.webp
lossless.webp
lossy.webp

James Zern

unread,
May 23, 2013, 2:17:34 PM5/23/13
to webp-d...@webmproject.org


On Thursday, May 23, 2013 7:15:30 AM UTC-7, skal wrote:
Hi,

i'd like to add to the webp FAQ a very simple JS script to detect webp features, for reference.

Here's what i was thinking of:

<script language="javascript">
// 'feature' can be one of 'lossy', 'lossless' or 'alpha'.
// callback(result) will be passed back the detection result
function check_webp_feature(feature, callback) {
  var kTestImages = {
    // VP8  (lossy.webp)
    lossy:    "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    // VP8L  (lossless.webp)
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    // VP8X+ALPH+VP8  (alpha.webp)
    alpha:    "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
  };
  var img = new Image();
  img.src = "data:image/webp;base64," + kTestImages[feature];      
  img.onload = img.onerror = function() {
    var result = (img.width == 1) && (img.width == 1);    

height
Message has been deleted
Message has been deleted

Urvang Joshi

unread,
Nov 22, 2013, 9:12:29 PM11/22/13
to webp-d...@webmproject.org
Hi all,
Now that Chrome 32 beta supports animated WebP, we could detect support for animated WebP too.

The smallest one that I could create is a single-frame animation: VP8X + ANIM + ANMF, with ANMF containing a VP8L chunk (This frame is the same 1x1 image 'lossless.webp'). Attaching the image here for reference.

And the base64 string (121 bytes) is:
UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA

Here's a sample webpage with check for animation support added: http://ref.pssplayground.com/urvang/detect_webp_support.html
Checked OK on Chrome 31 & 32, Opera 12 and Firefox.


--
You received this message because you are subscribed to the Google Groups "WebP Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webp-discuss...@webmproject.org.
To post to this group, send email to webp-d...@webmproject.org.
Visit this group at http://groups.google.com/a/webmproject.org/group/webp-discuss/?hl=en.
For more options, visit https://groups.google.com/a/webmproject.org/groups/opt_out.
 
 

anim.webp

Urvang Joshi

unread,
Nov 25, 2013, 9:54:46 PM11/25/13
to webp-d...@webmproject.org
On Fri, Nov 22, 2013 at 6:12 PM, Urvang Joshi <urv...@google.com> wrote:
Hi all,
Now that Chrome 32 beta supports animated WebP, we could detect support for animated WebP too.

The smallest one that I could create is a single-frame animation: VP8X + ANIM + ANMF, with ANMF containing a VP8L chunk (This frame is the same 1x1 image 'lossless.webp'). Attaching the image here for reference.

And the base64 string (121 bytes) is:
UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA

Here's a sample webpage with check for animation support added: http://ref.pssplayground.com/urvang/detect_webp_support.html

Reply all
Reply to author
Forward
0 new messages