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による画像の表示を導入してみてください。

ブログ一覧へ戻る
松下 正平のプロフィール写真
            

この記事の著者

松下 正平

2002年より大阪を拠点に活動。仕様の行間を読み「よきにはからう」実装力をモットーとするWeb制作・WordPress開発のフリーランス。
2019年に大阪市内から枚方市に移転。
近年はLooker Studioを活用したアクセス解析にも力を入れています。

趣味

趣味は息子とのサッカー、及びサッカー観戦。ガンバ大阪好き。
好きなアイドルはBABYMETALとsora tob sokana。
現在はまっているゲームは「スプラトゥーンレイダース」
無限食堂554階をあたりを探索中。

コーディングのご依頼お待ちしております

Wordpressの構築やレスポンシブ化など人手が欲しい時はぜひお声がけください。

このブロックが表示されている時は条件が合えば即日作業が開始できます。お気軽に条件をお送りください。

制作会社様向け詳細はこちら
両手いっぱいに広げ、コーディング案件を待っているメタラー