How did you upload webp files to WordPress library?

Hi,

By default, WordPress doesn't allow SVG or WEBP files to be uploaded on media library for security reasons.

To be able to add webp images to your media library, you can try adding this PHP snippet.

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

Here's how to add PHP - https://docs.generatepress.com/article/adding-php/

Great!

Thanks a lot

My library WordPress said "Sorry, this file type is not permitted for security reasons."

Hi there,

I am already using a child theme and tried to add your PHP to the functions.php file but the WordPress library does not allow it.

Can you help me, please?

Thanks

My library WordPress said “Sorry, this file type is not permitted for security reasons.“

I've tested this code to be sure it works. It works fine on my end.

Perhaps the code was copied wrong causing syntax error/s. Can you recheck if that's the case?

Let us know what you find. :)

Hi Elvin,

I copied and pasted your code into the functions.php file as you can see in the following photos.
https://prnt.sc/v32swv

The CSS of the child theme also does not work.
https://prnt.sc/v32tua

I have read the "How to add CSS" articles and
"How to add PHP".

I don’t want to use the Code Snippets plugin to create my plugin.

I want to use my Adobe Dreamweaver to add my PHP into the functions.php file and my CSS-style into the CSS file.

Could you help me, please?

I await your news about it

Bye for now

Maybe a plugin like this would work the best?
https://wordpress.org/plugins/webp-express/

Hi Leo,
I don't want to use plugins.
Elvin, your colleague, said he tested the function he wrote above and it works.
Why do I have to install a plugin due to a syntax error?
I don't need a plugin to convert images.

How did you manage to load the images that are in the library?
I need to know this, I don't need a plugin.

Thanks for your cooperation

Here's an example using Code Snippets plugin:
https://share.getcloudapp.com/4guJPBL8

Here's an example using Child Theme's functions.php:
https://share.getcloudapp.com/OAuJGA4B

As shown in both videos, either methods should work.

That said, perhaps the file being uploaded is the issue. Can you let us have a look on what you're trying to upload? Thank you.

Hi Elvin,

With your function, I can upload webp images but these are not seen on Apple devices.

I tried to change the final extension from webp to jpg like your demo images (see the link below) that I found in the library but I can't load them.

https://vininaturalionline.com/wp-content/uploads/2019/06/cd_1_angle-1.jpg

Hi there,

WebP is not supported on all browsers. Safari is one of them.
The problem with manually adding WebP images is that is ALL you get - there is no code to detect whether the device supports them and fallback to JPEG if not.

The Plugin Leo mentioned does the job for you - by converting images to WebP and serving them if the device supports them.

Hi dear Team,
your images are webp with jpg extension like the following that I found in your demo => https://vininaturalionline.com/wp-content/uploads/2019/06/cd_1_angle-1.jpg

Webp images with jpg extension are seen with Apple devices.

How did you manage to load them into the WordPress library?

Hi dear Team,
your images are webp with jpg extension like the following that I found in your demo => https://vininaturalionline.com/wp-content/uploads/2019/06/cd_1_angle-1.jpg

Webp images with jpg extension are seen with Apple devices.

How did you manage to load them into the WordPress library?

That site is not built by us.
The site is hosted on Siteground, and there Optimizer plugin provides that feature:

https://www.webnots.com/how-to-serve-webp-images-in-siteground/