Cloudinary Blog

Quick Guide: Using WebP on Your Website or Native Apps

Using WebP on Your Website or Native Apps

JPEG and PNG are the predominant formats used for image delivery on the web. According to a W3Techs survey, 74 percent of the websites worldwide use these formats, and for good reason: They are supported across all browsers. Still, there are newer image formats with better performance and a leading example is the WebP format. Here we'll show how to easily implement WebP in order to reduce your images weight by approx. 30 percent and improve your website and native apps image load time.

What is WebP?

WebP is a modern image format developed by Google that is specifically designed for web delivery. It aims at creating smaller, better looking images that can help make the web faster. WebP typically achieves an average of 30% more compression than JPEG, without loss of image quality. Interestingly enough WebP is only supported by Chrome, Android and Opera browsers, which would be a compelling reason not to use it. However, Chrome usage has risen year-over-year, reaching 75 percent according to W3Schools survey. Opera adds another 1 percent, which means that optimization for Chrome (and Opera) is worth pursuing.

What about my native mobile apps?

Looking into support for native apps, WebP is supported by Android (since it’s made by Google). Lossy WebP images are supported in Android 4.0 (API level 14) and higher, and lossless and transparent WebP images are supported in Android 4.3 (API level 18) and higher. WebP can also be implemented on iOS by using a dedicated library to encode and decode images. The library, is called libwebp, is available as precompiled binaries for iOS or as source code.

WebP supports:

  • Lossy and lossless compression options
  • Transparency
  • XMP (Extensible Metadata Platform) metadata
  • ICC (International Color Consortium) profiles
  • Animation
  • Color Space:
    • Lossy WebP works exclusively with 8-bit YUV420 format.
    • Lossless WebP works exclusively with RGBA format.

Side by Side Comparison

JPEG -> WebP (Resolution: 300x190, Quality: 80)

JPEG JPEG(15KB) WebP WebP(10KB)

PNG -> WebP (Resolution: 300 x 192. Image with transparency)

PNG PNG(55KB) WebP WebP(39KB)

A GIF -> A WebP (Resolution: 300x168, Quality: 80. Animation)

GIF GIF(2.23MB) Animated WebP Animated WebP(887KB)

Implementing WebP Using <picture>

One way to implement WebP is using <picture>, which enables you to define different image sources. The browser will download the first option, according to the supported type. However this will require using a polyfill, such as picturefill, for browsers that don’t support HTML5 picture tag.

<picture>
  <source type="image/webp" srcset="images/cat.webp">
  <img src="images/cat.jpg" alt="a cat">
</picture>

Easy Implementation for Web delivery

Instead of creating a WebP variant for each image, let's explore an easier alternative. Once an image is uploaded to Cloudinary, you can request it to be sent in the optimal image format according to the user browser. In case the image is requested from Chrome (or Opera), it will be automatically converted to WebP on the first request and then cached on the CDN for any subsequent request. By using the same URL for all image formats, effortlessly saving 30 percent image bandwidth on average. Using this method with Cloudinary also will deliver the image as JPEG to Firefox users and convert the image the same way to JPEG-XR for IE users (see more on automatic format).

Ruby:
cl_image_tag("dog2.jpg", :width=>500, :height=>333, :crop=>"fill", :fetch_format=>:auto)
PHP:
cl_image_tag("dog2.jpg", array("width"=>500, "height"=>333, "crop"=>"fill", "fetch_format"=>"auto"))
Python:
CloudinaryImage("dog2.jpg").image(width=500, height=333, crop="fill", fetch_format="auto")
Node.js:
cloudinary.image("dog2.jpg", {width: 500, height: 333, crop: "fill", fetch_format: "auto"})
Java:
cloudinary.url().transformation(new Transformation().width(500).height(333).crop("fill").fetchFormat("auto")).imageTag("dog2.jpg");
JS:
cloudinary.imageTag('dog2.jpg', {width: 500, height: 333, crop: "fill", fetchFormat: "auto"}).toHtml();
jQuery:
$.cloudinary.image("dog2.jpg", {width: 500, height: 333, crop: "fill", fetch_format: "auto"})
React:
<Image publicId="dog2.jpg" >
  <Transformation width="500" height="333" crop="fill" fetchFormat="auto" />
