Always look your best: WebP, source sets, and the Contentful Images API

What is WebP?

WebP is yet another Google-developed innovation. By the early 2000s, Google sought to produce an alternative to JPEGs to enable faster data transfer. Inevitably, they succeeded, introducing WebP to the public on September 30th, 2010. 

With WebP came high-quality images that remained so even after compression. Thanks to their successful implementation, developers can create smaller, richer images at substantially reduced sizes, enabling faster website/application performance.

Furthermore, WebP now supports animation frames and alpha transparency to enable greater editing and content delivery flexibility. As a result, WebP can now serve as a leaner replacement for GIF and PNG images.

WebP is based on the intra-frame coding of the VP8 video format and uses the Resource Interchange File Format (RIFF) container format. It uses both lossy and lossless compression techniques, as described below:

• Lossy image compression: This handles compression by trading off between the quality and size of the image. It simultaneously reduces the file size and image quality by removing some of the pixels. WebP lossy images are on average 30% smaller than JPEG images of comparable quality. It is primarily used for photography. 

• Lossless image compression: This reduces the size of the image without compromising quality. The lossless WebP image can be up to 26% smaller than PNG files and is mainly used for logos and illustrations.

In some cases, however, lossy compression tends to be more effective than lossless compression because of its capability to retain the quality of the image even while its size reduces. This can improve your site’s performance and page load times.

Comparison between WebP, JPEG, PNG, and GIF

Popular image formats include:

• Joint photographic experts group (JPEG): This is one of the most common image formats, primarily used in representing digital photographs. It uses the lossy compression algorithm.

• Portable network graphics (PNG): This format allows for a transparent background. It also uses the lossless compression algorithm, which enables the image to preserve its quality even after being compressed. The downside is that the file size tends to be larger than other formats.

• Graphics interchange format (GIF): Since it can store multiple images at once, this format is most frequently used to animate images by displaying a sequence of frames. GIFs use lossless data compression.

WebP serves as the best of all these formats. It efficiently combines the features of all three in a surprisingly seamless way. Learn more about image file formats and why they are important.

For example, let’s take this 2.48MB cupcake photograph, a JPEG image, and convert it to WebP. The resulting image is 520KB (79% reduced).

Now, let’s try converting a PNG to WebP. This tree illustration is 60.5KB. The corresponding WebP image on the right has a 15% size reduction with a file size of 51.7KB.

As these examples demonstrate, WebP successfully retains a high-quality image while reducing its file size.

Advantages of WebP

WebP provides several benefits:

• By compressing the size of your images to the WebP format while maintaining the same quality, you can provide a better experience for your users and the devices they use.

• WebP is an open-sourceimage format which means that anyone can work on it and also contribute more features for improvements.

• It enables better loading performance, interactivity, and visual stability of a page, which positively impacts the site’s search engine optimization (SEO) score.

More recently, numerous companies have integrated the use of WebP into their platforms due to its performance advantages. Popular companies like Meta, Google, Telegram, Dropbox, Apple, and Quora support WebP on their platforms.

WebP support and source sets

Browser support

According to a recent report from caniuse, 79.2% of browsers around the globe support WebP. These include Google Chrome (and all Chromium-based browsers), Microsoft Edge, Safari, Mozilla Firefox, Opera, and GNOME Web.

However, as many browsers still do not yet support the WebP format, developers must account for this when choosing how to display images within their sites and applications.

HTML5 picture element and source sets

In web development, images are rendered using the img tag, and the path to the image is passed to the src attribute. For example:

So, to avoid issues with browser compatibility, you can use HTML source sets. This feature enables you to provide multiple images from which a browser can choose a compatible file.

The <picture> element as defined by Mozilla provides different sources for an image. From each source element, the browser will choose the best match among them. If the browser doesn’t support any matches, the image URL from the <img> element is used instead. The browser will then display the selected image. 

See the example below:

In this example, the first source element represents a WebP image. If the browser can render the WebP image, then that’s the image file it chooses. Otherwise, it moves on to the next source element. The second source element represents the JPEG format, and if the browser can render JPEG images, it will use that image file. Otherwise, the browser will fall back to the image file in the src attribute of the <img> element.

This means you can start using new image formats without sacrificing backward compatibility.

Each attribute of the <source> element performs a different role:

• srcset — provides the path to the image file

• type — specifies the MIME type of the image

• sizes — contains the list of source sizes for each source file

• media — uses the default media query to determine when an image should be used

Alternatively, you can use a CDN provider that offers WebP support detection as part of their service. The Contentful Images API enables you to manage your image resources in this way.

Images API

Contentful is a content platform that extends the capabilities of headless CMS. It lets you create and manage content across your tech stack and distribute it to any other platform. Contentful helps deliver content by using RESTful APIs across multiple devices, easily and efficiently handling your content management and delivery. 

You can use the Contentful Images API to add and retrieve image files referenced from assets and manipulate them based on use case. Each image stored in a space is represented in a JSON structure, from which you can perform a variety of functions.

By directly querying the API, you can retrieve the different fields of an asset:

JSON structure of a stored image:

This provides the full details about the image’s numerous properties. The value of the URL field gives you direct access to the image on your web browser. Its basic structure follows the example below:

You can retrieve the space_id and asset_id directly from the space in your Contentful account. Additionally, the image URL is automatically generated once the image is uploaded to the space.

The image API can handle a variety of other use cases, including the following examples.

Changing the image formats

Contentful supports the conversion of images to .jpg, .png, .webp, .gif, and .avif formats by adding fm=image_format as a query parameter to your image URL.

With this, you can view one image in different formats.

Resizing and cropping images

The Image API is also beneficial for easily resizing and fitting images without having to install additional libraries. The width and height of each image can be set directly from the URL:

For rounded corners, add the r parameter:

For fitting the image, add the fit parameter. The option varies based on what is desired:

Manipulating images

To most effectively optimize your images, you can control their quality by specifying a level value from 1 to 100: 

For any image uploaded on the Contentful platform, you can apply the transformations directly to an image by accessing its assets from your Contentful account. Contentful then automatically generates the usable image URL. For additional resources, check out the official Images API documentation.

Wrapping up

As modern techniques further integrate into popular platforms, the WebP image format continues to increase. Various big-name companies have already integrated this format due to performance and efficiency. YouTube even uses WebP to display its video thumbnails.

Integrating WebP into your HTML5 source sets is as easy and provides a faster and more consistent user experience across the board. But you can get even more from your image content by adopting Contentful and the Images API. 

Discover more of the features of Contentful’s Images API and start optimizing your application’s media content.

For more on images and SEO refer to our Contentful Image SEO guide.