Converting existing website images to Google WebP using PowerShell

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.

Caniuse Webp

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.


About the author

DEJAN STOJANOVIC

Dejan Stojanovic is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform includion ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

JavaScript

read more

SQL/T-SQL

read more

Umbraco CMS

read more

Comments for this article