How to use Photoshop with WordPress 5.8’s WebP Support
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!?
I’ve never created a WebP image before. I just figured this was some exotic technology only to be touched by superintelligent AI’s with ShortPixels, reaching beyond our Imagifynations!
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.
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
Applications/Adobe Photoshop/Plug-ins/
- 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.
Summary
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!
You have echoed my sentiments exactly. The tools to use .webp natively are VERY limited, and any search will provide you methods to convert to .jpg/.png, rather than out of the box support for .webp.
Changing the way people have used .jpg for so long will probably take some time, and I feel it will always be an end step of converting with tools within WordPress …
We will need to wait for Google to tell everyone that .webp images will improve your pagespeed score for it to gain some real momentum…;)
Hi Daan
Great post!
Your images (WebP of course) are not loading on this page with Safari (they are just fine on Chrome)… thought you might like to know. Do you have fallbacks set?
Our workflow for images is little changed in many years:
(1) Create images (e.g. in PS),
(2) “Save for web” and optimize properly,
(3) Upload to WP,
(4) Curse Lighthouse and PageSpeed for emphasizing WebP,
(5) Curse various image “optimization” plugins for degrading, bloating or otherwise ruining perfectly optimized images instead of just re-wrapping to WebP,
(6) Wish for native/OOTB WebP support from all image editors (including packaged apps like MSPaint and Apple’s Preview, plus pro apps like Photoshop and CaptureOne).
Well, 1-3 have not changed. 4-6 are newer though.
Do you have any comments on WebP as a legitimate format in future, with adoption by most available image editors (including those published by Google’s competitors)?
It’s always a challenge to invent your own standard and force your competitors to adopt it. However, with Google’s leading position in search at its disposal, that might just be possible in this case.