As a blogger, I use Photoshop and Illustrator to crop/edit my screenshots and create featured images. Since WordPress 5.8 includes WebP support I wanted to see if I could incorporate Photoshop WebP support into my workflow — without becoming less efficient ofcourse!
Advantages of WordPress WebP support
While WebP images have been around for a while, WordPress never put in any work to support it natively. Until now!
WordPress 5.8 offers native support for WebP images, which means a few (cool) things:
- No need to use a plugin to offer compressed images to your readers.
- No more on-the-fly exchanging of your JPEG/PNG images for the WebP alternative.
- You can immediately upload compressed WebP images while writing your posts and pages.
So that’s a few perks in terms of performance and usability, but wait. What!? Upload a WebP image? Are you insane!?
But, no. Apparently it’s a compressed image format, just like PNG or JPEG, in which we, mere mortals, are able to open, edit and yes, even save files — I’ll give you a minute to catch your breath.
Drawbacks of WordPress WebP support
Although it might seem cool at first, there are a few things you should consider before cancelling your subscription to your image compression plugin.
- WebP is a modern image format, which means it’s not supported by legacy browsers. The most significant ones being IE 11 and Safari (pre-Big Sur)
- Image Editor software packages don’t support the WebP support (natively)
Image compression plugins for WordPress only display WebP images to browsers that support it, and keep the original image as a backup for legacy browsers.
WordPress’ WebP support solution doesn’t offer such a fallback. So if your blog is visited by legacy browsers often, this should be enough reason to leave your current workflow unchanged.
However, if your blog is never visited by legacy browsers and you want to offer your users the best experience, WordPress WebP support is the answer.
Let’s see why we should integrate WordPress WebP support into our workflow using Adobe Photoshop.
The Wait is Over.
Get the Newsletter you've always wanted, now!
Sign up to receive Biweekly, Free Optimization Tips for WordPress.
No spam. I promise.
Why add Adobe Photoshop WebP support?
Just like mosy popular Image Editors, my favourite editor Adobe Photoshop doesn’t natively support WebP images either.
As a WordPress user, being able to save and edit WebP images directly in your Image Editor offers several advantages:
- Images use up less disk space (26% less compared to PNG!) on your system
- You can cancel your subscription to any image compression services you might use, and
- You can delete the corresponding WordPress plugin!
So, basically, adding Photoshop WebP support saves disk space, saves $$$, and you might even gain some performance!
Add Photoshop WebP Support with WebPShop
Luckily, the good folks over at Google took it upon themselves to add WebP support to Photoshop.
But Google Devs being typical devs, they provided the most unclear installation instructions known to man.
So, here’s the human readable instructions on how to add WebP support to Adobe Photoshop:
Make sure Adobe Photoshop isn’t running before continuing.
- First, obtain the Adobe Photoshop Plugin file for your platform. All latest releases are available here. WebPShop is available for MacOS and Windows X64/ARM64.
- As a Windows user, save the file to
C:\Program Files\Adobe\Adobe Photoshop 2021\Plug-ins\
- As a MacOS user, save the file to
- As a Windows user, save the file to
- Once the download is finished, run Adobe Photoshop.
On macOS 10.15+, the prompt “WebPShop.plugin cannot be opened because the developer cannot be verified” can be bypassed by running the following in Terminal (Finder > Applications > Utilities):
sudo xattr -r -d com.apple.quarantine /Applications/Adobe\ Photoshop\ 2021/Plug-ins/WebPShop.plugin
Once Photoshop is up and running, you can immediately start using the Plugin from the Save… or Save as… dialogue. After completing the dialogue a quick prompt will appear allowing you to configure several compression options:
- Quality: the documentation states that 70 is the best setting.
- Compression: leave this to Default. While you’d expect Slowest to offer higher compression, I’ve seen filesize slightly increase while using this setting. Fastest increases filesize significantly (~25%) defeating the purpose of WebP IMO.
- Other options include the ability to keep certain Metadata elements. I’d defintely suggest to checkout the Preview before hitting OK.
As a WordPress blogger you might’ve been using a compression service to serve your images in the compressed WebP image format for the past few years.
As of v5.8, WordPress offers native WebP support. While this might sound cool at first, there are a few things to consider before cancelling your subscription to e.g. ShortPixel or Imagify.
For example, does your image editor offer WebP support? If not, it’d be much more efficient to stick with your image compression plugin.
If you’re a Adobe Photoshop user, then this post is for you. This post offers clear instructions on how to add Adobe Photoshop WebP support using a plugin offered by Google’s own developers: WebPShop.
Have you integrated WordPress’ native WebP support into your workflow? If so, I’d love to read it in the comments!