Yet Another Image Format: Google's "WebP"

Frenzie · Post by **Frenzie** » October 10th, 2010, 3:21 am

If you've got a sample APNG and GIF image I'll slap it all together in a working form over lunch - although I could probably find something on the web too.

maxst · Post by **maxst** » October 10th, 2010, 3:34 am

You can use these:

http://animatedpng.com/index.php/sample ... 8bit-apng/

And thanks!

Frenzie · Post by **Frenzie** » October 10th, 2010, 3:51 am

Code: Select all

<!DOCTYPE html>
<title>apng-detect.js image swapping Demo</title>
<script src="http://code.eligrey.com/apng-detect/apng-detect.js"></script>
<script>
//<![CDATA[
if (typeof apng_supported !== "boolean") {
   var apng_supported = false;
}
document.addEventListener('DOMContentLoaded',function(){
   if (apng_supported) {
      var images = document.images;
      for (var i=0; i<images.length; i++) {
         if (images[i].src.indexOf('clock.gif') != -1)
            images[i].src = 'http://animatedpng.com/wp-content/uploads/clock.png';
      }
   }
}, false);
//]]>
</script>
<img src="http://animatedpng.com/wp-content/uploads/clock.gif">

Note of course that you shouldn't hotlink the script (or the images) if you decide to use it somewhere.

maxst · Post by **maxst** » October 10th, 2010, 5:14 am

Is it possible to avoid hardcoding the filename into the script?

Lets say I have
<img src="image1_static.gif">
<img src="image2_anim.gif">
<img src="image3_static.gif">
<img src="image4_anim.gif">
<img src="image5_static.gif">

And I would like to replace only 2 animated images?

Frenzie · Post by **Frenzie** » October 10th, 2010, 6:07 am

Sure, then you'll have to use the method I described earlier.

Code: Select all

      if (images[i].src.indexOf('anim.gif') != -1)
         images[i].src.replace(/\.gif/i, '.png');

(as noted before, untested)

Alternatively you could do something like this:

Code: Select all

<img src="any-name.gif">
<img src="any-name.gif">
<img src="any-name.gif" class="apng">
<img src="any-name.gif">
<img src="any-name.gif">
<img src="any-name.gif" class="apng">
<img src="any-name.gif">

Then you could do document.getElementsByClassName('apng') instead of document.images and you wouldn't have to do any other testing[1] prior to the source swap. There are many roads that lead to Rome.

[1] You don't really need to do the indexOf() test, but my untested assumption is that this should be faster than the regexp in replace(). In practice it probably won't make much difference, so it should be fine to stick with:

Code: Select all

       images[i].src.replace(/anim\.gif/i, 'anim.png');

maxst · Post by **maxst** » October 10th, 2010, 7:05 am

I'm thinking of this:

Code: Select all

images[i].src = images[i].src.replace(/anim\.gif$/i,'anim.png');

I'll try class too.

Frenzie · Post by **Frenzie** » October 10th, 2010, 8:05 am

Just depends on what's more convenient to you; functionally it's equivalent.

Gingerbread Man · Post by **Gingerbread Man** » October 10th, 2010, 9:06 am

Frenzie wrote:document.getElementsByClassName

Requires Internet Explorer 9 (!), Firefox 3 (and probably Camino 2, Seamonkey 2 or K-Meleon 1.6), Safari 3.1 (and probably Chrome 1.0), or Opera 9.5.

maxst · Post by **maxst** » October 10th, 2010, 9:51 am

If this replacement won't work in older browsers, then older browsers will be using GIFs, which is ok.

Yes, I think the class trick is simplest, no need to bother with "special" file names. It seems to be working fine.

I'll post it on animatedpng.com so other people could learn from it too. Thanks again.

Frenzie · Post by **Frenzie** » October 10th, 2010, 12:00 pm

Gingerbread Man wrote:
Frenzie wrote:document.getElementsByClassName

Requires Internet Explorer 9 (!), Firefox 3 (and probably Camino 2, Seamonkey 2 or K-Meleon 1.6), Safari 3.1 (and probably Chrome 1.0), or Opera 9.5.

As does canvas, which is used to determine APNG support, and APNG itself. If anything you should just throw a big if(document.getElementsByClassName) around everything.

Frenzie · Post by **Frenzie** » October 10th, 2010, 2:19 pm

I just realized I tested the indexOf results against 0. This should've been -1 since 0 is of course a proper position in the string. Whoopsie. Shouldn't affect anything (especially given the final method used), but of course I don't want to spread wrong information.

maxst · Post by **maxst** » October 10th, 2010, 9:25 pm

Yes, I figured that out too, and used -1

Here's final version using class:

Code: Select all

<!DOCTYPE html>
<title>apng-detect.js image swapping Demo</title>
<script src="apng-detect.js"></script>
<script>
//<![CDATA[
if (typeof apng_supported !== "boolean") {
   var apng_supported = false;
}
document.addEventListener('DOMContentLoaded',function() {
   if (apng_supported) {
      var apng_elements = document.getElementsByClassName('apng');
      for (var i=0; i<apng_elements.length; i++) {
             apng_elements[i].src = apng_elements[i].src.replace(/gif$/i,'png');
      }
   }
}, false);
//]]>
</script>
<img src="image1.gif">
<img src="image2.gif" class="apng">
<img src="image3.gif">

Frenzie · Post by **Frenzie** » October 10th, 2010, 11:32 pm

Looks good to me.

bat999 · Post by **bat999** » October 18th, 2010, 5:09 pm

Hi
I don't know how antimatter15 makes a “RIFF encoded WebP image” from an image.
And then how he converts it into a “EBML/Matroska encoded single frame WebM video”.
I've asked the questions on his blog, but not got a reply yet.

Have you guys any ideas how to do this?

maxst · Post by **maxst** » October 18th, 2010, 9:43 pm

WebP is already in RIFF container, by definition.

The conversion code is in weppy.js

I assume his code simply changes RIFF header to EBML header, or somehting like that.

Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"

Re: Yet Another Image Format: Google's "WebP"