How to Upload WebP Images in WordPress Without Using a Plugin

June 4, 2024 / WordPress

This article will help you in uploading WebP images to WordPress without using a plugin. Uploading WebP images in WordPress without using a plugin minimises bloat and dependency on third-party software, enhancing site performance and stability.

As you cannot upload WebP images straight to WordPress by default, you can enable WebP image uploads by modifying your functions.php file.

You can also upload WebP images in WordPress using the plugin.  

Follow these steps to enable WebP image uploads:

  1. Go to your WordPress Dashboard.
  2. Select “Theme File Editor” from the “Appearance” menu.
  3. Access “functions.php” by clicking “Theme Functions”.
  4. At the end of the file, copy and paste the code below and save it.
    function add_webp_upload_mime( $mimes ) {
    
        $mimes['webp'] = 'image/webp';
    
        return $mimes;
    
    }
    
    add_filter( 'mime_types', 'add_webp_upload_mime' );
    
    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], $displayab
    
    e_image_types)) {
    
                $result = false;
    
            } else {
    
                $result = true;
    
            }
    
        }
    
      return $result;
    
    }
    
    add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
  1. Congratulations! Now, you can upload WebP images in WordPress just as easily as JPEG and PNG.
    Note- If you want to see the preview when selecting Media / Library, include the below-outlined code in the same functions.php file-

    function display_webp_in_media_library( $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', 'display_webp_in_media_library', 10, 2 );

This guide provides a simple process for enabling WebP image uploads in WordPress without using a plugin. If you encounter any difficulties with this article, please contact our support team for assistance.

Spread the love