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", fetch_format: "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" fetch_format="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", fetch_format: "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" fetch_format="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

With automatic video subtitles, silence speaks volumes

The last time you scrolled through the feed on your favorite social site, chances are that some videos caught your attention, and chances are, they were playing silently.

On the other hand, what was your reaction the last time you opened a web page and a video unexpectedly began playing with sound? If you are anything like me, the first thing you did was to quickly hunt for the fastest way to pause the video, mute the sound, or close the page entirely, especially if you were in a public place at the time.

Read more
Impressed by WhatsApp Tech? Build WhatsApp Clone with Media Upload

With more than one billion people using WhatsApp, the platform is becoming a go-to for reliable and secure instant messaging. Having so many users means that data transfer processes must be optimized and scalable across all platforms. WhatsApp is touted for its ability to achieve significant media quality preservation when traversing the network from sender to receiver, and this is no easy feat to achieve.

Read more
New Google-powered add-on for auto video categories and tags

Due to significant growth of the web and improvements in network bandwidth, video is now a major source of information and entertainment shared over the internet. As a developer or asset manager, making corporate videos available for viewing, not to mention user-uploaded videos, means you also need a way to categorize them according to their content and make your video library searchable. Most systems end up organizing their video by metadata like the filename, or with user-generated tags (e.g., youtube). This sort of indexing method is subjective, inconsistent, time-consuming, incomplete and superficial.

Read more

iOS Developer Camp: The Dog House

By Shantini Vyas
iOS Developer Camp: The Dog House

Confession: I’m kind of addicted to hackathons. Ever since graduating from Coding Dojo earlier this year, I’ve been on the hunt for new places to expand my skills and meet new people in the tech space. iOS Developer Camp’s 10th Anniversary event bowled me over. Initially, because of its length. 48 hours? Yeesh. I had no idea that those 48 hours would change my life. But let’s first get a little backstory on my favorite topic: dogs.

Read more
GDPR: Cloudinary's take on the What, When, Why, and How

GDPR is a new regulation that deals with the way individuals' private information is handled. This regulation is going to have a deep effect on the entire internet industry. The fact that GDPR is a European regulation doesn't mean it's relevant only for European organizations. It requires protecting the data of any individual whose data is processed or stored in any way within European boundaries. As the reach of many companies is global, the requirement is actually relevant to a lot of companies worldwide.

Read more