今までの記事でも何度か取り上げてきたページの読み込み速度
読み込み速度が遅いだけで、ユーザーの離脱率や回遊率に大きな差がでます。

そして読み込み速度に大きく影響を及ぼし、
また改善しやすいのが「画像ファイル」。

過去の記事では
「画像のサイズを小さくしたり」、
「読み込みを遅延させる」
プラグインをご紹介してきました。

そして今回ご紹介するのは、WEB画像の次世代フォーマット「WebP」です。

まだメジャーとは言い難く、私も今まで触った事はほとんどありませんでしたが
今回は実際にテスト環境で導入してみました。

次世代画像フォーマット「WebP」のご紹介と、実装してみてわかったことも併せてご紹介します。

画像フォーマットのご紹介

ホームページを彩る写真やイラストの画像ファイル。
実はこれらのファイルには複数の種類があり、用途や特徴に違いがあります。
これが画像フォーマットです。

現在の画像フォーマット

現在の主流となっているフォーマットは
「JPEG」「png」「gif」の3種類となっています。
それぞれに長所や出来る事に違いがあります。

この3種類のフォーマットから用途に合わせて選ばれることが多いのが実状です。

次世代画像フォーマット

数年前からこの3種類とは別に新たなフォーマットが現れました。

「WebP」「JPEG 2000」「JPEG XR」などが挙げられそれぞれ機能に違いがあるものの、いずれも今のフォーマットよりファイルサイズが小さく、それでいて多機能という特徴があります。

そしてGoogleもページの表示速度改善のためにこの次世代画像フォーマットの導入を推奨しています。

Googleの読み込み速度チェックツール「PageSpeed Insights」です。
計測した際、殆どのページで「次世代フォーマットでの画像の配信」が改善項目として挙げられます。

そしてその中でも注目されつつ「WebP」を今回テスト環境に導入してみました。

WebPを実際に導入してみた

今回は当サイトのミラーサイトを作成し、テスト環境として画像をWebP形式に置き換える実験をしてみました。

画像の変換ツール

まず現状使用している「png」や「jpg」ファイルをなどの画像ファイルを「webp」ファイルに変換します。
WEB上に変換してくれるツールが色々ありますが、
以下のサービスが色々なフォーマットが混在した状態でも一括で変換してくれるので使いやすく感じました。

PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱

変換したい画像ファイルをドラッグ&ドロップで指定できるので簡単です。

そして出来た画像を対応する画像に置き換えていきました。

世代フォーマット画像を導入した結果

変換の対象となった20個の画像合計サイズが
「3,050KB」から「546KB」と
80％以上の削減に成功しています。

Googleの読み込み速度チェックツール「PageSpeed Insights」で計測した結果
変更前のスコアが「59点」から変更後「77点」に改善が見られました。

ブラウザで見た際、体感的にも変更後のほうが早くなっているのが分かります。

■WebP導入前

■WebP導入後

次世代画像フォーマットの導入は、ページの読み込み速度改善に効果的だということを感じられる結果になりました。

次世代フォーマット画像を導入するリスク

導入することで読み込み速度向上に大きな効果があることが分かった次世代画像フォーマット。
しかし同時にいくつかのリスクを感じる部分もありました。
それらもご紹介致します。

導入に手間がかかる

当初ミラーサイトを作る際、全てのページの画像をWebPに置き換える予定でした。
しかしそのためのプラグインやツールなどが正しく動作せず、
結局1枚ずつ手動で「アップロード→置き換え」という手順で行いました。
結果、トップページの20枚の画像を置き換えるだけでも小一時間かかってしまい、
沢山の画像やページを使っているサイトの場合、プラグインやツールを導入できないと非常に手間がかかってしまいます。

WordPressで対応していない

WordPressで「アイキャッチ」などを設定する際、「メディア」機能を使いますが
デフォルトの設定ではWebPファイルをアップロード出来ません。

今回Wordpressの設定を変更してアップロードできるようにしましたが
アップロード後メディア一覧に正しく表示させることは出来ませんでした。

また、記事の投稿などで画像をアップロードした際、
「jpg」や「png」なら自動的に複数のサイズにリサイズしたファイルを生成してくれますが
「WebP」の場合これも対応していませんでした。

WordPress内で既にある画像を、「WebP」に置き換えるのも一筋縄では行かない印象です。

表示されないブラウザがある

また次世代画像フォーマットは対応していないウェブブラウザがあります。
「chorome」や「Edge」などの比較的新しいブラウザでは問題なく表示できますが
「IE」では表示ができませんでした。

2021年現在、IEを除くほとんどのWEBブラウザの最新バージョンで表示できるようになっていますが
表示できないブラウザのため、切り分けを行う必要があります。

これからの次世代画像フォーマット

上記のように次世代画像フォーマットは導入するためのハードルが高く、まだ普及しているとは言い難いのが実情です。

しかし、読み込み速度を高速化させる効果は確実にあることが分かりました。
現行のサイトの画像を置き換えるのは大変ですが、これから新しくサイトを立ち上げる際は次世代画像フォーマットの導入も充分検討出来ると思います。

また対応しているブラウザや、導入するためのプラグインはここ数年で充実しており、新しいスタンダードになる日もそう遠くないような気がしました。

WEBの世界は日進月歩で、新しい技術がどんどん出てきます。
S&Eパートナーズの担当者としても取り残されないように日々情報を仕入れ、お客様のホームページにもご提案できるように準備をしております!

ホームページの速度が遅くてお悩みだったり、次世代の画像フォーマットにご興味があるかたは是非ご相談下さい。

ご相談、お問合せはこちら

関連記事
大きな画像は自動にリサイズ！ WPプラグインできるSEO対策 vol.10「Imsanity」
ホームページの読み込みスピードUP！WPプラグインできるSEO対策 vol.9「Lazy Load」