Webp is an image format developed by Google which supports maximum compression under Google’s initiative to ‘make the web faster’.
It is an image file format intended as a replacement for JPEG, PNG, and GIF file formats which supports both lossy and lossless compression as well as animation and transparency.
Google defines webp as:
A modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
Google announced the WebP format on September 30 2010 and released the first stable version of its supporting library in April 2018.
Along with supporting image compression just like png, webp also supports transparency and animation which is not possible with jpeg files.
How to create webp images?
One of the simplest and easiest ways of converting png or jpeg files to webp is using an online file converter like CloudConvert. With CloudConvert’s free version you can convert 25 files per day, which is not convenient for big website owners. While other converters show lots of ads which is frustrating.
Google released the Webp converter library which is a command line tool and is also not convenient for people without coding experience or beginners and Windows Defender keeps blocking it.
Most people edit their images with Photoshop. It would be so great if there would be a plugin that could open webp images in Photoshop and convert normal images to webp. Google understood this need and created a photoshop plugin to read and write webp files, WebpShop.
Note: The latest version of photoshop supports webp format. However, some features such as preview at encoding and animations are missing, stated by Google in the Readme of WebpShop’s repository.
How to install the Webp Shop plugin in Photoshop (on windows)
- Download the .8bi file from this link https://github.com/webmproject/WebPShop/releases/download/v0.4.3/WebPShop_0_4_3_Win_x64.8bi.
- Move the downloaded file to
C:\Program Files\Common Files\Adobe\Plug-Ins\CC.
- Restart photoshop. For a quick verification if the plugin is working on not, open Photoshop and click on Help > About Plug-ins > WebpShop.
Like this: screen recording of validating if the WebpShop plugin is working or not..
If you can see this, the Webp Shop plugin is working and you are good to go.
If you are not able to find WebpShop in About Plug-ins, try updating your Photoshop application to the latest version.
If it is still undetected, try putting the plugin file in each of these folders (For Windows).
C:\Program Files\Common Files\Adobe\Plug-Ins\CC
C:\Program Files\Common Files\Adobe\Plug-Ins\CC\File Formats
C:\Program Files\Adobe\Adobe Photoshop 2022\Plug-ins
Google recommends removing other plugins if there is a plugin conflict and restarting the computer. It also recommends checking https://github.com/webmproject/WebPShop/issues to see if it is already mentioned or to open a new bug report if not.
How to run and use the Webp Shop plugin in Photoshop
-
Create an image in Photoshop - I am editing the cover image of this article in Photoshop and I will show you how to export this Photoshop project in webp format.
As you can see in the image this Photoshop project contains various image formats like png and jpeg along with text elements and clip masks. We will now convert this to webp with the help of Google’s WebpShop plugin. -
Click on the File option and then select Save As.
-
Select WebpShop as Save as type in the dialogue box.
-
You may see the warning button but you can ignore it. Click on the Save button.
-
The WebpShop window will open.
You can click on the Preview checkbox to see the image preview along with the file size which gets updated upon changing the WebpShops’ settings. - You can play with WebpShops’ settings and see live changes in the preview image.
The default value is 75. For the best quality, you can keep it 90-98. For best compression 20-60 is best. - Click on OK to finalize your selection and export your image.
There are also a few offline windows applications which you can find on the web to convert the images offline. But Google’s official Photoshop plugin seems more trustworthy than those free applications and also has a great UI compared to those.
Thanks for reading. Tag @MayankVikash1 on Twitter to share your feedback.
References
Written by Mayank Vikash.
Published on 28th October 2022.
Last updated Oct 30, 2022.