Feb 15, 2024

By Alberto Méndez

The new image format, WebP

History and Evolution of the Format

The WebP format was created by Google with the goal of speeding up internet loading times by significantly reducing the size of photos and online graphics without sacrificing quality. Initially developed in 2010 by On2 Technologies, a company acquired by Google, WebP represents a significant advance over older formats such as JPEG, PNG, and GIF thanks to its ability to deliver high-quality images in much smaller file sizes.

It combines lossy and lossless compression features, and has evolved over time to adapt to emerging digital trends, adding support for animation and transparency in 2011. This format uses the intra-frame coding technology from the VP8 video format and is stored in a container based on the Resource Interchange File Format (RIFF), making it extremely efficient in terms of both image quality and file size. For example, WebP images with lossless compression are up to 26% smaller than their PNG equivalents, and WebP images with lossy compression can be up to 34% smaller than comparable JPEGs at a similar SSIM quality index.

Moreover, the WebP format is widely compatible with most modern web browsers, including Chrome, Safari, Opera, Microsoft Edge, and Firefox, facilitating its integration across various platforms without compatibility issues. However, it is important to note that some older versions of browsers and Internet Explorer may not support WebP.

One of the key advantages of WebP is its flexibility, as it supports both lossy and lossless compression in a single image, thus offering a superior alternative to GIF formats for animated images, providing 24-bit colors with transparency and the ability to combine frames with both lossy and lossless compression in the same animation.

Among the highlighted benefits of using WebP images in website construction are:

• Improved Performance: WebP images are lighter than JPEG and PNG formats, which allows pages with WebP images to load faster.
• Bandwidth Savings: Frees up bandwidth and allows websites to offer a richer media experience.
• SEO Optimization: Google explicitly recommends the use of modern image formats like WebP as part of its Core Web Vitals recommendations.
• Superior Image Quality: With WebP, it’s not necessary to sacrifice image quality for faster loading.
• Support for Additional Image Features: Unlike some other formats, WebP supports transparency and animation.

The disadvantages of the WebP format include limitations in terms of browser support and potential compromises in image quality under certain circumstances. This means that additional work may be required to provide alternative images in more traditional formats to ensure compatibility across all browsers. Additionally, while WebP allows for very efficient image compression, in some cases, compression can lead to a loss of image quality, especially when aggressive compression settings are used.

How to Convert Images to WebP

Online

There are several online tools that allow you to convert images to WebP for free and without the need for additional software installation. Here are some examples:

• CloudConvert:

  • Visit CloudConvert.
  • Select the source file type and choose WebP as the target format.
  • Upload your image and click on “Convert” to start the process.

• EZGIF:

  • Go to EZGIF.
  • Select the “WebP” tab.
  • Then choose the image format of the source.
  • Upload the image to convert.

On Your Device

It’s important to note that many online services store images on their servers, which can be problematic if the image to be converted is sensitive or private, common with some project resources. Therefore, using Google’s WebP image conversion tool is recommended. This free tool can be directly used on your device without third-party services.

The tool, a command-line utility named cwebp, is available for Linux, Windows, and macOS. You can download it from its download page or install it from official repositories on Ubuntu with sudo apt install webp. Using it is as simple as opening a terminal and running the following command:

  cwebp -q 80 image.jpg -o image.webp
  

Where -q is the image quality level, ranging from 0 to 100, although it can be omitted to use the default value (75), image.jpg is the name of the image you wish to convert, and image.webp is the name of the output file. The -lossless option can also be used to convert the image without quality loss. Another useful tool included in the package is gif2webp, which allows for converting GIFs to WebP in a similar manner.

  gif2webp -q 80 imagen.gif -o imagen.webp
    

How to Use WebP Images on Your Website

The most direct way to use WebP images on your website is through the <img> tag, similar to how you would with any other image format. However, it’s important to consider browser support. Here’s how:

    <img src="imagen.webp" alt="Descripción de la imagen">
    

This method is simple and direct but does not offer a fallback solution for browsers that do not support WebP.

Using the picture Tag for Compatibility

Although WebP is widely supported by many browsers today, it’s recommended practice to include a fallback mode for those that do not support it. This can be done with the HTML picture tag, which allows for including multiple sources of images, and the browser will choose the one that best fits its capabilities. For example, to include a WebP image and a JPEG as a fallback:

  <picture>
      <source srcset="imagen.webp" type="image/webp">
      <source srcset="imagen.jpg" type="image/jpeg">
      <img src="imagen.jpg" alt="Descripción de la imagen">
  </picture>
    

In this example, if the browser supports WebP, it will load image.webp; otherwise, it will attempt with the next source, image.jpg. If neither source is compatible, the content of the tag will be displayed as a fallback.

Conclusion

The WebP format is an excellent choice for optimizing your website’s performance, reducing bandwidth usage, and enhancing the user experience. Although not all browsers support WebP, you can use the tag to ensure your website is compatible with all browsers. Moreover, converting images to WebP is straightforward and free, so there’s no reason not to take advantage of its benefits. Start using the image format for the web of the future today and Happy Coding!