Images are typically one of the greatest issues for slowing down web pages. They does not only increase the loading time, but also occupies lot of spaces and resources on your server storage. If We can compress or minimize the file sizes, then it helps to reduce the website loading speed. Beside that, We can implement webp image upload feature to optimize website loading speed.

WebP is a modern standard to serve faster and reduce loading time than before. If you are using WordPress, you can easily serve all images in WebP with simple no of steps.

In this article, I will implement methods with necessary description without using any plugin to implement WebP images to serve automatically on supported web browser. WebP is mostly supported in Google Chrome, Opera, Mozilla Firefox, Microsoft Edge and some Android browsers. According to Google Analytics reports you may find that more than 49% people uses these supported content type browser. So, it’s high time to go with this technique.

Benefits of Implementing WebP Image format

  • In comparison to the size of normal JPG or PNG image, same dimension image WebP can serve in small bytes. Hence, your Images will load faster.
  • Serving Quality Images in small bytes, means dramatically saving bandwidth in a smarter way.
  • Keep your website updated with the market trend. Don’t loss conversation just due to bull-cart style loading problem.

You need to configure some Apache Webserver settings via .htacccess so browser and web server can treat it properly like all other images.

Your Web Hosting server may not know from which mime type this kind of format images they need to serve. So we must add proper mime type to setup expiry header for caching.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

WordPress do not support uploading of WebP format image by default. So, We have to add following code in your theme functions.php It would be helpful in case if you will upload your images directly from WordPress Dashboard > Media option.

function webp_upload_mimes( $existing_mimes ) {
// add webp to the list of mime types
$existing_mimes['webp'] = 'image/webp';
// return the array back to the function with our added mime type
return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Done.

LEAVE A REPLY

Please enter your comment!
Please enter your name here