Encoding existing image files to Google WebP format

WebP is an image format introduced by Google in 2010. It uses specific technique to compress image and reduce size significantly while not changing the image quality on the larger scale. Tipically it can reduce file size of even best optimized png or jpeg image for around 20-30% while image quality is almost the same.

It supports both png and jpeg and it even supports alpha channel so if you want to compress your png images with transparency, WebP can be used there as well.

This can be beneficial in traffic from countries with poor connection but also for reducing the bandwidth from your website as well. Although it is there for almost 8 years, it is still not widely adopted by different browser vendors other than Google and Chrome browser.

If you check https://caniuse.com/webp you can see that only Chrome is fully supporting it, but it still makes around 75% of global browser usage.

However there are techniques to implement fallback images in case WebP is not supported, but this of course requires additional effort in development and especially in testing in case you already have long running website to which you want to apply WebP.

If you decide to got with WebP and optimize your website for a little more boost on the load then this is the article for you.

Google made compression to WebP pretty easy with cwebp utility and simple conversion can be done with the following example command cwebp -q 50 -lossless picture.png -o picture.webp

Note cwep utility can be downloaded from Google's page

https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html or you can download binaries for Windows x64 of version 0.6.1 along with the PowerShell script from this article page download section

Following PowerShell script loops through all png and jpeg images in the specific folder including subfolders and creates the report of the saved data.

Param( [Parameter(Mandatory=$true)] [string]$folder ) $libPath = $PSScriptRoot + "\lib\libwebp-0.6.1-windows-x64\bin\cwebp.exe" $files = get-childitem $folder -recurse -force -include *.jpg, *.png foreach($inputFile in $files){ #Call cwebp $inputFilePath = $inputFile.FullName $outputFilePath = Split-Path -Path $inputFile.FullName $outputFilePath = $outputFilePath + "\" + [System.IO.Path]::GetFileNameWithoutExtension($inputFilePath) + ".webp" $args = "-q 80 " + $inputFilePath + " -o " + $outputFilePath Start-Process -FilePath $libPath -ArgumentList $args -Wait $originalFileSize = (Get-Item $inputFilePath).length $optimizedFileSize = (Get-Item $outputFilePath).length #Prepare output $savedBytes = $originalFileSize - $optimizedFileSize $savedPercentage = [math]::Round(100-($optimizedFileSize / $originalFileSize)*100) $message = $inputFilePath + " " + $outputFilePath + " " + $savedBytes + "bytes " + $savedPercentage + "%" Write-Output $message }

It relies on the cwebp utility from Google and executes it with a different input and output.

In the end you get the report with input, output path and how much data is saved, so you can also make an analyses whether the saved amount of data pays of for you to continue with the WebP implementation on your existing website.

PS C:\Users\dejan> C:\Gitlab\powershell-scripts\Convert-WebP.ps1

cmdlet Convert-WebP.ps1 at command pipeline position 1

Supply values for the following parameters:

folder: C:\temp\images

C:\temp\images\image.png C:\temp\images\image.webp 7768bytes 27%

References

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.