|
|
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? 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: ![]() 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: ![]() 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!
Categorized:
HTML, JavaScript and Web Site Programming
(Article 9612,
Written by Dave Taylor)
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: 2jim 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
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
All Our Categories
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and Blogging Building Web Site Traffic Business and Management Computer and Internet Basics d) None of the Above Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Kindle Fire Help Mac OS X Help Pay Per Click (PPC) Advertising Pinterest Help Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help Find Me on Google+ ADT on G+ |
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.