SOLVED: What is .webp & How To Get .webp Graphics in WordPress

.webp is a graphic format that is yet another attempt to replace .jpg as the king of graphics.  Google invented .webp and it has all of the features you would want in a graphic format:

• .webp supports transparencies, like .PNG
• .webp supports annimations like .GIF
• .webp is tight – it supports both lossless and variable lossy compression

Google claims .webp files are about 30% smaller than .jpg’s but our experience has been that is does not.

We compared graphics built, edited and saved using Paint.net and found that .webp is about 10% smaller than .jpg’s but you can find no end of .webp supporters on both YouTube and the internet in general who show amazing results.

WordPress & .webp

There are two serious issues with .webp on WordPress:

1 – .webp Browser Support

While Chrome, Edge and Firefox do support webp, Safari, Internet Explorer and KaiOS browsers have either no support or limited support for .webp

2 – Can’t Upload .webp files to WordPress

If you try to upload a .webp file to a WordPress site, it will error out with “Sorry, this file type is not permitted for security reasons.”.  There are four ways to allow :

1. Manually modify the approved file format list by adding the following to APPEARANCE > THEME EDITOR > FUNCTIONS.PHP

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

   .

2. Remove all file format upload restrictions (bad idea) by adding the following to your CONFIG.PHP file (in the root of the WordPress installation folder, so you can access this with FileZilla or through your hosting companies file manager)

   define( 'ALLOW_UNFILTERED_UPLOADS', true );
   .

3. Use a plugin to modify WordPress’ allowed file format list like FILE UPLOAD TYPES
   .
4. Use the paid version of a WordPress graphic optimization plug in like Optimole or ShortPixel.  Note that after quite some time looking we were unable to locate any free tools that handle this conversion.

How .webp Works

In the unlikely event you are interested in the mechanics of how .webp works, you can read the Google Webp Developer page HERE which explains such common terms as Adaptive Block Quantization,  VP8 Intra-prediction Modes and LZ77 Backward Reference.  Enjoy!