Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


What's the WebP Graphics Format?

I'm a Web developer and just heard from a client that I should be using WebP for my site graphics now instead of JPEG. I have no idea what WebP is. Can you enlighten me?


Dave's Answer:

Your client is both right and wrong. First there was GIF, the Graphics Interchange Format, and it was pretty good for early computer systems in that it was highly compressed. Tweaks were added so it supported progressive rendering, transparent colors, etc., but the fundamental limitation was a max of 255 colors. Not so good for a photograph!

Then JPEG came along as part of the output format from the Joint Photographic Experts Group and it had all sorts of cool features including the ability to accurately render millions of colors. Much better for photos, obviously, but it was hampered by a big problem: one of the actual JPEG encoding schemes is protected under patent, so technically you need to license it to include JPEG support in your graphics application.

Enter PNG, Progressive Network Graphic. Released in the mid 1990's, it was intended to live somewhere between GIF and JPEG as a graphics format, utilizing algorithms that made it open source (by that time GIF was also under patent clouds because of its use of the patented Lempel-Ziv-Welch compression algorithm and also theoretically needed to be licensed to include in graphics software).

PNG hasn't really taken root as developers had hoped it would (though we use PNG extensively here on Ask Dave Taylor, including for 90% of our screen captures) and now Google has been analyzing the traffic on the Web and ascertained that 65% of the data and almost 25% of the traffic on the Internet are images.

WebP is Google's answer to that bottleneck, a graphics encoding and compression system that has the same capabilities as JPEG for rendering quality images, but produces files that should be 30-40% smaller.

So WebP sounds promising, there's no question: Imagine if every page you visited rendered 40% faster, or required 40% less time to download all the content. In fact, Google's researchers published a paper about the WebP format that details the following:

webp compression results

It's a bit tricky to understand this graph at first glance, but what you can see is that for their data sample of one million randomly chosen graphic items, the vast majority were shrunk to smaller files by utilizing the WebP graphics format (the red tics).

Google also has a gallery of JPEG images and (rendered and shown within PNG containers, a bit confusingly) their WebP equivalents, which includes the following typical example:

webp-graphics-format

As you can see, there's no visible difference, but the WebP image is 31% smaller. That's quite significant, and if you multiply it by the hundreds of millions of photos in Flickr, on Facebook, and otherwise disseminated around on the Web, not to mention all the other graphical elements, a measurable savings in filesize = a faster Web for everyone. That's a good thing!

If it's adopted.

That's the Achilles heel of Web-based technologies: getting them sufficiently widely adopted in both the client and server (e.g., graphics applications) that there's a snowball's chance in heck that it can become a new standard. Google's approach is to enable WebP support in WebKit and focus on Google Chrome, but obviously, it's going to be Internet Explorer, Firefox, Safari and even mobile browsers that are going to have to include support for WebP before we'll see it deployed widely.

So, in the end, I would say that your client is right in that you need to be paying attention to WebP as a new graphics compression format - and it is pretty darn promising! - but at this point you'd be wayyyy ahead of the curve utilizing it on their site, if you could even find a graphics editor that let you save in WebP format.

As for us, we'll be paying close attention to WebP and will hope to see it sufficiently widely adopted that we can start experimenting with it as an alternative format for photographs and larger graphic images in the near future.


More Useful HTML, JavaScript and Web Site Programming Articles:
✔   How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔   Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔   Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔   How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔   How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  





Categorized: HTML, JavaScript and Web Site Programming   (Article 9612, Written by )
Tagged: gif, google, graphics formats, jpeg, png, web design, webp
Previous: How do I disable message threading in Google Gmail?
Next: On Facebook, how do I add a cell phone number?




Reader Comments To Date: 2

Greg Bulmash said, on October 5, 2010 8:45 AM:

Gotta agree with Dave. Right now WebP is just a proposal and proof of concept. The most telling part is the last line of Google's documentation for WebP.

"The WebP team is proposing a patch to WebKit to provide native support for WebP, so you will be able to view your images in an upcoming release of Google Chrome."

Google's own browser doesn't support WebP yet.

jim said, on October 16, 2012 7:49 AM:

Hi Dave. As of this minute, 10/16/2012 09:48am EST, the comparison images (1.jpg and 1_webp.png) are missing (ie, broken icon). Hope all else goes well. Found that search coding info I was looking for earlier; looks great, can't wait to try it out. Now just browsing through your other goodies. :-) cheers

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.