How to enable or upload WebP Images in WordPress

WebP is a new image format that can make image files smaller compared to jpeg allowing WordPress website to load images quicker. Hence, resulting in faster page load speeds. As we know, faster websites have an edge with SEO and UX helping website owners and bloggers to keep visitors and search engine happy.

This guide will help you learn about WebP image format and how to correctly use it on your WordPress website. In this blog, I will cover on how to enable your WordPress website load WebP images without using any plugin.

What is WebP?

WebP is a next-gen, open source image format that offers better compression and smaller file size compared to JPEG and PNG.

Google in 2010 created WebP. WebP supports animation, making an alternative to GIF, transparency, color, profiles and as well allowing the content creator to choose either they want to share image metadata or not.

Why WebP?

WebP formatted images help keep the file size of your images small. Smaller asset file size results in faster content loading and helping to load the websites quicker. It also helps when the content reader is using a mobile device on the go.

Speeding up WordPress sites is very important to help improve SEO and as well UX. Using WebP is one of the important step towards making your website faster.

How to upload WebP images to WordPress?

One of the most easiest and cleanest way to add this is by editing functions.php file in your theme. To do so there are 2 options –

1. In your ‘Theme’ Functions file (Appearance → Theme Editor → ‘I understand’ on warning → functions.php)
2. In your ‘Child Theme’ Functions file (Appearance → Theme Editor → ‘I understand’ on warning → ‘Select theme to edit’ → <choose your child theme> → functions.php)

If you prefer cleaner and easy to manage code, use Option 2.

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

If you wish to see image (thumbnail) preview in your Media Library, you have to add the below code in same functions.php file below the above code.

//** * Enable preview / thumbnail for webp images in Media. */
function enable_webp_thumbnail($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', 'enable_webp_thumbnail', 10, 2);

Support us