You Cannot Enable WebP in WordPress

Spread the love
(Last Updated On: February 26, 2022)

So you heard about WebP and its incredible compression factor? You want your WordPress blog to benefit of a good Google ranking? Solutions exist to allow WordPress handle WebP images, unfortunately it’s useless as WordPress won’t be able to resize them to create the thumbnails used everywhere.

Did You Try to Upload WebP Into WordPress?

WebP is a next generation image format spearheaded by Google since 2013, which provides advanced compression options. While it is so much better than legacy formats, it is only supported at the moment of writing (February 2018) by Chrome, and Opera on desktops and Android (see Can I use WebP image format? for more details). As of today, Firefox is not scheduled to support WebP in future versions. Neither are WordPress nor Joomla.

Have you tried uploading one in the media area? So you must be familiar with this error message:

wordpress error cannot load webp file type not permitted
wordpress error cannot load webp file type not permitted

When it comes to new technologies such as WebP images, you are pretty much on your own. Following this blog advices (and some others), I sorta “enabled” WebP images for WordPress.

[callout type=”warning” size=”lg”]

Beware of fake advices

This blogger is in the wrong for instance, when he says “Pick one of the options below which suits you best to resolve the problem:

Indeed, enabling ALLOW_UNFILTERED_UPLOADS didn’t enable a mime type WordPress is unaware of in the first place. Moreover, it didn’t unlock anything as I still get the error message. Whatever.

Furthermore, the hook function couldn’t possibly do anything without this directive (forbidden file) and a new server-wide associated mime type.

Finally, the mime type has to be declared everywhere with the plugin. 3 steps are needed at least.

[/callout]

Want to enable WebP in WordPress? You Can’t!

Beware, this is useless. For demonstration purpose only. Because yeah, sometimes one just want to lose its time ????

Follow these steps:

  1. Unlock unknown content upload (I have no idea how insecure this bad idea is):
    define('ALLOW_UNFILTERED_UPLOADS', true);
  2. Hook WebP uploads with a custom function:
    function my_custom_upload_mimes($mimes = array()) {
    
      // Add a key and value for the CSV file type
      $mimes['webp'] = "image/webp";
    
      return $mimes;
    }
    
    add_action('upload_mimes', 'my_custom_upload_mimes');
  3. Add the plugin WP Add Mime Types to let WordPress know that it’s an image. Not sure it’s necessary with the hook function.

Indeed you will need to use Chrome to log in the admin area, as Firefox still refuses to implement WebP. You can verify here that it’s not on the roadmap even up to version 61.

winscp shows only the original image as thumbnails are missing
winscp shows only the original image as thumbnails are missing

Result? Well, it just doesn’t work. The images are uploaded, but do not show up. That’s because WordPress do resize the images you upload to create many thumbnails used everywhere, in the posts, featured images, media admin area etc.

And indeed, neither WP nor PHP can resize a WebP image, as of today.

wordpress shows a blank thumbnail if forcing to use a webp image
wordpress shows a blank thumbnail if forcing to use a webp image

My take: WordPress is like Mozilla, they refuse to follow Google due to silly fights or “didn’t-do-it won’t follow you” bullcrap. What a shame. Now I’m being a bit of a bully here, but I think they should at least consider using the new image formats of the future instead of just ignoring them. That is: JPEG-XR and WebP.

It’s 2018, @$#$%!!!

Enable WebP with nginx

Here is the idea: since neither WordPress nor Joomla do support WebP, the serving of these images has to be delegated to the web server. We are to implement a rewrite for jpeg/png/any format you like, to serve the same file name appended with the extension .webp.

Source: centminmod.com

As I recently switched to nginx for the better, I’m not interested in Apache anymore. Nginx is the future. This is why I’ll show you how to do it with nginx only.

[callout type=”primary” size=”lg”]

Note

Do not get fooled by the plethora of useless caching plugins available to do that for you. Not only they do add a PHP load to create and serve cached pages, but they often lie about their “free” features (WebP is never free), not mentioning the multiple trackers they add (JetPack, puke). Nothing is free in this world, when it comes to help small fries like us!

If you are willing to accept a lower Yslow score because of the ton of invisible GIF pixel redirects JetPack do add to your pages, then go for it, they seem to serve WebP (well, I couldn’t activate it myself, but maybe you could?).

If you do not accept their bullcrap AND have admin access to your web server, AND you are using nginx, then you can implement this solution.

[/callout]

[icon type=”hand-right”] GO TO THE METHOD HERE

Team Cook

Self-taught IT guy, and Communist slayer for the past 40 years. Who controls the information, controls the future.

0 0 votes
Article Rating
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sanjib Kumar Das
3 years ago

Amazing article. Very nice and well decorative. Keep it up such innovative web development post.

Iryna
2 years ago

Hello,
I was able to download webP images to WordPress but it is true – the image and the thumbnails are not showing up in Media Library.
Is it because of that those images are not showing up in my excerpts on home page?

3
0
Would love your thoughts, please comment.x
()
x