Image Optimisation: How to compress & convert images to WebP using WebP Converter by Google on Windows
<div style=”transition: none 0s ease 0s; display: block;” data-rss-type=”text”> n <p> n <span style=”display: initial;”> n n According to Google, WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs & WebP lossy images are 25 – 34% smaller than comparable JPEG images at equivalent SSIM quality index.n n </span> n </p> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: initial;”> n <span style=”display: initial;”> n n Before you can begin compressing your images to WebP, you will need to download and installn n </span> n </span> n <a href=”https://developers.google.com/speed/webp/docs/precompiled” target=”_blank” style=”display: initial;”> n n WebP Convertern n </a> n <span style=”display: initial;”> n <span style=”display: initial;”> n n . You can install WebP Converter on Windows, macOS, or Linux.n n </span> n </span> n <span style=”display: initial; font-weight: bold;”> n n This post covers converting your images to webp on Windowsn n </span> n <span style=”display: initial;”> n n ; we will post separate articles on how to compress images on macOS and Linux. The best part about WebP images is that it is supported by all modern web browsers like Chrome, Opera, Microsoft Edge, Mozilla Firefox.n n </span> n </p> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: initial;”> n <span style=”display: initial;”> n n FYI. All images on this blog post are WebP images with the exception of the sample image. If you believe we have missed any part; we would love to hear from you, please let me know what you think by emailing us atn n </span> n </span> n <a href=”mailto:[email protected]” target=”_blank” style=”display: initial;”> n n [email protected] n </a> n <span style=”display: initial;”> n <span style=”display: initial;”> n n . We have spent a lot of energy creating this article for you; if you do like the article consider liking & following us on our social median n </span> n </span> n <a href=”https://www.facebook.com/urdigitalau/” target=”_blank” style=”display: initial;”> n n Facebookn n </a> n <span style=”display: initial;”> n <span style=”display: initial;”> n n ,n n </span> n </span> n <a href=”https://www.twitter.com/urdigitalau/” target=”_blank” style=”display: initial;”> n n Twittern n </a> n <span style=”display: initial;”> n <span style=”display: initial;”> n n ,n n </span> n </span> n <a href=”https://www.linkedin.com/company/urdigitalau” target=”_blank” style=”display: initial;”> n n LinkedInn n </a> n <span style=”display: initial;”> n <span style=”display: initial;”> n n ,n n </span> n </span> n <a href=”https://g.page/r/CdcyTSa1ySnOEAE” target=”_blank” style=”display: initial;”> n n Googlen n </a> n <span style=”display: initial;”> n <span style=”display: initial;”> n n & sharing it with whom you believe may benefit from it.n n </span> n </span> n </p> n <p> n <br/> n </p> n <p> n <span style=”display: initial;”> n <span> n n n n </span> n <br/> n </span> n </p> n <h2 style=”line-height: 1.2;”> n <span style=”display: initial; font-weight: bolder;”> n n Steps to download and install WebP Convertern n </span> n </h2> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: initial;”> n n To download the latest version of WebP Converter Library click on the n n </span> n <a href=”https://developers.google.com/speed/webp/docs/precompiled” target=”_blank” style=”display: initial;”> n n Google Developers WebP Converter Download Pagen n </a> n <span style=”display: initial;”> n n .n n </span> n </p> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/webp-converter-download-page.webp” alt=”WebP Converter Download Page”/> n</div> n<div style=”transition: opacity 1s ease-in-out 0s;” data-rss-type=”text”> n <p> n <span style=”display: unset;”> n n cwebp is a command line encoder, part of the WebP Converter Library and it helps to convert a single image to WebP file format. It currently supports PNG, JPEG, TIFF, WebP or raw Y’CbCr samples. Please note it currently does not support animated PNG and WebP files. Click on downloads repository and download the latest version. See screenshot below on how to identify the latest version.n n </span> n </p> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/webp-converter-downloads.webp” alt=”WebP Converter Downloads”/> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/libwebp-downloads-repository.webp” alt=”libwebp downloads repository”/> n</div> n<div style=”transition: opacity 1s ease-in-out 0s;” data-rss-type=”text”> n <p> n <span style=”display: unset;”> n n After downloading, save and extract the compressed file. The default folder name when extracting the compressed file will be the same as the compressed file.n n </span> n </p> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/libwebp-downloaded-file.webp” alt=”libwebp downloaded file”/> n</div> n<div style=”transition: opacity 1s ease-in-out 0s;” data-rss-type=”text”> n <p> n <span style=”display: unset;”> n n cwebp is a command-line utility and you will need to enter exact directory names and filenames for it to work properly. For this, I recommend you keep easy-to-remember filenames and folder locations. As a personal preference, I have changed the folder name from libwebp-1.2.1-windows-x64 to webp, so that it is easy to remember.n n </span> n </p> n <p> n <br/> n </p> n <p> n <span style=”display: unset; font-weight: bolder;”> n n Note:n n </span> n <span style=”display: unset;”> n n Before you can start converting your files to WebP, you will need to provide it with an input image file and the location and name of the output file. For the sake of simplicity, I recommend creating 2 additional folders “input” and “output” as seen in the screenshot above. I also created these folders on the root D Drive to keep the file path short. This will come in handy when we are compressing the images. If you do not have additional drive partitions, you can also do this on C Drive. Just remember the folder location.n n </span> n </p> n <p> n <br/> n </p> n <p> n <span style=”display: unset;”> n n Next, I recommend you copy all the images that you need to convert to the input folder. Open Command Prompt by pressing the Start button and in the search box enter cmd.exe. I am using n n </span> n <a href=”http://www.classicshell.net/” target=”_blank” style=”display: unset;”> n n ClassicShelln n </a> n <span style=”display: unset;”> n n but it could be different for you. Normally Command Prompt is located under Program Files �� Windows System �� Command Prompt.n n </span> n <span style=”display: initial;”> n <span> n n n n </span> n </span> n </p> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/webp-bin-directory-contents.webp” alt=”WebP bin directory contents”/> n</div> n<div style=”transition: opacity 1s ease-in-out 0s;” data-rss-type=”text”> n <p> n <span style=”font-style: italic; display: unset;”> n n Change the directory location to your webp folder. In my case the webp folder is located at D Drive �� webp. So for me, my first command is D: and Enter And then cd webp and Enter to change the directory to webp. The cwebp.exe utility is located in the bin folder inside webp, so enter cd bin and then enter to change the working directory to ‘bin’. Enter the dir command to see the contents of the directory.n n </span> n </p> n <p> n <br/> n </p> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <h2 style=”line-height: 1.5;”> n <span style=”font-weight: 600; display: initial;”> n n Steps to compress and convert your image to WebPn n </span> n </h2> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: initial;”> n n To use the utility, you will need to provide it with an input file and output file. Here is the command syntax from the bin directory:n n </span> n </p> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <code style=”display: initial;”> n n cwebp <input file with full path> -o <output file with full path>n n </code> n </p> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: initial;”> n n You can also choose additional parameters depending on your requirements. All parameters are listed on the n n </span> n <a href=”https://developers.google.com/speed/webp/docs/cwebp” target=”_blank” style=”display: initial;”> n n documentation heren n </a> n <span style=”display: initial;”> n n . I have downloaded a stock image for demonstration purposes, which you can see below.n n </span> n </p> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/cat.png” alt=”cat stock image”/> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/cat-image-properties.webp” alt=”cat stock image properties”/> n</div> n<div style=”transition: opacity 1s ease-in-out 0s;” data-rss-type=”text”> n <p> n <span style=”display: unset;”> n n The notable points to remember here:n n </span> n </p> n <p> n <br/> n </p> n <ul> n <li> n <span style=”display: unset;”> n n Filename: cat.jpgn n </span> n </li> n <li> n <span style=”display: unset;”> n n Location: D:\inputn n </span> n </li> n <li> n <span style=”display: unset;”> n n Size: 3.91 MBn n </span> n </li> n </ul> n <p> n <br/> n </p> n <p> n <span style=”display: unset;”> n n Now. lets convert this image to webp. To convert this image, the command in the bin folder will be:n n </span> n </p> n <p> n <br/> n </p> n <p style=”line-height: 1.5; direction: ltr;”> n <code style=”display: initial;”> n n cwebp d:\input\cat.jpg -o d:\output\cat.webpn n </code> n <span style=”display: initial;”> n <span> n n n n </span> n </span> n </p> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/cat-webp-converted-command.webp” alt=”cat webp converted command”/> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/cat.webp” alt=”cat webp converted file”/> n</div> n<div> n <img src=”https://irp.cdn-website.com/d4f2c851/dms3rep/multi/cat-webp-converted-properties.webp” alt=”cat image webp converted properties”/> n</div> n<div style=”transition: opacity 1s ease-in-out 0s;” data-rss-type=”text”> n <p> n <span style=”display: unset;”> n n We have now successfully converted the image to WebP. The filesize is now 217 KB down from 3.91 MB. Open both images side by side and see if you can notice any difference in quality.n n </span> n </p> n <p> n <br/> n </p> n <p> n <span style=”display: initial;”> n <span> n n n n </span> n <br/> n </span> n </p> n <h2 style=”line-height: 1.2;”> n <span style=”display: unset;”> n n Tips & Troubleshootingn n </span> n </h2> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: unset;”> n n If you do encounter an error, here are some troubleshooting tips:n n </span> n </p> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <ul> n <li> n <span style=”display: unset;”> n n Ensure the image to convert exists on the location specified.n n </span> n </li> n <li> n <span style=”display: unset;”> n n Check that the output folder exists.n n </span> n </li> n <li> n <span style=”display: unset;”> n n Check the syntax of the command closely to ensure there are no errors.n n </span> n </li> n <li> n <span style=”display: unset;”> n n If you still cannot get it to work, book in your n n </span> n <a href=”https://calendly.com/urdigitalau/30-minute-seo-consultation-free” target=”_blank” style=”display: unset;”> n n free 30 minutes SEO Consultationn n </a> n <span style=”display: unset;”> n n and I will be happy to sort the issue for you.n n </span> n </li> n </ul> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: unset;”> n n You can use online conversion tools to convert images to WebP, but I do not prefer them as I am not comfortable uploading our images to 3rd party websites.n n </span> n </p> n <p> n <span style=”display: initial;”> n <br/> n </span> n </p> n <p> n <span style=”display: unset;”> n n Partial Content Credit: n n </span> n <a href=”https://google.com.au/” target=”_blank” style=”display: unset;”> n n Googlen n </a> n </p> n</div>