目次
そもそもWebPとは？
WebPはGoogleが開発しているオープンな静止画フォーマットです。
「ウェッピー」と読みます。ファイルの拡張子は「.webp」になります。
ファイルサイズは、非可逆圧縮モードでJPEGと比較しておよそ30%、可逆圧縮モードでPNGと比較して28%ほど小さくなります。
従来のウェブサイトに使われる「JPG」「PNG」「GIF」などの代替として、通信量削減や表示速度向上を図るために開発されました。
これまでは非対応のブラウザが多かったのでそれほど普及していませんでしたが、2020年にApple Safari（macOS Big Sur）の最新版がWebPに対応。
すべてのモダンブラウザで利用できるようになって、そこから既に1年以上が経ち、そろそろ本格的にWebP導入に乗り出すべき時期が訪れてきました。
既存画像をWebPに変換する方法
WebP画像を作るには、オンラインWebツールを使って変換するか、専用のアプリを導入して書き出す必要があります。
以下に「WebP変換or書き出しツール」を紹介します。
Squoosh
GoogleChromeの開発チームが手掛けたWebツールです。
画像をドラッグ＆ドロップするだけで、画質の劣化などを確認しつつ変換することができます。
Squoosh：https://squoosh.app
cwebp/dwebp
こちらはGoogle公式のコマンドラインツール。
初心者には不向きですが、コマンドラインを扱える慣れたかたにはオススメ。複数ファイルをまとめて変換することもできます。
cwebp/dwebp：https://developers.google.com/speed/webp/download
WebPShop
「WebPShop」はGoogle公式のPhotoshop用プラグインです。
WebPShop：https://developers.google.com/speed/webp/docs/webpshop
その他
WordPressを利用している場合はWordPressプラグインでWebP形式の画像を変換することができます。
また他にも、Google検索で「WebP 変換」などのキーワードで検索すると多数のオンラインツールが見つかります。
いずれもドラッグ＆ドロップだけで簡単にWebP変換できるものが多いので、好みのツールを見つけてブックマークしておきましょう。
SYNCER様の「WEBP変換ツール」などもオススメです。
SYNCER WEBP変換ツール：https://lab.syncer.jp/Tool/Webp-Converter/
ウェブサイトでWebPを使う
さて。ここからがこの記事の”キモ”の部分になります。
HTML上のimgタグを書き換える
WebP形式に変換した画像をウェブページで表示させるために、既存のHTMLをマークアップしなおします。
最もシンプルかつ有効的なのはpictureタグを使う方法。
もともとのコードが以下のような場合。
// WebP対応前 <img src="sample.png" alt="サンプル画像" width="300" height="200">
次のように書き替えます。
// WebP対応後 <picture> <source type="image/webp" srcset="sample.webp"> <img src="sample.png" alt="サンプル画像" width="300" height="200"> </picture>
ここでは「sample.png」という画像をWebP形式にした画像でマークアップしています。
以下は上記のコードを使ってWebP形式の画像を出力した実際のサンプルになります。
なおpictureタグはHTML5から実装され、IE以外はほぼすべてのブラウザで使用できます。
pictureタグのIE対応
IEが<picture>...</picture>に対応していないので、ポリフィル（Polyfill.io）を使います。
ポリフィルとは、最新の機能をサポートしていない古いブラウザで、その機能を使えるようにするための機能です。
pictureタグを使っている、該当するウェブページで次のコードを記載しましょう。
<script src="https://polyfill.io/v3/polyfill.min.js?features=HTMLPictureElement"></script>
「polyfill.io」を上記のように「?features=HTMLPictureElement」を追記して読み込むと、必要な機能を限定することができるので通信量の肥大化も防げます。
最後に
まだ少し未対応のブラウザがあるとはいえ、既にWebP導入のための機は熟していると考えています。
弊社でも最近のウェブサイト制作の新規案件に関しては積極的にWebPを取り入れています。
特に画像をたくさん使っているウェブサイトでは、WebP導入の効果が大きく、読み込み速度の改善やSEOにも影響があります。
この機会にぜひWebP導入してみてはいかがでしょうか。