</Image>
Angular:
<cl-image public-id="dog2.jpg" >
  <cl-transformation width="500" height="333" crop="fill" fetch-format="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Height(333).Crop("fill").FetchFormat("auto")).BuildImageTag("dog2.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(500).height(333).crop("fill").fetchFormat("auto")).generate("dog2.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setHeight(333).setCrop("fill").setFetchFormat("auto")).generate("dog2.jpg")!, cloudinary: cloudinary)
Dog

Native Mobile Apps Support

In the case of a native mobile app, the WebP format can be fixed for the Android app using the same image already uploaded to Cloudinary and used for the web. For the native app, we can use the Android SDK or simply construct the URL.

On your Android App:

cloudinary.url().transformation(new Transformation().width(500).height(333).crop("fill")).fetchFormat("webp")).generate("dog.jpg")

The equivalent URL is: https://res.cloudinary.com/cld-name/image/upload/c_fill,f_webp,h_333,w_500/dog.jpg

Adding Quality to the Game

The image quality setting, which is used to define the depth of the lossy compression, has an effect on the results as well. Finding the sweetspot for your images require analyzing which quality setting fits them. For example, you may test quality 80 and quality 90 to verify the image weight reduction and whether it meets the required visual quality.

However, since each image eventually has it own optimal quality setting, using Cloudinary’s automatic quality option (q_auto) will automatically find the quality level for each image according to the required visual level (more on automatic quality). Using both automatic format and quality achieves full automation and lets Cloudinary decide on-the-fly the best quality setting and format to deliver. The visual quality level itself can be set according to the delivery method. For example, you can use the default “good” visual quality level on the web and an “eco” level on your native mobile app in order to save more bandwidth.

Using Automatic Quality for Full Automation

On your website:

Ruby:
cl_image_tag("dog2.jpg", :width=>500, :height=>333, :quality=>"auto", :crop=>"fill", :fetch_format=>:auto)
PHP:
cl_image_tag("dog2.jpg", array("width"=>500, "height"=>333, "quality"=>"auto", "crop"=>"fill", "fetch_format"=>"auto"))
Python:
CloudinaryImage("dog2.jpg").image(width=500, height=333, quality="auto", crop="fill", fetch_format="auto")
Node.js:
cloudinary.image("dog2.jpg", {width: 500, height: 333, quality: "auto", crop: "fill", fetch_format: "auto"})
Java:
cloudinary.url().transformation(new Transformation().width(500).height(333).quality("auto").crop("fill").fetchFormat("auto")).imageTag("dog2.jpg");
JS:
cloudinary.imageTag('dog2.jpg', {width: 500, height: 333, quality: "auto", crop: "fill", fetchFormat: "auto"}).toHtml();
jQuery:
$.cloudinary.image("dog2.jpg", {width: 500, height: 333, quality: "auto", crop: "fill", fetch_format: "auto"})
React:
<Image publicId="dog2.jpg" >
  <Transformation width="500" height="333" quality="auto" crop="fill" fetchFormat="auto" />
</Image>
Angular:
<cl-image public-id="dog2.jpg" >
  <cl-transformation width="500" height="333" quality="auto" crop="fill" fetch-format="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Height(333).Quality("auto").Crop("fill").FetchFormat("auto")).BuildImageTag("dog2.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(500).height(333).quality("auto").crop("fill").fetchFormat("auto")).generate("dog2.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setHeight(333).setQuality("auto").setCrop("fill").setFetchFormat("auto")).generate("dog2.jpg")!, cloudinary: cloudinary)
Dog

On your Android App:

cloudinary.url().transformation(new Transformation().width(500).height(333).crop("fill")).fetchFormat("webp").quality("auto:eco")).generate("dog.jpg")

The equivalent URL is: https://res.cloudinary.com/cld-name/image/upload/c_fill,f_webp,h_333,q_auto:eco,w_500/dog.jpg

Summary

Managing images can be challenging because supporting the same image with different sizes and crops for responsive design requires significant development effort. Still, since images are 60 percent to 65 percent of the average website, the savings are significant and therefore automating the process makes a lot of sense. Luckily all of this can be done on-the-fly using Cloudinary, so you can benefit from the advantages WebP provides without requiring additional development effort to support it.

Recent Blog Posts

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more