Photoshop v23.2 just added support for a new file format: webP. In this tutorial, you’ll learn what webP is, why you should consider using it, and how you can easily take advantage of it with Web Sharp Pro.

What is webP and when should you use it?

The webP format is an open standard licensed for free from Google. It is designed to offer smaller file sizes on the web at similar or higher quality. Unlike JPG, it offers a completely lossless format to completely avoid any artifacts (albeit with a larger file size than a high-quality JPG). And unlike JPG, it offers support for transparency, which is critical when you want to allow the background to show around your subject (such as a product being sold on a website). If you’ve been exporting images as PNG to support transparency, webP offers massive reductions in file size (about 30% smaller lossless and >80% when saving in a lossy format comparable with high quality).

It is worth noting that there is an important difference between the lossless format and 100% quality lossy. Very small areas of color detail (such as a red light in a cityscape) may look significantly desatured compared to the lossless version. In general, you’ll probably need to look extremely close to notice the difference, but high-frequency color is one use case where I think the extra size of the lossless format may make sense. I don’t know if this behavior is inherent to the webP format or Adobe’s implementation of it, but I’ve seen differences in several test images. Aside from this narrow difference, I generally find the high-quality lossy version would look identical to the lossless version for most viewers at a normal viewing distance. You only see the differences when you’re pixel peeping pretty closely. And keep in mind that all JPGs are lossy, so we’ve been dealing with this for a long time.

This file format has already been around for a decade, so there is already widespread support including every major browser (Internet Explorer does not support it, but IE will be discontinued in June). So webP is an outstanding choice for sharing images on your website when you need transparency, and also offers useful file size reduction compared to JPG. This is a great way to improve page load times and save bandwidth costs for your website.

In addition to use on websites, webP is a great way to send smaller files for email or otherwise sharing with others. MacOS has native support via its image preview software and there are free tools for Windows. However, as that may require installing or configuring for support on Windows, I probably wouldn’t use webP to email everyone in your list just yet. However, this can be a nice way to hold down the size of your email account, save on wireless data costs, and send images over slow connections. Support for this standard keeps growing, and I expect we’ll see more and more JPG usage migrate to webP over time.

The latest version of Adobe Bridge supports webP, but Lightroom does not at this time. However, as this is a format for export, that shouldn’t matter unless you manage a set of pre-prepared images to share on demand.

This leaves the question of when you should keep using JPG or PNG:

• Keep using JPG whenever you just want to know something will work. No need to test if you can upload to social media (though sites like Facebook support it) or know if your friend’s computer will be able to open the image. The file size savings are nice, but probably not worth a lot of hassle for most people.
• Keep using JPG if you see a loss of saturation/detail in small vibrant colors, such as vibrant city lights at night. You can use the lossless webP format to avoid the issue, but the resulting file is larger than a JPG. Using 100% quality with webP will not prevent the issue, all lossy values are at risk. This is unlikely to the vast majority of images (especially when viewed at a normal distance), but it is an edge case to keep in mind. If you can’t see any image at 100%, it’s safe to use even if you can see something when you pixel peep further.
• Keep using PNG when if you run into the extremely rare scenario where there is visible banding in your output and you need 16-bits to avoid it. You pay a large size penalty for this, but there may be times when it is worth it. Don’t do it because 16-bits sounds good (while 16-bits is critical in your source and working files, it rarely makes a difference for a finished image).

My quick summary would be:

• Use webP when you have transparency. Even the lossless format is much smaller than PNG and JPG doesn’t work with transparency.
• Use JPG if you don’t care about optimizing file size and bandwidth or don’t want to have to think about edge cases (with high-frequency color or recipients who may not be able to handle webP). This is the simplest solution for uploading to social media or emailing images to people with an unknown ability to handle webP.
• Use webP when you want to optimize for fast transfer sizes and minimal storage, except potentially for a few rare cases where high-frequency color may be impacted (such as cityscapes at night). This is most beneficial when you’re hosting the images on your own website or trying to keep your email sizes down.

 

Exporting “webP” with Web Sharp Pro v3.7

Web Sharp Pro makes it quick and easy to create gorgeous exports of your images for sharing. It offers much more than just sharpening, with custom templates, blurred borders, custom watermarks, advanced crops, film grain, batch processing, and much more. The best way to understand it is with the short demonstration below.

Web Sharp Pro v3.7 just added a range of new features, including support for webP. See this quick demo below on how to take advantage of it. If you need to export an image with transparency, this is automatically handled for you. There’s nothing to do (other than checking that you aren’t adding a border, since that wouldn’t be very useful if you want transparent edges.

When exporting from Web Sharp Pro as webP:

• “ultimate” quality setting will export with the lossless format. This will completely avoid any JPG artifacts, though the final file size will be somewhat larger than a JPG (about double the size). And it will be much smaller than a PNG (about a quarter of the size), though it does not offer 16-bits. This is a great option when quality is your priority and you have areas of very small color detail or want to completely avoid artifacts.
• “high” is designed to offer quality comparable to similar settings for JPG, but with somewhat smaller final file sizes. This is a great option when quality is your priority. Differences from ultimate are generally very hard to detect without zooming in well past normal viewing sizes.
• “good” is also designed to offer size savings over a comparable quality JPG. This is a great option when small files are your priority (and the loss of quality at this level will be minimal, usually very hard to detect).

 

Exporting “webP” directly from Photoshop

If you don’t use Web Sharp Pro, you can simply use File / Save a Copy in Photoshop and select webP. I recommend the following settings:

• Always leave the option to embed the profile checked in the first dialog (before the webP options)
• Lossless if you need an exact copy of your image. Otherwise 75-90% lossy is a great range to consider. As you get closer to 50%, there is a noticeable loss of quality, but it may not matter for your application and this can really shrink the file size.
• Embed XMP if you want to keep keywords and other such non-camera data.
• Embed EXIF if you want to keep camera data (shutter speed, lens, etc).
• Embed extras if you want to keep paths, guides, and print settings.