Starting today, we are fully adopting WEBP format for image output

Image source: @shmuelr

In just two months, it will be 2025. Although ProcessWire added this feature back in 2019, we have not fully adopted the WebP image format to ensure complete browser compatibility.

WEBP is an output format

Like BLOB video streams, WEBP is purely an output format, not an input format, meaning you cannot upload files with the .webp extension in the backend. You still need to provide fallback JPG or PNG files for any WebP images you offer, as not all browsers can use WebP images.

Moreover, the compression type used by WEBP images makes them unsuitable for further processing or conversion. Therefore, PNG and/or JPG images should still be the standard for any images uploaded to the website. All WebP images provided by ProcessWire are automatically generated from the source PNG or JPG images.

There are many advantages to using the WebP image format, making it a popular choice, especially in web development and optimization.

Here are several key reasons to use WebP

1. Higher compression efficiency

• WebP offers smaller file sizes: Compared to JPEG and PNG formats, WebP can significantly reduce file sizes while maintaining image quality. Specifically, WebP images are typically 25% to 34% smaller than JPEGs and 26% to 45% smaller than PNGs, helping reduce bandwidth usage and speed up page load times.
• Supports both lossy and lossless compression: WebP supports both compression types, allowing for a flexible balance between image quality and file size.

2. Transparency (alpha channel) support

• Similar to PNG, WebP also supports transparency (alpha channel) but with smaller file sizes. Thus, it can replace PNGs to reduce image load time and improve web page performance.

3. Animation support

• WebP can create animated images, similar to GIFs. Compared to GIFs, animated WebP files are usually smaller in size, support 24-bit color, and 8-bit transparency, resulting in smoother animations and better color representation.

4. Reduced page load time

• Since WebP image files are smaller, browsers can load them faster, reducing page load time. This is especially beneficial for mobile users, as it lowers data usage and improves website responsiveness.

5. SEO benefits

• Faster page load speeds can help improve search engine rankings. Search engines like Google consider page speed as a ranking factor, and using WebP can boost page speed, enhancing SEO performance.

6. Better user experience

• Faster-loading pages can reduce user wait time, increasing retention rates and satisfaction. This is particularly important for e-commerce websites, news portals, and other scenarios that rely on high user engagement.

Limitations for applicable scenarios

Despite its many advantages, using other image formats may be more suitable in certain scenarios:

• If compatibility with browsers that do not support WebP is required (this can be addressed by providing alternative image formats).
• In some cases, PNG or JPEG may offer higher image quality at extremely high compression ratios.

Overall, WebP is an efficient image format suitable for website optimization to improve load speed and user experience.

Which browsers do not support WebP files?

Currently, most modern browsers support the WebP image format, but some older browsers or versions may not. Here is an overview of browser support:

Browsers that do not support WebP:

1. Internet Explorer (IE): All versions of Internet Explorer do not support WebP, including IE 11 and earlier versions.
2. Safari (older versions): Safari did not support WebP before version 14. Support for WebP was added in Safari 14 and later on macOS and iOS.
3. Older versions of Opera Mini: While most modern browsers support WebP, some older versions of Opera Mini do not.

Browsers that support WebP:

• Google Chrome: Supported since version 17 in 2011.
• Firefox: Supported since version 65 in 2019.
• Microsoft Edge: Chromium-based versions of Edge support WebP.
• Opera: Supported since version 11.10.
• Safari: Supported from version 14 onwards.

In general, most modern browsers support the WebP format, except for older versions of Internet Explorer and Safari. If compatibility with browsers that do not support WebP is needed, consider using the <picture> tag to provide alternative image formats such as JPEG or PNG.

<picture>
  <source srcset="<?= $image->webp->url ?>" type="image/webp">
  <img src="<?= $image->url ?>" alt="<?= $image->description ?>">
</picture>