webp（ウェッピー）のメリットと mac での使い方

概要

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

環境

macOS: Big Sur
ver: 11.5.2

webp とは

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

webp を使用するメリット・デメリット

メリット

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

デメリット

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

mac における webp の使い方（Photoshop で）

1. プラグインをダウンロード
   WebPShop の GithubからWebPShop_0_4_0_Mac_Universal.zip（適宜最新のものを）をダウンロードする。
2. Photoshop にプラグインをインストール
   解凍したWebPShop.pluginを Plug-ins フォルダ（Applications/Adobe Photoshop 2021/Plug-ins）にコピーする。2021 年 11 月に Photoshop 2022 がリリースしたが、現状使えなかったので 2021 との使い分けが必要（2021 年 11 月中旬）
3. macOS のバージョンが 10.15 以降の場合（10.15 以前のものは不要）
   ターミナルから WebPShop の検疫をバイパスさせる必要がある。
   sudo xattr -r -d com.apple.quarantine "/Applications/Adobe Photoshop 2021/Plug-ins/WebPShop.plugin"
4. JPG や PNG で書き出した画像を WebP 画像にする
   PhotoShop で JPG や PNG で書き出した画像を開き、「保存」または「別名で保存」を選択し、フォーマット項目を「WebPShop」に指定することで WebP 画像を作成することができる。

参考

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