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

Introduction to Image Formats

Using WebP images in WordPress

//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);

Advantages of using WebP images

Browser support and fallback (polyfills)

<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

Serving WebP Images from a CDN

Summary

--

--

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