画像フォーマットとしてWebPが使われることが増えています。そのため、WebPをPhotoshopで扱いたい人も多いのではないでしょうか。

この記事では、WebPをAdobeのPhotoshopで扱う方法について説明します。

WebPとは?

WebPとは、Googleが開発している新しい画像フォーマットです。読み方は「ウェッピー」としているサイトが多いです。英語で読んだときに「b」が発音されていないからでしょう。

WebPは、画像品質をできるだけ保ったまま、画像を圧縮して軽量化するために設計された画像形式です。目的は、サイトの読み込み時間の短縮、データ使用量の制限、です。WebPは、ファイルサイズを20〜30%削減できます。

WebPの画像は、そのまま使用することもできますが、WordPressサイトならプラグインで変換することもできます。

今ではWebPは、Chrome、Safari、Firefox、Microsoft Edge等のブラウザが対応しており、ほとんどのユーザーに表示させることができるので、安心して利用できます。

WebPのPhotoshopプラグインダウンロード方法

WebPは、Photoshop用のプラグインを追加しないと、Photoshopで開くことができません。そのため、プラグインのインストールが必要です。

WindowsでもMacでも同じ場所からダウンロードすることができます。

以下のGoogleのディベロッパー向けページからダウンロードしてください。

https://developers.google.com/speed/webp/docs/webpshop

Googleのディベロッパー向けページでは、Macユーザーなら「Mac installation steps」の下の「GitHub」を、Windowsユーザーなら「Windows installation steps」の下の「GitHub」をクリックしてください。
※今はどちらをクリックしても同じページに飛びます。

GitHubページでは、Macの人は「Mac」が付いたファイルを、Windowsの人は「Win」が付いたファイルをダウンロードしてください。

WebPのPhotoshopプラグインインストール方法

ダウンロードしたZipファイルを開いて、「WebPShop.plugin」ファイルを以下の場所に移動します。
Adobe Photoshopの「Plug-ins」フォルダの中です。

注意点として、Macの場合、macOS Catalinaでは、エラーが出てプラグインが使用できません。

その場合は、Macの「システム環境設定」を開き、「セキュリティとプライバシー」をさらに開いてください。

そして、「ダウンロードしたアプリケーションの実行許可」の「このまま許可」をクリックすれば、使用できるようになります。

PhotoshopでWebP画像を開く方法

PhotoshopでWebP画像を開くためには、以下の方法で開くことができます。

・拡張子が「.webp」のWebP画像ファイルを選択して、「右クリック」。
・「このアプリケーションで開く」から「Adobe Photoshop」を選択。
・「開く」をクリック。

この作業が完了すれば、Photoshopの画面に画像が表示されます。

PhotoshopでWebP画像に変換保存・書き出しする方法

PhotoshopでWebP画像に変換・保存する方法は、以下のとおりです。

・タブにある「ファイル」から「別名で保存」を選択。
・フォーマットで「WebPShop」を選択。
・保存場所を決めて「保存」をクリック。

保存場所を確認すると、拡張子が「.webp」の画像が保存されています。

簡単にWebP画像に変える方法

Googleは画像圧縮ツール「Squoosh」を提供しており、そちらを利用すれば、簡単にWebP画像に変えられます。

Photoshop以外の方法で変換したい人は、以下のURLのサイトに画像をアップしてみてください。

https://squoosh.app/

※「Compress」の下で「WebP」を選択してください。

まとめ

Webサイトはリッチ化され、容量が重くなる傾向にあります。Googleは、Webの利用者のことを考えて表示速度も重要視しています。

サイトが重くなり、表示速度が遅くなるとユーザーの離脱率が上がったり、Googleの検索順位が上がらなかったりするおそれがあります。WebP画像は、今後より活用シーンが増えてくるかもしれません。