With Photoshop version 23.2 (released February 2022) Adobe have added full support for the WebP file format. You can open, edit and save WebP files natively in Photoshop. This was previously only available using an optional add-in.
WebP was developed by Google as a replacement for JPG, PNG and GIF. It is not new, having been first announced in September 2010, over that time support for the format has slowly been increasing.
WebP supports both transparency and animation, neither of which is available in JPEG, for these features we would normally use PNG or GIF. WebP has a lossless (no compression) option as well as lossy compression options like JPEG. WebP has a bit depth of 8-bits, like JPEG.
The WebP compression algorithm creates smaller files than JPEG (or higher quality for the same size). Google claim file size savings of around 25-35% over JPEG, but my tests showed bigger savings than that.
I decided to do some tests on four different images of my own (see Figure 1).
Fig 1 - Example images
As with all compression algorithms the amount of compression (and therefore reduction in file size) varies depending on the image content. The more intricate detail and tones in the file the less compression you’ll get. Images with large areas of similar colour (eg a lot of blue sky) will compress a lot more.
You’ll note in Figure 1 that the compression results with WebP do yield some impressive results.
Comparing the highest quality JPEG with the highest quality compressed WebP, the results across the four different files were 36%, 53%, 44% & 48% or an average of 45% better compression.
Comparing images with slightly more compression, the JPEG 10 vs WebP 80, the results across the four different files were even more impressive at 57%, 71%, 74% & 58% or an average of 65% better compression.
If you’re looking to save images with transparency, and you usually use PNG, you’ll see impressive results too. My file size comparisons showed results of 63%, 67%, 67% and 36%, or an average of 58% better compression (comparing PNG Large to WebP Lossless). The savings would be even greater using WebP at a high-quality lossy setting.
If you are someone who uses TIFF files because you want a completely lossless image the results of comparing TIFF to Lossless WebP is even more impressive. My file size comparisons showed results of 81%, 87%, 84% and 96%, or an average of 87% better compression. Please note though these were 16-bit TIFFs, but WebP Lossless files are still significantly smaller than 8-bit TIFFs.
As far as quality goes, at fit-to-screen size I really could not detect any visual image quality difference with any of the WebP Lossless, WebP 100 or WebP 80 files compared to the originals. Even pixel-peeping up to 200-300% there was no visible difference with the WebP at the 100 or 80 quality setting. Just like JPEG, once you push the compression further you will start to see pixel differences and increasing artifacts, this is inevitable with heavy compression. There is no question that WebP will offer you either increased quality (if you don’t want to save file space) or decreased file space at the same quality when compared to JPEG.
If you want to view another detailed look at some image comparisons, I would recommend this YouTube video from Greg Benz. It is worth noting his caveat about images with high colour frequency images like night cityscapes and the loss of colour intensity he notes with WebP at higher compression settings.
The vast majority of web browsers now support WebP. According to Wikipedia as of November 2021 the web browsers that support WebP have 96% market share, so perhaps it is time to consider a change.
There is ample evidence that the faster a website performs the better the engagement from users it receives. Hosting sites usually impose storage limitations (or want more money for more space). So, if you have an image heavy website, perhaps converting images to WebP will be a worthwhile time investment for you.
Of course, in order to do this your web hosting platform will need to support WebP and many do. If like me though you use Adobe Portfolio platform for your website you will have to wait a while longer, as at the time of writing, Portfolio does not allow WebP images.
Whilst Facebook has supported WebP files for some time I have noticed that the web browser version of Instagram currently does not allow uploading of WebP files. I’m sure these things will change over time.
The implementation of WebP into the new version of Photoshop is intuitive. Just open and edit WebP files as you would any other file type. If you want to save an image as a WebP file you can do so in the Save As or Save A Copy dialogs by simply choosing WebP from the Formats drop-down (see Figure 2).
Fig 2 - File Save a Copy dialog
You will then be presented with the WebP Options dialog (see Figure 3), where you can choose Lossless or Lossy (with a choice of Quality), and other options like whether to save XMP and EXIF metadata and Photoshop Extras (print profiles/settings, paths, guides etc).
Fig 3 - WebP Options dialog
So for smaller files and greater flexibility and simplicity (one file type that supports raster images as well as transparency and animation), it would certainly be worth investigating WebP.
In my own case, I am going to start using WebP for the files I post to social media, and when Portfolio is updated to support WebP I will begin converting the images on my website to WebP to see if it improves performance (I expect it will).
This article was first published in the April 2022 issue of Artists Down Under magazine.