画像フォーマットとして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では開けません。そのため、プラグインをインストールする必要があります。
プラグインの使い方などについてはこれから説明します。
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のサイトに画像をアップしてみてください。
※「Compress」の下で「WebP」を選択してください。
まとめ
Webサイトはリッチ化され、容量が重くなる傾向にあります。Googleは、Webの利用者のことを考えて表示速度も重要視しています。
サイトが重くなり、表示速度が遅くなるとユーザーの離脱率が上がったり、Googleの検索順位が上がらなかったりするおそれがあります。WebP画像は、今後より活用シーンが増えてくるかもしれません。
