概要

今後、webp が主要になると考えられるので、自分用に備忘録として、メリットと使い方を簡単に記載する。（思ったけど本当に読み方、ウェッピーで合ってんのか...）
(2022/02/15にPhotshop2022でwebpが完全にサポートされたので、下記読む必要なし!)

環境

macOS: Big Sur
ver: 11.5.2

WebP とは、2010 年にGoogleから発表された画像フォーマットのことで、拡張子は「.webp」です。
2021 年 11 月時点での対応ブラウザは、Chrome、Firefox、Edge、Safari 等です。IE は対応してない。

非可逆圧縮なのに、アルファチャンネルを扱えるということ、つまり JPG と PNG や GIF のメリットを併せ持つ画像フォーマットであること。

対応ブラウザが少ないことだったが、現在の主要ブラウザの中で非対応なのは IE のみなので問題ないと言いたいところ。しかし、両対応の処理を書く必要があるので少し面倒でミスを誘発することがある。

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

WebPShop の GithubからWebPShop_0_4_0_Mac_Universal.zip（適宜最新のものを）をダウンロードする。
Photoshop にプラグインをインストール

解凍したWebPShop.pluginを Plug-ins フォルダ（Applications/Adobe Photoshop 2021/Plug-ins）にコピーする。2021 年 11 月に Photoshop 2022 がリリースしたが、現状使えなかったので 2021 との使い分けが必要（2021 年 11 月中旬）
macOS のバージョンが 10.15 以降の場合（10.15 以前のものは不要）
ターミナルから WebPShop の検疫をバイパスさせる必要がある。

sudo xattr -r -d com.apple.quarantine "/Applications/Adobe Photoshop 2021/Plug-ins/WebPShop.plugin"
JPG や PNG で書き出した画像を WebP 画像にする

PhotoShop で JPG や PNG で書き出した画像を開き、「保存」または「別名で保存」を選択し、フォーマット項目を「WebPShop」に指定することで WebP 画像を作成することができる。

WebP の実装方法はこちらが分かりやすかったです。【SEO 対策】画像形式 webp を使ってみよう