Updates from QA Training

webP – a new way of doing web images

GIF, PNG & JPG have been the stalwarts of web graphics for the last decade. Google would like you to consider something new, the WebP format.


David Walker | 13 February 2013

GIF, PNG & JPG have been the stalwarts of web graphics for the last decade. Google would like you to consider something new, the WebP format.

Early HTML5 adopters will already be familiar with their video format WebM. It's a great way for encoding video and much more efficient than the .mp4 format that Apple and Microsoft are so wedded to. If you haven't checked it out yet do so, programs like Handbrake can help you encode the video to see how much a difference it can make in file size.

Learning from their success with the WebM codec (VP8) the new WebP format has an advanced encoding technique that reuses much more of the image data. WebP is a lossy format like JPG so it has many of the same constraints and rules but its compression ratio is far higher. It uses "the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference between the actual values and the prediction" to quote the dev team.

To play with the format you will need a webP encoder. A command line tool for this experimental format can be found  here along with the supporting technical documentation.

I gave it a go on an image I'm using for our new course Developing web applications using HTML5 .

Img1

It's an uncompressed 350px wide graphic coming in at 66kb. Using Chrome's development tools (Press F12 and choose the network tab) to examine the page performance.

Jpgspeed

Around a 8ms latency on getting the graphic from client to server.

Then using the command line, I created a converted version of the graphic

cwep img1.jpg -o img1.webp

To let it do the magic...

Converter

The result was a file that now weighed in at 19kb. Unfortuantly I can't upload it to our blogging platform to show you the difference as I explain below. When I checked the quality, it looks nigh on identical to me and has saved me nearly 2/3 of the bandwidth to serve the graphic.

So where are the cons on this format right now? It is supported in Opera, Chrome and on Android devices. There is an experimental plugin for IE and plans to add to Firefox. iOS and to my understanding Safari do not support the format. It may also be that the server and server ISAPI you are using does not support the format either. Wikipedia has a comprehensive list of what is supported .

So if you were to use it to day you would need to consider a fallback for older non supported browsers. We're in our infancy in this format but the same was the case for PNG in the dawn of the HTML 4 world. While I expect GIF and JPG to remain the main formats of the web the idea that I could create a format that optimizes for Android devices and many browsers is really exciting. I encourage you to go have a play and let us know what other pros and cons you find. 

David-Walker---sq

David Walker

Head of Emerging Technologies

David is a change driven technologist who continually looks to adapt and expand his knowledge and understanding of his field. Over the least eighteen years David has led technology and training companies through emerging fields and technology trends helping them to understand the future and develop business opportunities. As Head of Emerging Technologies he works closely with customers and industry experts to ensure the opportunities and threats of new technology trends designing custom learning solutions to help small and enterprise organisation adapt and make the most of their people - ensuring QA is ready when our customers need to navigate the minefield of the fast moving digital landscape. His passion is in advanced web engineering principals and vendor neutral thick client design/development technologies reflected in his research, analysis and courseware development experience combined with his training delivery skills. As a technologist he is the lead instructor and syllabus author for web development technologies and specialising in Agile, DevOps, and User Experience driven approaches to developing solutions. He has authored courses such as HTML5, Responsive Web Development, User Experience, NodeJS, Javascript and jQuery.
Talk to our learning experts

Talk to our team of learning experts

Every business has different learning needs. QA has over 30 years of experience in combining the highest quality training with the most comprehensive range of learning services, ensuring the very best fit for your organisation.

Get in touch with our learning experts to talk about how we can help.