How did you upload webp files to WordPress library?

[Leandro]

I would like to upload my webp image files with jpg extension in the WordPress library but I can’t.

Can you help me please?

Thanks for your cooperation

[Elvin]

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/

A wise man once said:
"Have you cleared your cache?"

[Leandro]

Great!

Thanks a lot

[Leandro]

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

[Leandro]

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

[Elvin]

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. 🙂

A wise man once said:
"Have you cleared your cache?"

[Leandro]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leandro]

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

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[Leandro]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leandro]

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?

[Leandro]

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?

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts