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.
✔ 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!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
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
Google Gmail Help
Google Plus Help
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
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+