what is a webp image

WebP is a modern image format developed by Google that provides superior lossless and lossy compression for images on the web. It was created to deliver high-quality, lightweight image files over the web, and it supports both lossy and lossless compression, as well as animation and alpha transparency.

Google first introduced the WebP image format in September 2010, but finally launched a proper upgraded version on January 30, 2021.

Since the WebP images are tinier (file size), they will help your webpage load quicker and better. Quick loading page uses less bandwith and load quicker on mobile devices, making for a more user-friendly experience on your website.

Google estimates that WebP images are roughly 30% smaller than PNG and JPEG images at the same visual quality. Compared to PNGs and JPEGs, WebP images are 26 and 25-34% tinier.

Which web browsers support WebP?

WebP typically offers better quality and compression than JPEG, GIF, and PNG. It scores 92 on the browser compatibility test (rendering image in advanced formats). Here is the list of well-known browsers that supports WebP:

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)
  • Safari 14+ (iOS 14+, macOS Big Sur+)
  • Pale Moon 26+ (WebP lossy, lossless & alpha support)
  • Vivaldi
  • UR Browser
  • Brave

Key Points

Here are some key points about WebP images:

  • A WebP file consists of VP8 or VP8L image data, and a container based on RIFF.
  • WebP lossless images are 26% smaller in size compared to PNGs, and WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
  • WebP is natively supported in Google Chrome, Safari, Firefox, Edge, the Opera browser, and by many other tools and software libraries.
  • WebP includes the lightweight encoding and decoding library libwebp and the command line tools cwebp and dwebp for converting images to and from the WebP format1.
  • WebP images are designed for the web and are almost indistinguishable from JPEG and PNG.
  • WebP is a suitable format for many website owners because it can reduce image size while maintaining good quality, which increases site performance.


Okay, but can I use it in my web design?

Sure, but, you’ll want to serve WebP images only to clients that can display them properly, and fall back to legacy formats for clients that can’t. Fortunately there are several techniques for detecting WebP support, both on the client-side and server-side. Apparently some CDN providers offer WebP support detection as part of their service.

WebP Images and WordPress

Now that you know how WebP can improve the browsing experience and boost your loading speed, let’s get to how to upload WebP images in WordPress.

Upload WebP images in WordPress without using a plugin

While you can’t upload WebP images directly to your Library on WordPress, there’s an easy way to enable WebP image uploads by editing your function.php file. Simply follow the steps below to enable WebP image uploads on WordPress:

  1. Make sure you have a backup of your site since you’re going to alter theme files.
  2. This works best on a Child-theme (use a child theme!)

From your Dashboard, navigate to Appearance > Themes > Theme File Editor.

Select your Theme Functions (functions.php) file.

Add this code to the end of the file and save.

//Enable WebP image file upload.
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);
Upload WebP images in WordPress using a plugin

Have a look through the repository for webp plugins, they are aplenty. I’m not going to endorse any now, search for something that works for you.

Summary

To summarize, WebP is an image format that provides superior compression for images on the web, making them smaller and faster to load without sacrificing quality. It is supported by many browsers and software libraries, and it can be converted to and from other image formats using tools like cwebp and dwebp.

Similar Posts