PhotoshopでWebPの保存方法!プラグインも不要

画像:PhotoshopではプラグインなしでWebPの保存や編集が可能です。

最新のPhotoshopはすでにWebPに対応しており、WebPの保存はもちろん、編集も可能です。

これまではWebP画像ファイルを開く事さえ出来ませんでしたが、今ではプラグインも不要で、各ブラウザでのWebP対応も問題はなく実用レベルです。

Photoshopのバージョン23.2からWebP形式に完全対応しています。

そこでこの記事では、ちょっと分かりづらいWebP形式の保存方法を解説しています。これからは積極的に使ってみて下さいね。

WebPの保存方法

WebPを保存するには、ファイルメニューの【コピーを保存】から行う事が出来ます。

以下に、手順を紹介します。

STEP

ファイルメニューから【コピーを保存】を選択

画像:ファイルメニューから【コピーを保存】を選択。
STEP

保存するファイルの種類をクリック

画像:この時に、保存するファイルの種類が選ぶ。
STEP

保存形式でWebPが選択出来るようになっています。

ここでWebPを選んだら、いつもの様に【保存】をクリックします。

画像:この時に保存形式でWebPを選択出来る様になる。
STEP

【保存】をクリックした後にWebPのオプションが表示され、画像圧縮をする事が出来ます。

画質:WebP形式で保存した後、PNGやJPEGの様に画質の調節も出来る。

画像圧縮はPNGやJPEGの様に【劣化なし】か【劣化】を選べます。画像の内容に合わせて、最適な方を選びましょう。どちらを選んでも拡張子は【.webp】になります。

ここで【OK】を選ぶとそのままWebP形式の画像が作成されます。

この様に、元のデータを残したままでWebP画像を保存したい時はファイルメニューの【コピーを保存】を選択します。

別名で保存からでもWebPで保存できる

画像:元画像を残したままWebP形式で保存する。

他の保存方法としては、ファイルメニューの【別名で保存】を選択し、画面右にある【コピーを保存】を選択します。その後の流れは同じで、ファイル形式からWebPを選択します。

元のデータを上書きしても良いなら、こちらの【別名で保存】でも出来ます。Photoshopで再編集は出来ますが、レイヤーなどは失われます。

WebPは書き出し出来ない

画像:書き出しからはWebP形式は選べない。

よくある間違いとして、そもそもWebPファイルの保存方法は書き出しではありません。

実際に確認してみると「Web用に保存(従来)」からはWebpフォーマットは選択出来ません。

同様に「生成」から「画像アセット」を書き出しても、エラーメッセージ入りのassetsフォルダが生成されるだけです。

この勘違いが原因で、PhotoshopではWebPが使えないと思っている方もいるようです。

実はもう普通に使えるWebP画像とは?

プラグインのWebPShopはもう不要

Photoshop23.1およびそれ以前の古いバージョンでは、Photoshopで直接WebP画像を開いて保存する事は出来ませんでした。その時に使われていたのがWebPShopというプラグインです。

新しいPhotoshopではすでにWebPを完全サポートしている為、WebPShopをPhotoshop内からダウンロードする事は出来ません。

ですが、理由があって古いバージョンのPhotoshopを使っている方の為に、WebPShopプラグインのダウンロードする方法を紹介します。

WebPShopプラグインのダウンロード先

Photoshopからプラグインを追加する事はもう出来ませんが、Githubからダウンロードする事が出来ます。

Github:Photoshop用WebPファイル形式プラグインのページへ(記事執筆時点:v0.4.3)

Windows x64の直接リンク:https://github.com/webmproject/WebPShop/releases/download/v0.4.3/WebPShop_0_4_3_Win_x64.8bi

MacOSの直接リンク(ZIPアーカイブ):https://github.com/webmproject /WebPShop/releases/download/v0.4.2/WebPShop_0_4_2_Mac_Universal.zip

プラグインのインストール先

STEP

Creative Cloud の共有の場所:Photoshop のインストールされたすべてのバージョンについて、プラグインの再インストールの必要のないプラグインが読み込まれます。

Windows:\Program Files\Common Files\Adobe\Plug-Ins\CC

macOS:/Library/Application Support/Adobe/Plug-Ins/CC

STEP

Photoshop を実行します。

詳しくは、Photoshop用WebPファイル形式プラグインを参照してください

WebPを編集後の注意点

ひとつだけ注意点があります。Photoshopで問題無くWebPファイルを編集出来る訳ですが、PNG形式などで書き出しするとエラーが出る場合があります。

基本的には他のファイル形式での書き出しも問題無く出来ますが、もしエラーが出た場合は次の方法をお試しください。

WebP形式以外で書き出しをしたい時は?

エラーが出たけれどWebP形式以外で保存し直したい時は、編集中のレイヤーを新規ファイルに複製したり、一度別名保存などしてから改めて書き出しをすれば大丈夫です。

WebP形式のファイルを編集し、他のファイル形式で書き出しする場合はお試しくださいね。

まとめ

WebPは軽量なだけでなく、Googleが推奨するファイル形式でもあります。現在のPhotoshopでは、開くだけでなく編集から保存まで完全サポートされています。

主要ブラウザでもすでに対応しており、色んな所でWebPフォーマットのファイルを見かける様になりました。
まだ、WebPファイルを扱っていない方は試してみて下さいね。

すでにあるPNGやJPEGファイルは、Googleが提供する【squoosh】という画像変換サービスが簡単でお勧めです。

画像:WebPとは?pngやjpgからの変換方法や対応ブラウザまで解説