WebPに変換して対応する

非対応のブラウザが多かったので使用を躊躇しておりましたが、2020年にSafariの最新版（Big Sur以降）で対応されました。

すべてのモダンブラウザで利用できるようになりましたので、そろそろWebPへ変換して対応しておきましょう。

WebPに画像を変換する

アプリでWebP形式の画像を用意する方法は３つ。

WebPに変換するWebツール

jpg形式やpng形式の画像をWebツールで変換して用意することができます。

Squoosh

Syncer – WEBP変換ツール

ドラッグドロップだけで簡単に作成できます。

WebPに自動で変換するWordPressプラグイン

WordPressを利用している場合は、WordPressプラグインでWebP形式の画像を用意することができます。WordPress管理画面からjpg形式やpng形式の画像をアップロードするだけです。

WebP変換用Photoshopプラグイン

2020年３月現在、画像編集アプリなどから直接WebP形式に書き出す方法はありません。唯一PhotoshopプラグインでWebP形式のファイルに保存する方法があります。WebPShopというプラグインをインストールすると『別名で保存』の際にWebP形式で保存できるようになります。

WebP画像用にHTMLマークアップをする

WebP形式に変換した画像を表示させるためHTMLでマークアップします。Safariに対応したといっても最新版（Big Sur）にアップグレードしていない人も多いようですので、対応していないブラウザも考慮し<picture>を使用した出し分けをおこないます。

<picture>
  <source type=“image/webp” srcset=“image.webp”>
  <img src=“image.png”>
</picture>

ここではimage.png をWebP形式にした画像でマークアップしてあります。
sourceタグ内のsrcsetでWebP画像を、対応していないブラウザではimgタグが表示されるようになります。

IE対応

IEが<picture>に対応していないのでポリフィルで対応します。

<script src=“https://polyfill.io/v3/polyfill.min.js?features=HTMLPictureElement”></script>

これでIEではpng形式の画像が表示されます。