How to upload webp image in WordPress website

I know you heard about an image format .webp it is a modern image format that provides superior lossless and lossy compression for images on the web , meaning it will reduce the size of your .jpg , .png or any image format. You can see  .webp is important specially when you are running a google website pagespeed insight it will keep on appearing in the results. Some of the website owners are hesitant to use webp image format because old browsers will not support it but worry no more there are several solution to it for example using <picture> method instead of <img> or using a third party service that will automatically display webp format if the browser is supporting WebP.

A list of web browsers that natively support WebP:

WebP lossy support

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)

WebP lossy, lossless & alpha support

  • Google Chrome (desktop) 23+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+

WebP Animation support

  • Google Chrome (desktop and Android) 32+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 19+

 

Pros and Cons of using WebP image format ( take note it is my own opinion )

Pros:

  1. Compression save up to 50% of file size without losing the quality
  2. Increase score in google website pagespeed insight

Cons:

  1. Browser support we can’t deny the fact other people will still use old browers
  2. Extra step converting a png or jpg format to webp you can do it using website like this one

 

By default when you upload a WebP image to a WordPress website it will display an error saying “Sorry, this file type is not permitted for security reasons” in order to fix the error go to your functions.php make sure you are using a child theme to avoid any issue when you will update the version of your theme in the future. Paste the following code and save it you will be able to upload WebP file type.

I won't mind if you share the article. THANK YOU

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Comments are welcome.

Leave a Comment

Your email address will not be published. Required fields are marked *

ENTER YOUR EMAIL AND GET 10% OFF

your first website project!

I promise I won’t send any spam.