Re: Detect supported browsers

313 views
Skip to first unread message

Urvang Joshi

unread,
Aug 31, 2012, 7:58:48 AM8/31/12
to webp-d...@webmproject.org
Hi Michael,
I'm not sure what is the *best* way, but here's one way of detecting the same on the client side:

Anyone has better ideas?

Regards,
Urvang



On Fri, Aug 31, 2012 at 5:00 PM, <mse...@gmail.com> wrote:
Hi,
i'm thinking about using WebP in my mobile website. 
What is the best (and fastest) way to detect if the browser supports WebP or if a fallback image (png/jpeg) should be used?
Thanks,
Michael

--
You received this message because you are subscribed to the Google Groups "WebP Discussion" group.
To view this discussion on the web visit https://groups.google.com/a/webmproject.org/d/msg/webp-discuss/-/xqU_yAIiPZwJ.
To post to this group, send email to webp-d...@webmproject.org.
To unsubscribe from this group, send email to webp-discuss...@webmproject.org.
For more options, visit this group at http://groups.google.com/a/webmproject.org/group/webp-discuss/?hl=en.

Pascal Massimino

unread,
Aug 31, 2012, 8:30:56 AM8/31/12
to webp-d...@webmproject.org
Hi,

On Fri, Aug 31, 2012 at 4:58 AM, Urvang Joshi <urv...@google.com> wrote:
Hi Michael,
I'm not sure what is the *best* way, but here's one way of detecting the same on the client side:

note that there's few typos in this page ("testWepP", "===", missing "callback" parameter...) .

Also: one may want to test 0.2.0 explicitly, using a lossless image.src base64 data.

Here's a corrected example HTML script:

<!DOCTYPE html>      
<title>WebP 0.2.0 detection</title>
<script>
  function testWebP(callback) {
    var webP = new Image();
    webP.src = "data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw"
             + "AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA";
    webP.onload = webP.onerror = function () { callback(webP.height == 2); };                       
  }
  window.onload = function() {
    testWebP(function(supported) {
               alert("WebP 0.2.0 " + (supported ? "supported!"  
                                                : "not supported.")); }
            );
  }
</script>
<body>detecting...</body>
</html>


This script tests for 0.2.0.
For testing the 'old' 0.1.0 -> 0.1.3 versions (only lossy), one could use instead:

webP.src = "data:image/webp;base64,UklGRjAAAABXRUJQVlA4ICQAAACyAgCdASoCAAIAL/3+/3+pqampqYH8SygABc6zbAAA/m1AAAA="

Frédéric Kayser

unread,
Aug 31, 2012, 6:03:31 PM8/31/12
to webp-d...@webmproject.org
The smallest WebP lossless file I could get took only 34 bytes, if I decoded the base64 string correctly yours is 54 bytes long (a nearly transparent black 4x4 square).
A black 1x2 lossless WebP file is only 34 bytes long, and gives this base64 string: UklGRhoAAABXRUJQVlA4TA4AAAAvAEAAAAcQEf0PRET/Aw== which is shorter.
small.webp

Frédéric Kayser

unread,
Aug 31, 2012, 6:06:53 PM8/31/12
to webp-d...@webmproject.org
2x2 square, sorry, brain did the math

Pascal Massimino

unread,
Sep 17, 2012, 10:28:22 AM9/17/12
to webp-d...@webmproject.org
Hi,

On Sun, Sep 2, 2012 at 11:45 PM, <mse...@gmail.com> wrote:
Thank you guys! :)


i just noticed the "Modernizr" project has a very similar detection routine, too:

 
(check out this article, btw: http://www.html5rocks.com/en/mobile/high-dpi/)

--
You received this message because you are subscribed to the Google Groups "WebP Discussion" group.
To view this discussion on the web visit https://groups.google.com/a/webmproject.org/d/msg/webp-discuss/-/-cWQhw5gJ_QJ.
Reply all
Reply to author
Forward
0 new messages