13 10 / 2010
Want WebP today? Implement it in JavaScript!
WebP is Google’s new image format, released a few weeks ago, which is designed for speed as a replacement for the almost two decade old JPEG format. Of course, one would assume that the format is useless until browsers implement it. Not so quick! Antimatter15 has implemented the format in JavaScript to give browsers supporting WebM (WebP’s cousin) and the canvas element the ability to display the images. This means Chrome 7.0, Opera 10.62, and Firefox 4.0 beta. So, how does it work?
WebP is actually a lightweight container for a single VP8 frame (whereas WebM is a container based off Matroska meant for video). WebM support exists already in Chrome, Firefox and Opera, so all that’s needed to render it is to do a little magic to convert the RIFF encoded WebP image into a EBML/Matroska encoded single frame WebM video, loading it in a <video> and replacing the .webp image with the <video> element.
Want to use it in your own page? It is as simple as including the weppy library, and include WebP images on your page like you normally would: perfectly future proof, etc! It uses feature testing to detect native support, which currently does not exist, but will in the future. This allows the browser’s native support to work instead of the JavaScript version, if that support is available.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>WebP Demo</title>
<script src="weppy.js"></script>
</head>
<body>
<h1>WebP Demo</h1>
<img src="mandelbrot.webp" width="500">
</body>
</html>Very cool hack! Oh, and by the way, he is currently 15 years old. Very impressive!
Update: You can check out the project on Github as well!
