Adding Webp Image format on your site tutorial

Why use Webp on your website?

Webp is image format from Google.I like calling is picture format for web (internet).You might be aware of JPEG (jpg) files.They are the most popular image file format.The second one is PNG (png).Most of the image files you might have or seeing on Internet is either JPEG or PNG.Some might also belong to GIF. As of now Webp (webp) image format is not popular compared to these image formats.

You might be using JPEG format images on your website along with some PNG format images.This is the case with most of the sites.But in this post We will discuss

  • Benefits of using webp over other image formats
  • Converting your existing images to webp
  • Adding webp image support to your website

Webp Advantages

Website load time has become very important for

  • Visitor Experience
  • Search Engine Optimization

Slow websites will be penalized by Google most significantly in Mobile Search. Optimizing website for speed is huge topic.I have written several posts on website performance tuning.You can get the list of posts on this link.

Webp image format reduces file size considerably.According to Google (see here) it reduces file size by 25% approximately than PNG and JPEG images.The picture quality remains intact but file size is smaller.This is covered in Converting your image files to Webp section.

Both the images were produced using GIMP with 70% quality.A standard mentioned in website optimization techniques.I was impressed with Webp performance and I assume you also liked it.But the biggest road block in using Webp is migrating your existing images to Webp format and then adding it on your website.If you are just starting out your online venture then it is better to use Webp.

Converting your image files to Webp

Google provides command line tools to convert JPG or PNG images to Webp format.But there are other solutions available too.My personal favorite is GIMP.GIMP is free and best image editor.Both the methods have pros and cons.Command line tool method not have user interface.

So it is time consuming and many may not like it.But the image generated by it is smaller in size than the one generated by GIMP.I have converted a JPG file to Webp file using both methods.The comparison is below

  • Original JPG File Size – 19KB
  • Command line tool converted webp image Size (Quality Factor is 80) – 12 KB
  • GIMP converted webp image size (Quality factor is 80) – 14 KB
  • Savings in Command line method – 36%
  • Savings in GIMP method – 26%

My personal preference is GIMP method as it is user friendly and less time consuming.

Command Line Tools

You can download zip packages from this link according to your operating system.They offer packages for all major operating system Windows,MacOS and Linux.After downloading the ZIP archive you need to extract it.For Linux they offer tar.gz packages.As command are same for both Linux and Windows I will cover Linux here.Linux users can use same command after changing directory to bin directory inside the extracted package.

After extracting the package you can copy it to C drive.You can rename the extracted folder to something short.I renamed the folder to webp.

  • Now you need to open command prompt (Start –> Run –>) then enter cmd
  • On the command prompt you can type cd .. command to reach up to C drive.
  • Now enter below commands to convert jpg image to webp image.
  • cd webp/bin
  • cwebp -q quality factor input file name -o output file name.webp

In above command Quality factor can be any number between 1 to 100.I would recommend using 80.This keeps quality of image intact and decreases file size as well.You need to replace input file name and output file name as per your need.The command and its output is shown in below image

JPG to Webp using cwebp
JPG to Webp using cwebp

In this case I have assumed that the file oo.jpg exists inside webp/bin folder of C drive.This saves lot of typing effort.You can do the same or give fully qualified file name on this command.

Using GIMP

GIMP is open source (free) image editing software.You can create and view Webp images using it.You can download GIMP using this link.After downloading and installing GIMP download Webp package from this link.Install the downloaded Webp package and you are good to go.Now to convert any image to webp format follow below steps

  • Open the JPEG or PNG file using GIMP.
  • After that go to File -> Export option.
  • Mention the new file name.The file name should have extension ending with webp.
  • Export the file.You need to choose the Quality.You can select Quality factor as 75%.
  • The higher the Quality the larger the size so you can try different quality levels to verify trade-off between quality and file size.

Adding Webp image support to your website

You have converted your images to Webp format.Now it is time to upload these images to your website.The uploaded webp images will not be displayed on all the browsers.Currently Webp is supported by Google Chrome,Opera,Yandex,Android Browser,Maxthon and UC browser.With time more browsers like Firefox will support the image format.

But you need to follow below steps for adding Webp support for other browsers like Firefox as of now

  • Download webpjs-0.0.2.min.js and webpjs-0.0.2.swf from this link.You need to right click on the links and click Save as.
  • I would share generic instructions as well as WordPress specific instructions.
  • If you are using WordPress then under wp-content/themes you will have your theme directory.Look for folder js under your theme directory.If it does not exist then create a new folder named js.Upload both these files into js folder.
  • In case you are not using WordPress then you can upload it to any directory of your liking (or web server root).This is applicable for WordPress users as well if they do not want to go with steps mentioned above.
  • In case you are using WordPress then edit header.php file of your theme.Most of the themes have </head> tag within header.php file.Add below line just above </head> line in header.php file.
<script>(function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){var sc=document.createElement('script');sc.type='text/javascript';sc.async=true;
var s=document.getElementsByTagName('script')[0];sc.src='js/webpjs-0.0.2.min.js';s.parentNode.insertBefore(sc,s);}};

If you face any issues after adding above code then use the below code

<script type="text/javascript" src="js/webpjs-0.0.2.min.js"></script>

Above line assumes that you have uploaded webpjs-0.0.2.min.js file in js directory inside your theme directory.But in case you have not uploaded there then the code becomes

<script>(function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){var sc=document.createElement('script');sc.type='text/javascript';sc.async=true;
var s=document.getElementsByTagName('script')[0];sc.src='URL to your uploaded directory/webpjs-0.0.2.min.js';s.parentNode.insertBefore(sc,s);}};

Similar to above if you face any issues with above code use below code

<script type="text/javascript" src="URL to your uploaded directory/webpjs-0.0.2.min.js"></script>

Webp Disadvantages

So currently by using Webp you are making your website faster for approximately 50% of website visitors.Rest of the visitors will experience slow performance.The reason is extra resource getting loaded for these browsers.This is one major drawback of using Webp at this moment.But support for Webp in Firefox is in progress.This will change the scenario drastically.

This website is still using JPEG format along with some PNG images.I have planned migration to Webp in near future.May be after Firefox support for Webp is complete and I have time to convert my images to Webp images.I am using Webm media formats on this site.

Leave a Comment