Web Design

WebP image export in Photoshop can be done with “Save As”.

Adobe Photoshop で WebP 形式の画像を書き出すには「別名で保存」

Hi there.
I’m Satou, a Web/App/UI designer.

This time, I’d like to talk about Save As for exporting WebP images in Photoshop.

I used to use online conversion tools when I needed WebP images.

webp conversion tool

But now that I think of it, I wondered if Photoshop would be able to export WebP images normally by now, so I looked into it.

Exporting WebP images is not “Export” or “Save for Web” but “Save As” .

There are three main ways to export images in Photoshop.

  • Export
  • Save for Web
  • Save and Save As

There are three types of “Save for Web”.
Although “Save for Web” is technically one of the export methods included in “Export,” we will distinguish it here.

I wondered if WebP images could be exported by “Export” or “Save for Web,” but I could not export by these methods and could export (save) images in WebP format by “Save As.

'Export' does not export in WebP format Can't save in WebP format with 'Save for Web' The 'save as' shortcut is command+shift+S Select 'WebP' and 'Save'.

When saving, you can select the image quality and change the options.

Change compression ratio and options

Adjust image quality accordingly

At “image quality 90,” the file size is reduced to about 60% of its original size with no deterioration in image quality. At “image quality 80,” the file size is reduced to about 35% of its original size, although the gradient tones and noise are a little less noticeable.

Adjust the image quality according to whether the image is to be used as a small thumbnail or a large image to express details, etc.

Note that setting the image quality to 100 or “no degradation” will certainly preserve the image quality, but the file size will be considerably larger than the original image.

Basically, all options can be turned off

In general, for images to be posted on a website, all options such as metadata and Photoshop Extras can be turned off.

Of course, you will need to keep metadata if you want to extract it and include it with the image, or keep Photoshop Extras such as guides and slices if you plan to use them later, so turn them on or off as you see fit.

Now, we talked about Save As for WebP image export in Photoshop.
How was it?
I hope it was helpful for you.
See you next time.