You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

Optimizing web pages using WebP

Wednesday, October 21, 2015 | By
0.00 avg. rating (0% score) - 0 votes

“A picture is worth thousand words” —Napoléon Bonaparte

When it comes to web page optimization. Decreasing the image size on your web page make a big difference as it’s the major chunk that consume user bandwidth. According to data from HTTP Archive( http://httparchive.org/ )

For an average web page, image accounts for …

  • 63% of the transferred bytes for desktop sites
  • 69 % of the transferred bytes for mobile sites.

Average bytes per page by content type

Source: http://httparchive.org/

And the bad news is, its increasing over time.The reason is increasing Hi Dpi devices over time.

chart (1)
Source: http://httparchive.org/

Solution to this problem is a new image format provided by Google i.e WebP. Let’s discuss about WebP and how naukrigulf is using it to improve its performance.

What is WebP ?

webplogoWebP is a new image format from Google that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

WebP Support:

WebP is natively supported on Chrome and Opera for both mobile and desktop.

support
Source: http://caniuse.com/

Apart from this WebP is supported on Android : lossy(from ICS onwards) and lossless (from JB onwards) and on iOS native apps via libraries also you can make it work on mozilla/Safari/IE also using different Plugin or using Java Script.

Convert images to WebP format:

You can convert gif/jpeg/png images to WebP by using the open source cwebp conversion tool( https://developers.google.com/speed/webp/docs/precompiled) available for Linux, Windows and Mac OS X.

How naukrigulf used this format:

In order to satisfy our never ending quench for site optimization, we came across yet another way of reducing page size.

Naukrigulf.com is one of the first few sites on web to use WebP image format.We are now using WebP image format to serve banners as most of the image size is attributed to them. By using WebP, we have reduced our home page size from 151 KB to 134 KB that’s 11% percent decrease. Through this, not only our banner images are served faster but it saves user bandwidth also. Therefore, our site is cheaper for users 🙂

This has also hugely benefited our mobile users. Mobile traffic is continuously increasing and the networks on which these mobile users rely on for data hasn’t improved. Using technologies like WebP we have reduced the overall payload size of our web pages.

Since, WebP is natively supported in Google Chrome and the Opera browser we used server side detection (user agent from HTTP request header) to serve webp images to these users.

Results:

Content distribution on Home page

mozilla_piechrome_pie

 

Before using webp

After using webp

 

Content type on home page

mozilla_datachrome_data

Source: www.webpagetest.org

Before using WebP (bytes)

After using WebP(bytes)

That’s 26.53% decrease in image bandwidth.

The traffic on our homepage is approx. 6,00,000 hits/month with 70% users on Chrome  and this optimization is resulting in savings of 45 Gb of monthly bandwidth.

This bandwidth saving makes our site not only fast but also cheap to use for uses.

Next up… Optimizing CSS background images

Now that we have seen how to optimize basic web pages using WebP, in Part 2 of this series let’s have a deeper look at optimizing CSS background images using WebP.

Useful Links

Posted in Frontend, General, Web Technology
Tags: , , , ,