Google’s new WebP image format promises faster loading times and smaller file sizes for web images. For example, the featured image above was rendered as a PNG at 1.3mb, then it was saved as a JPG at 133k, then saved again as a WebP for a reduced size of 63K. As you can see in this demonstration there is a huge difference in size.
- PNG – 1.3m (initial image)
- JPG – 133k (with medium quality setting 6)
- WebP – 63k (with medium quality setting 6)
If you’re a web designer or developer and want fast websites, you must know how to convert your images to this new format. This tutorial will show you how to convert images to WebP using Adobe Photoshop.
- Open Photoshop and select the image you want to convert.
- Go to “File” and select “Export” then “Save As” (it Must be a jpg, png, or a gif).
- You’ll see a dropdown menu called “save as file type” below where you name the file. Select “WebP” from the dropdown menu.
- You’ll see a preview of the image in the WebP format, and you can adjust the quality settings as needed.
- Once satisfied with the settings, click “Save” and choose a location to save the image. That’s it. Your file is ready to upload.
Note: If you don’t see the option “WebP” in the dropdown menu, it’s probably because your version of photoshop doesn’t support the format. You can check for updates or install the plugin from the Adobe website.
That’s all there is to it! You’ve now successfully converted an image to the WebP format using Photoshop. Nowadays, most browsers support it, so using WebP can significantly improve your images’ loading speed and enhance your website’s user experience. Some older browsers don’t support WebP, so you might need to provide alternative formats for users on older browsers.