PhotoshopでWebP画像を扱う方法

WebDesign

比較的新しい画像圧縮形式のWebPが2020年の後半ぐらいからIE以外のブラウザで表示できるようになったことで、WebP形式の画像を扱うことが今後ますます増えてくるかもしれません。
一方、画像作成に使われることが多いPhotoshopではまだオリジナルのままではWebP形式の画像を扱うことができません。
そこで今回は、PhotoshopでWebP画像を扱うことができるようにする方法を紹介していきます。


2022年2月15日にリリースされたPhotoshop 23.2から、プラグインなどを利用しなくてもオリジナルのままのPhotoshopでWebP画像を扱うことができるようになりました。
この投稿の最後でPhotoshop 23.2でのWebP画像の扱い方について紹介しています。

WebPとは

WebPとは、画像のファイルサイズを小さくするためにGoogleが開発した画像の圧縮形式のことです。
これまで画像の圧縮形式として主に使われてきたJPEGやPNGなどに比べて画像のファイルサイズを小さくできるため、ページの読み込み速度を速くすることができます。

各ブラウザのWebP表示対応状況

2021年3月時点での各ブラウザのWebP画像の表示対応状況は下図のようになっています。

caniuseによる各ブラウザのWebP対応状況

最新の対応状況は以下のリンクから確認できます。
WebP image format | Can I use

JPEG、PNGとWebPの画像比較

参考までにJPEG、PNGとWebPの比較画像とファイルサイズを載せておきます。

比較画像(JPEG写真)

JPEG WebP
jpegの写真画像
129KB
webpの写真画像
83KB

比較画像(PNG透過画像)

PNG WebP
pngの透過イラスト画像
249KB
webpの透過イラスト画像
175KB

v23.2よりも古いPhotoshopでWebP画像を扱うことができるようにする手順

デフォルトでWebP画像に対応していない古いバージョンのPhotoshopでWebP画像を扱うことができるようにするには、

  1. プラグインをダウンロードする
  2. プラグインをPhotoshopにインストールする
  3. Photoshopを再起動する

という手順が必要になります。以下でそれぞれについて紹介していきます。

プラグインをダウンロードする

WebPの開発元であるGoogleがPhotoshop用のプラグイン「WebPShop」を公開しています。
以下のGitHubページからダウンロードすることができます。

WebPShopのGitHubページ

WebPShopのGitHubページスクリーンショット

macの場合はWebPShop_0_3_2_Mac_x64.zipをダウンロード、
windowsの場合はWebPShop_0_3_2_Win_x64.8biをダウンロードします。

PhotoshopにプラグインWebPShopをインストールする

OS別にプラグインをインストールする手順を紹介します。

macの場合

macOSの場合、プラグインをコピーするPlug-insフォルダの場所は通常、Applications/Adobe Photoshop 2021/Plug-insになります。(Photoshopのバージョンが2021の場合)

macOSのバージョンが10.15より前の場合

  1. WebPShopのGitHubのページからWebPShop_0_3_2_Mac_x64.zipをダウンロードします。
  2. ダウンロードしたファイルを解凍したWebPShop.pluginをPhotoshopのPlug-insフォルダにコピーします。

macOSのバージョンが10.15以降の場合

macOSのバージョンが10.15以降の場合には上記の2つの手順に加えて、下記の手順3でターミナルからWebPShopの検疫をバイパスさせる必要があります。

  1. WebPShopのGitHubのページからWebPShop_0_3_2_Mac_x64.zipをダウンロードします。
  2. ダウンロードしたファイルを解凍したWebPShop.pluginをPhotoshopのPlug-insフォルダにコピーします。
  3. ターミナル(Finder→アプリケーション→ユーティリティ→ターミナル.app)で下記のコードを実行してWebPShopの検疫をバイパスさせます。
    sudo xattr -r -d com.apple.quarantine "/Applications/Adobe Photoshop 2021/Plug-ins/WebPShop.plugin"

    ※Photoshopのバージョンが2021以外の場合は使用しているバージョンに変更してください。

Windowsの場合

Windowsの場合、プラグインをコピーするPlug-insフォルダの場所は通常、C:\Program Files\Adobe\Adobe Photoshop 2021\Plug-insになります。(Photoshopのバージョンが2021の場合)

  1. WebPShopのGitHubのページからWebPShop_0_3_2_Win_x64.8biをダウンロードします。
  2. ダウンロードしたファイルの中のWebPShop.8biをPhotoshopのPlug-insフォルダにコピーします。

Photoshopを再起動する

プラグインのインストールができたらPhotoshopを再起動します。
以上でPhotoshopでWebP画像を扱う準備は完了です。

WebPShopをインストールしたPhotoshopでWebP画像を扱う

PhotoshopでWebP画像を開く、編集する

WebPShopプラグインをインストールしたPhotoshopでは、JPEG画像やPNG画像などと同じようにWebP画像を開いたり編集したりすることができるようになります。

PhotoshopでWebP画像を書き出す

WebPShopプラグインをインストールしたPhotoshopであっても、WebP画像は、JPEG画像やPNG画像などのように書き出しメニューから書き出しをすることはできません。
Photoshopのファイルメニューから「保存」または「別名で保存」を選んで、下図のようにフォーマットを「WebPShop」に指定することでWebP画像を作成することができます。

WebPShop導入後のPhotoshopの保存メニュー画面でフォーマットにWebPShopを選択

「保存」または「別名で保存」メニューで、フォーマットを「WebPShop」に指定して右下の「保存」をクリックすると下図のような画面が開きます。

PhotoshopのWebPでの設定・保存画面

ここではQuality、Compression、Metadataの各項目を設定することができます。また、Previewにチェックを入れると保存後の画像とファイルサイズを見ながら設定を調整することもできます。

v23.2以降のPhotoshopでWebP画像を扱う

2022年2月にリリースされたPhotoshop 23.2から、デフォルトの状態でWebP画像を扱うことができるようになりました。

Adobeのページ
Photoshop で WebP ファイル形式を簡単に操作できるようになりました。

Photoshop 23.2でWebP画像を扱えるとのAdobeページのスクリーンショット

PhotoshopでWebP画像を開く、編集する

Photoshop 23.2では、プラグインなどを導入しなくてもJPEG画像やPNG画像などと同じようにWebP画像を開いたり編集したりすることができるようになっています。

PhotoshopでWebP画像を書き出す

Photoshop 23.2であっても、WebP画像をJPEG画像やPNG画像などのように書き出しメニューから書き出しすることはできません。これは、WebPShopプラグインをインストールした古いバージョンのPhotoshopと同様です。
Photoshopのファイルメニューから「保存」または「別名で保存」を選んで、下図のようにフォーマットを「WebP」に指定することでWebP画像を作成することができます。

Photoshop23.2の保存メニュー画面でフォーマットにWebPを選択

「保存」または「別名で保存」メニューで、フォーマットを「WebP」に指定して右下の「保存」をクリックすると下図のような画面が開きます。

Photoshop23.2のWebPでの設定・保存画面

ここで画質などについて設定して「OK」をクリックすると WebP形式の画像が作成されます。

以上、PhotoshopでWebP画像を扱うことができるようにする方法について紹介してきました。参考になりましたら幸いです。

参考:WebPShopの解説ページ
下記のページでは、PhotoshopへのWebPShopのインストールやWebP画像の作成方法について説明されています。

関連記事

今回紹介したWebPを含めた複数の新しい画像圧縮形式(WebP, JPEG 2000, JPEG XR, AVIF)について、画像の表示確認ができるようにサンプル画像と各ブラウザの対応状況をまとめましたので、よかったら見てみてください。

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください