こんにちは、WebデザイナーのOhh!です。
今回は、WebP形式のファイルをPhotoshopで読み込み／書き出しが出来るプラグイン『WebPShop』をインストールしてみました。
このプラグインを導入することで、これまではPhotoshopで開けなかったWebPファイルを開けたり、Photoshopから直接WebPファイルを書き出せるようになります。
※WebPのWebサービスをいちいち開かなくていいので便利！
まず、『WebPShop』の配布サイトにアクセス
https://developers.google.com/speed/webp/docs/webpshop
「GitHub」をクリックするとMac用とWin用のzipファイルが表示されるので、お使いのOSに合わせたファイルをダウンロードしてください。
今回は、Mac用をダウンロードしました。
ダウンロードしたzipファイルを展開し、『WebPShop』プラグインをインストール
※Macの場合
アプリケーション > Adobe Photoshop2021 > Plug-insの中に『WebPShop.plugin』を移動。
MacOSのバージョンが10.15以降の場合
そのままでは、プラグインが使用できないのでターミナルで下記のコードを実行します。
sudo xattr -r -d com.apple.quarantine “/Applications/Adobe Photoshop 2021/Plug-ins/WebPShop.plugin”
Photoshopを既に開いている方は、アプリケーションを再起動します。
PhotoshopでWebPファイルを書き出す
任意の画像を開く
ファイル > 別名で保存
ファイルの種類に『WebPShop』が追加されているので、これをクリックする。
『Quality』の箇所で圧縮率を変更
デフォルトは75で、左に行くほどファイルサイズは小さくなり、その分画像も荒れる。
プレビューにチェックを入れることで、書き出し後の画像品質を確認しながら作業可能。
JPEGとWebPで画質を比較
今回の場合だと、WebPの方が若干画質が劣るものの大体同じくらいの画質に合わせてみました。
結果、JPEGに比べWebP形式のファイルサイズは約4分の1程度に納めることができた。
