How to convert an image to WebP?

· Craig Melville

Perhaps you’ve heard a lot about the WebP image format and how it’s going to improve the internet, or you just want to make your website load faster, let’s dive into how to convert an image to WebP.

What is WebP?

Let’s start with the basics, what is WebP? Simply put, WebP is an image format just like jpeg or png, with the key difference that on average it has about a 30% smaller file size. WebP was developed by Google to be a direct replacement for jpeg and png with a smaller footprint. It’s worth noting that WebP has the ability to have transparency just like png does.

Why use WebP?

Let’s address the elephant in the room, WebP is still fairly early in it’s adoption phase, it’s not supported everywhere and certainly not supported in older software. It could be some time before it is as universal as jpeg or png but that doesn’t mean we can’t use it. Currently the best use case for WebP is on websites, that’s because there are only a handful of browsers in the world and they have all adopted support for WebP, caniuse.com shows 97.06% global support for WebP. Plus HTML allows for fallback images using the picture tag.

How to export an image to WebP

Often the easiest way to get the image format you are looking for is simply by exporting it to the format from the beginning, let’s look at a couple options.

Photoshop

Photoshop allows exporting or rather saving of WebP images. I was not able to find why, but the only way to get a WebP image out of Photoshop is through the Save As… dialog, there are no export options. When using Save As you can select WebP as your file format and then select a couple of settings once you save it. It’s worth noting WebP doesn’t show up if you have more than one layer in you Photoshop file, you will need to merge your layers to get the WebP option.

Figma

Unfortunately Figma does not natively support WebP exports, you will need to use a plugin like WebP Exporter. This is a handy little plugin and it does exactly what you would hope, the only drawback is that instead of using the native export panel you will need to open the plugin window to use it.

How to convert an image to WebP

Say you don’t have control over the export process or maybe you use software that just doesn’t have support for WebP, what are you to do? Convert! Given the minimal awareness of WebP outside of the web developer community you will probably be dealing with converting more often than exporting and that’s ok, as long as you have high quality jpegs or pngs to start with converting will not be an issue. So let’s dive into some options for converting to the WebP image format.

tiny.photos

Of course we are putting tiny.photos first, you are on our site after all, none the less tiny.photos does offer benefits that others on this list don’t, so let’s break it down in a pro/con list.

Pros

  • Free
  • No file limits or size limits
  • Privacy focused by processing locally instead of in the cloud
  • Ability to resize images while converting them

Cons

  • Doesn’t work offline

TinyPNG

TinyPNG is perhaps the most popular image compressor on the internet, and it now has support for WebP!

Pros

  • Very impressive compression ability
  • Simple and straight forward to use
  • Photoshop and Wordpress integrations

Cons

  • $149 per year for unlimited compression and conversion
  • Cloud based with little to no information on how they keep your images private

Squash

Squash is surprisingly a first of it’s kind native Mac app made for batch processing images.

Pros

  • Does not require an internet connection
  • Allows for native integrations with Shortcuts
  • Has the added ability to add filters to images and add watermarks

Cons

  • $13.99 per year for one computer
  • Only works on Mac

Summary

To sum it up, whenever you can, export images from the source as WebP but when you can’t there are a few options to help you convert images to WebP easily. I hope this article helped you to start using WebP or helped to make your workflow a little easier.