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