WebP(ウェッピー)による画像の最適化

post on 2020/02/17

カテゴリー:コーディング

WebP画像

WebP(ウェッピー)はGoogleが推奨している次世代画像フォーマットです。
Google Speed Insightの「改善できる項目」で提示される改善例のひとつですね。

WebPの利点は容量が大幅に圧縮される点

通常のjpgやpngより容量が大幅に圧縮される点がWebPを利用するメリットです。
Google Speed Insightのスコアを改善したい時には活用を考えてもいいでしょう。
ただし、次の点も考慮しましょう。

WebPはターゲットブラウザが限られている

WebP導入の最大の懸念事項はターゲットブラウザです。
ChromeやFirefoxでは対応済みなのですが、IE11、iOSが非対応なのは日本においてはつらいですね。
ブラウザによって対応・非対応が分かれるためHTMLに記述する際はpictureタグを使ってターゲットブラウザでのwebPを表示する必要があります。

photoShopなどグラフィックソフトで編集できない

プラグインなしだとWebPはphotoShopなどグラフィックソフトで編集できません。
ですから、一度jpgやpngで書き出して、変換する必要があります。
変換はブラウザ上のサービスや、ディスクトップアプリ、gulpを用いることでできます。
簡単に変換できますが、ほかの画像の最適化も考えればgulpを使うのが一番効率的でしょう。

wordpressではプラグインを使うことで一括返還することもできますが、管理画面が重たくなってしまうことがあるので、アドべネックでは投稿時に自動変換したりはしていません。

アナリティクスなどでご自身のサイトに訪れるユーザーのブラウザシェアを確認し、必要があればwebPによる画像の表示を導入してみてください。

トップページに戻る