Using WebP (Next-gen Image) format on production sites

Introduction to Image Formats

The most common image formats on the web are: JPEG, GIF, and PNG. WebP is a new format developed by Google that is gaining popularity because of its compression ratio, image quality, file size and alpha channel support.

Using WebP images in WordPress

As of WordPress 5.5, it still doesn’t support WebP image format within the media library out of the box. The two most common problems are allowing WebP image uploads and generating previews in the media library. This is possible with some custom workarounds like setting hooks on mime_types and file_is_displayable_image API’s. Refer to the code snippet below:

//enable upload for webp image files.
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//enable preview / thumbnail for webp image files.
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );

if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
  • Ondemand generation of image sizes (must have feature)
  • Upscaling smaller images

Advantages of using WebP images

Majority of browsers are still picking up with WebP support, but it shouldn’t discourage usage in production environments. Lining up some of the advantages of WebP that far outweigh the troubles of implementing it:

  • Better image quality (Lossy)
  • Next-gen image format (future proof)
  • Bandwidth savvy file size
  • Improved page loading

Browser support and fallback (polyfills)

It could feel like “Doing a 360° somersault” when addressing WebP browser support. Following the footsteps of Internet Explorer, Safari is the biggest concern. According to CanIUse:

<picture>
<source srcset="assets/img/hero.webp" type="image/webp">
<source srcset="assets/img/hero.jpg" type="image/jpeg">
<img src="assets/img/hero.jpg" alt="Hero">
</picture>
body.no-webp .hero {
background-image: url("assets/img/hero.jpg");
}
body.webp .hero{
background-image: url("assets/img/hero.webp");
}
.hero{
background-image: image(
"https://www.gstatic.com/webp/gallery/1.webp",
"https://www.gstatic.com/webp/gallery/2.jpg"
);
}

Batch Conversion of JPEG/PNG to WebP format

There could be several methods of doing batch conversions to WebP. You could do it with KIM for KDE Plasma Service (Linux), GwenView (Linux), ACDSee, IrfanView, Adobe Photoshop or CLI tools like cwebp, vips, ImageMagick or gd extensions.

Serving WebP Images from a CDN

For a production site, serving image assets over a CDN is common practice as it speeds up delivery to a user’s browser. In this section, we discuss the ways in which WebP images can be served up via a CDN on a WordPress site that is hosted on WPEngine. In particular, WebP Express plugin is a very handy tool to achieve this goal.

Summary

In this article, we discussed the benefits of using WebP as an image format for delivering images on the web. We then delved into the details of how to achieve this on a site that is built on the WordPress CMS and hosted on WPEngine. We then discussed how to convert jpg/png images to webp, how to plan for browser support and fallback (polyfills) and how to deliver these WebP Images over a CDN.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Exemplifi

Exemplifi

We build and manage enterprise websites.