-
-
-
How to export images as WebP in Adobe Photoshop
The WEBP format was first released by Google in 2010 as an attempt to make an improved version of JPG, PNG, and GIF. The format had better compression allowing even smaller images. It also supported transparency and moving images, making it the perfect file format for the internet. Now, almost 13 years later, WEBP has gained 97% web browser support, meaning you no longer need any fallback when adding WEBP images to your website. In general, images saved in the WEBP format will be a minimum of 20% smaller than the competitors. When saved using lossless compression, WEBP will be approx. 25%-34% smaller than the JPG version, PNG 26% smaller, and 19% smaller than animated GIFs.
Even though it is now more than 10 years since WEBP was first released, it was first in the recent release of 23.1 of Adobe Photoshop that we saw native support for WEBP. Older versions still don't support the file format, but luckily there is a fix. Google made a plugin that can be installed in Adobe Photoshop, allowing you to compress and export your images in the WEBP format. The plugin is relatively easy to install. This tutorial will go through the steps to get you started. So without further ado, let's begin.
#1 Download the plugin
Start by heading to the Google website, where you will find the plugin. At the top of the article, you will find a link to GitHub, where you can download the newest release. Click the link, and look for the release section once you get to GitHub's website.
Find the newest release, pick the version that fits your operating system, and download it to your device.
#2 Move the plugin file
Now that you have the plugin file downloaded, it is time to move it to Adobe Photoshop. A plugin file differs from a standard installation file, so instead of installing it, you will move it into a specific folder.
Copy or cut the plugin file (.8bi on Windows and .plugin on Mac) and move it to the plugin folder that Adobe Photoshop uses.
On Windows, this is usually the path:
C:\Program Files\Common Files\Adobe\Plug-Ins
on Mac, this is the path:
/Library/Application Support/Adobe/Plug-Ins
Once you have moved the plugin file into the Plug-Ins folder, you should be ready. The next time you start Adobe Photoshop, it should be available.
#3 Start or restart Adobe Photoshop
If you are already running Adobe Photoshop, you should close it and start it again. The plugins are read when the software starts, so it will only show when you restart the program.
If you want to export an image as a WEBP file, you can do it by clicking on the Save as link in the menu. Choose the file extension WEBP and click save. When you click save, another window will open. Here you can adjust the compression. 0-97 means lossy, 98-99 is near-lossless, and 100 is lossless.
Update (06 Feb 2023)
Since version 23.2 Adobe Photoshop has had full support for WebP, which also means you will be able to export images as WebP natively. Therefore if you have version 23.2 or newer, You no longer need the plugin/extension.
Author
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
