How to Open and Save WebP Images in Photoshop

Since Safari 14 will finally support WebP images, I wanted to start using them in my tutorials and guides.

I was able to enable WebP uploads in WordPress, but what about Photoshop? It’s annoying to keep using conversion tools all the time.

Luckily, there’s a quick and simple solution that allows you to open and save WebP images in Photoshop!

How to Enable WebP in Photoshop with Google’s WebPShop Plugin

The peeps at Google have created a nice and simple plugin for Photoshop, called WebPShop, which allows you to enable the WebP format.

Here’s what you need to do.

Step 1 – Download the WebPShop plugin from GitHub

Go to the GitHub repository, click on the Code button, and select Download ZIP.

download webpshop plugin for photoshop

Step 2 – Add the file in Photoshop

For Windows users

Unzip the archive and copy the WebPShop.8bi file, currently found in the bin\WebPShop_0_3_0_Win_x64 folder.

webpshop plugin photoshop widnows

Now, you need to paste that file in your Photoshop installation folder, in the Plug-ins subfolder.

Usually, the folder’s default path is:

C:\Program Files\Adobe\Adobe Photoshop\Plug-ins
webpshop plugin in photoshop plugins folder in windows

For Mac users

I don’t have screenshots for you because I don’t own a Mac. ๐Ÿ™

Unzip the archive and copy the WebPShop.plugin file, currently found in the bin/WebPShop_0_3_0_Mac_x64 folder.

Then, you need to paste that file in your Photoshop installation folder, in the Plug-ins subfolder.

I think that the default path is:

Applications/Adobe Photoshop/Plug-ins

Fix for possible error

If you get this error on macOS 10.15+ …

WebPShop.plugin cannot be opened because the developer cannot be verified.

… run this code in your Terminal, in Finder > Applications > Utilities:

sudo xattr -r -d com.apple.quarantine "/Applications/Adobe Photoshop 2020/Plug-ins/WebPShop.plugin"

The path could differ, depending on where you have Photoshop installed, or the name of the folder(s).

Step 3 – Restart Photoshop

If Photoshop was open when you did this, restart it.

Now, you should be able to open and save WebP images.

How to Save Images as WebP in Photoshop

In most cases, you would use the Export > Save for web feature to save images.

That won’t work because you won’t have the WebP format available there.

Instead, you’ll have to use the Save or Save as feature to save WebP images in Photoshop. You’ll find the format at the bottom.

After you click Save, a settings panel will appear, where you can compress the images and stuff. You also have a Preview, which is very useful.

webpshop webp settings in photoshop

Careful! Resulting WebP Images Can Be Larger Than PNGs or JPGs

Normally, I export my screenshots as PNG-8, which looks the same as PNG-24, but the size is a lot smaller.

I thought that by using WebP instead of PNG-8, the size of the images would be even smaller.

But, to my surprise, they weren’t! They were larger unless I used a quality lower than 98, which made them too blurry.

Maybe this is because, most of the time, I scale down the images, which changes the pixelation. I think that’s one of the cases when the resulting WebP image becomes larger.

Even Google says that there are cases when this can happen.

google about webp images being larger than pngs or jpgs
Text from Google Developers

That’s probably why they don’t use WebP images on their own blog, which is pretty weird, since they invented and promote it. ๐Ÿ™‚

So, be careful! Check the size of your WebP images to see if they became larger instead of smaller.

That’s a Wrap

I hope you found the guide useful and comprehensive!

If you have questions or thoughts, please leave a comment or send me a message using the contact page.

Leave a Comment