次世代画像フォーマットWebPの対応ブラウザとCMS別の配信方法

GoogleのPage Speed Insightsの改善項目において「次世代画像フォーマットでの画像の配信」を見かけたことがある方も多いと思います。

次世代画像フォーマットは、2021年5月導入予定Core Web VitalsアップデートのLCP「Largest Contentful Paint：ページの表示速度を測る指標」の改善に役立ちます。

従来の画像（JPEG、PNG）から次世代画像フォーマットに置き換えることで、Core Web Vitals対策と共に、画像の軽量化と、およびサイト表示スピードアップが可能です。

この記事では、ページ表示速度の改善に役立つ次世代画像フォーマット（WebP）への変換方法・注意点をまとめました。

JPEGをWebPに変換するだけでは不十分で、特定ブラウザで表示されなくなります。

次世代画像フォーマットはなぜWebPが良いのか知りたい方、WebP変換方法で困っている方は参考にしてみてください。

次世代画像フォーマットの概要

次世代画像フォーマットとは？

Google のPage Speed Insightsで表示速度の遅いサイトの場合、改善できる項目に「次世代画像フォーマットでの画像配信」での配信と表示されることがあります。

現在の Web ページは JPEG、GIF、PNGなどが一般的でしたが、最近ではより画像のデータ容量が小さく、サイトの速度改善に役立つ次世代画像フォーマットの導入が推奨されています。

次世代画像フォーマットには、JPEG 2000、JPEG XR、WebP（ウェッピー）の3種類ありますが、結論から言えばブロガー、アフィリエイターであればWebP一択で良いと思います。

タカ

2021年5月以降に導入予定のCore Web Vitals対応やサイト表示速度アップのためにも、次世代画像フォーマットを導入しよう。

次世代画像フォーマットならWebP

次世代画像フォーマットは JPEG 2000、JPEG XR、WebPの3種類です。どれを選ぶか迷う方も多いはず。

しかし、いくら優れたフォーマットであっても、Webブラウザに対応していなければ使えません。

3つの次世代画像フォーマットの中で、Googleが開発したWebP がWebブラウザシェアがNo.1であり、かつ圧縮方式も優れています。

次世代画像フォーマットのメリット

次世代画像フォーマットを使う目的は、CWV対策、画像軽量化・サイト速度向上ですが、結果的に下記メリットが得られます。

ご覧の通り、サイトの速度改善は良いことづくめなので、早めにやっておいて損は無い施策です。

ページ表示速度がSEOに影響する割合はわかりませんが、UXを通して結果的にSEOに影響を及ぼすため、十分配慮する必要あります。

そして、2021年5月に導入予定のCore Web VitalsのLCP「Largest Contentful Paint：ページの表示速度を測る指標」の改善にも役立ちます。

▶【2021年版SEO】Core Web Vitalsの基礎

ただし、ただ従来画像をWebP画像に置き換えただけでは、一部ブラウザで画像表示されないトラブルが起こるので注意が必要です。

タカ

次世代画像フォーマット導入は良いことづくめ。我流でWebP対応すると失敗しやすい。

次世代画像フォーマットのデメリット

次世代画像フォーマットは 一部のWeb ブラウザに対応していますが、2021年1月時点ではいずれも全てのWebブラウザには未対応です。

そのため、対応ブラウザには次世代画像フォーマットを表示させつつ、未対応ブラウザには従来の画像（JPEG、PNGなど）に自動的に表示を切り替える設定が必要になります。

ちなみに、すべてのユーザーにブラウザ対応させるため新旧のすべてのブラウザにうまく対応させる方法をプログレッシブ・エンハンスメントと呼びます。

出典：世界と日本のUX | BLOG

WebPに対応させるには、2つの方法があります。

詳しいやり方は後ほど解説します。

タカ

まずはWebブラウザシェアと解説し、JPEG 2000、JPEG XR、webPの特徴や各Webブラウザ使用可否を解説します。

次世代画像の市場シェア

Webブラウザのシェア（2020年12月時点）

次世代画像フォーマットの解説する前に、まずはその説明と関係のあるWebブラウザごとの市場シェアを簡単に触れておきます。

2020年12月時点で、パソコン、スマートフォンそれぞれで調査しました。

Webブラウザの総合シェア

パソコン、スマホ、タブレットを全て合わせたシェアです。（6位以下は省略）

パソコンのWebブラウザのシェア

下記はパソコンのWebブラウザシェアです。（6位以下は省略）

パソコンではChromeがダントツ1位。その次にIE、Safariの順番です。これは予想通りだと思います。

スマホのWebブラウザのシェア

下記はスマホのWebブラウザシェアです。（6位以下は省略）

参考：https://gs.statcounter.com/

日本人におけるスマートフォンの OS シェアは、iPhone（iOS） が42.7%です。

日本はiPhoneユーザーが多く、かつデフォルトのブラウザがSafariのため、スマホではSafari使用者が1位です。

これを踏まえた上で、次世代画像フォーマットの特徴や市場シェアを紹介します。

JPEG 2000の特徴と市場シェア

JPEG 2000の特徴

JPEG 2000はJPEG と比べて周波数変換方式などが異なります。

従来の JPEGではファイルサイズを小さくするとブロッキングノイズ（モザイクのような画像の乱れ）、モスキートノイズ（輪郭部分の画像の乱れ）などが発生しますが、JPEG 2000ではそういったノイズは発生しないのが特徴です。

JPEG 2000の拡張子は「.jp2」「.j2c」「.j2k」「.jpf」「.jpx」「.jpm」「.mj2」「.jph」があります。

JPEG 2000では，JPEGと同様，入力画像に対して周波数変換を施し，その変換係数に対して量子化，エントロピー符号化を適用することで画像の持つデータ量を圧縮する．JPEGとの要素技術における主な相違点は，

• 周波数変換に離散コサイン変換ではなく，離散ウェーブレット変換 (Discrete Wavelet Transform:DWT)を用いること
• エントロピー符号にハフマン符号ではなく，算術符号を用いること
• 可逆符号化(ロスレス)と非可逆(ロッシー)符号化を同一の方式にて実現可能であること

である．　出典：JPEG 2000　Wikipedia

JPEG 2000採用ブラウザ

出典：JPEG 2000のブラウザ対応状況 | caniuse.com

• IE：未対応
• Edge：未対応
• Firefox：未対応
• Chrome：未対応
• Safari：5-5.1以降は対応
• Opera：未対応
• iOS Safari：5-13.7以降は対応
• Opera Mini：未対応
• Android Browser：未対応
• Opera Mobile：未対応
• Chrome for Android：未対応
• Firefox for Android：未対応
• UC Browser for Android：未対応
• Samsung Internet：未対応
• QQ Browser：未対応
• Baidu Browser：未対応
• KaiOS Browser：未対応

JPEG 2000のブラウザ対応状況は、Safari、iOS Safariのみ対応です。総合ブラウザシェアを考慮すれば、Webブラウザ全体の5%未満です。

JPEG XRの特徴と市場シェア

JPEG XR の特徴

JPEG XRは写真画像などの連続階調静止画像の表現に使われます。

画像品質が良く、圧縮率が高い特徴を持ちます。また、エンコードおよびデコードが比較的容易などのメリットもあります。

JPEG XRの拡張子は「. hdp」「.wdp」「.jxr」です。

JPEG XR採用ブラウザ

出典：JPEG XR ブラウザ対応状況

• IE：9以降は対応
• Edge：12以前は対応
• Firefox：未対応
• Chrome：未対応
• Safari：未対応
• Opera：未対応
• iOS Safari：未対応
• Opera Mini：未対応
• Android Browser：未対応
• Opera Mobile：未対応
• Chrome for Android：未対応
• Firefox for Android：未対応
• UC Browser for Android：未対応
• Samsung Internet：未対応
• QQ Browser：未対応
• Baidu Browser：未対応
• KaiOS Browser：未対応

JPEG 2000のブラウザ対応状況は、IE最新バージョン、Edgeのみ対応です。総合ブラウザシェアで言えば、Webブラウザ全体の10%未満です。

WebPの特徴と市場シェア

WebPの特徴

WebPはGoogleが開発した静止画フォーマットです。透過画像も使えたり、アニメーション表現もできるので軽量版PNGといったところでしょう。

ファイルの拡張子は「.webp」のみです。

WebPの採用Webブラウザ

出典：WebPブラウザ対応状況 | caniuse.com

• IE：未対応
• Edge：18以降は対応
• Firefox：65以降は対応
• Chrome：32以降は対応
• Safari：14以降は一部対応
• Opera：32以降は対応
• iOS Safari：14.3以降は対応
• Opera Mini：対応
• Android Browser：4.2以降は対応
• Opera Mobile：対応
• Chrome for Android：対応
• Firefox for Android：対応
• UC Browser for Android：対応
• Samsung Internet：対応
• QQ Browser：対応
• Baidu Browser：対応
• KaiOS Browser：未対応

WebPは古いブラウザとIE以外はほぼ対応しています。総合ブラウザシェアで言えば、Webブラウザの70%以上に対応しています。

ただし古いバージョンでは対応してなかったり、一部のブラウザでは非対応のため、シェアNo1.のWebPでさえ全ブラウザに対応していないです。

タカ

次世代画像フォーマットのシェア1位のWebPを使えば問題なし。

WebPが選ばれる理由

Webブラウザのシェアが一番大きい

次世代画像フォーマットの競争において、WebPが一強と言えるのは、その画像シェアにあります。

Webブラウザ全体のシェアはJPEG 2000が5%、JPEG XRが10%に対して、WebP は70%以上とシェアNo.1です。

当然ながら、非対応の場合は画像の圧縮効果は得られないため、最も使われているフォーマットが選ばれています。

WebP（ウェッピー）のメリット

WebPのメリットは主に2つあります。

①ファイルサイズの軽量化

JPEGと比較してファイルサイズが25～34%程度小さくなりますが、実際には50%以上（場合によっては90%）削減できることもあります。

Webサイトのデータ容量のほとんどが画像ファイルで占めていると言っても過言ではなく、画像の軽量化によってサイト高速化が期待できます。

②透過画像を扱える

WebPは非可逆圧縮、かつアルファチャンネルです。

非可逆圧縮とはもとに戻せない圧縮方式のことで、アルファチャンネルは透過画像を使えることを指します。

GIFやPNGはアルファチャンネル対応していますが、JPEGは非対応です。一方で、GIFやPNGは画像ファイルが大きい欠点がありました。

ファイルサイズ軽く、かつ透過画像を使える良いとこ取りしたのがWebPです。ただし、アルファチャンネルを利用する場合は22%容量が増えます。

WebP（ウェッピー）のデメリット

WebPはSafari、IEに非対応なのが最大の欠点です。日本人の iPhone ユーザーは4割以上いるので、決して無視はできない数字です。

しかし、Safariも次のバージョンでWebPに標準機能としてサポートされることが決まっています。残るIEもWebP対応するのは時間の問題かと思います。

Android ユーザーとパソコンユーザー、Safari以外のブラウザ使用しているiPhoneユーザーに対しては改善が見込めますし、今後に期待したいところです。

タカ

それでは、WebPの導入方法を解説します。WordPressなら超簡単です。

WebPの導入方法

WebPの導入方法は使っているCMSによって異なり、繰り返しになりますが、ただ画像を置換するだけでは、IEやSafariなど未対応ブラウザへの対応ができません。

画像が表示されないと離脱率、直帰率が上がり、滞在時間も減る可能性があるのでメリットよりもデメリットが多くなります。

そこで、元の画像（JPEG等）を残しつつ、対応ブラウザにはWebPを表示させ、非対応ブラウザには従来画像に切り替えて表示する必要があります。

CMSによってやり方が異なるので、WordPressの場合とそれ以外で解説します。

WordPressでのWebP導入方法

WordPressの場合は、プラグインを使えば簡単にWebPの画像変換と切替設定ができます。

方法は一つだけではありませんが、たとえば「WebP Converter for Media」などがあり、使い方は下記の通りです。

１．WebP Converter for Mediaプラグインを導入する

WordPressのプラグイン追加画面から「WebP Converter for Media」と検索してください。

インストールしたら、設定を有効にし、設定画面に移ります。

各種設定ができますが、基本的には初期設定から変更不要で使えます。

【各設定の解説】

1. Image loading modeは次世代画像と従来画像の変換方式の選択です。これによって、ブラウザごとに表示可能な画像を選んでくれますが、サーバー上で変換する方式である.htaccessでOKです。
2. List of supported files extensions：変換したい画像の種類です。必要に応じて選んでください。
3. List of supported directories：WebPに対応させたいディレクトリです。WordPressのデフォルト設定では、「メディアの追加」から登録した画像は、「/wp-content/uploads」内にすべてアップロードされます。そのため、/uploadsを選びます。テーマやプラグインの画像も変換したい場合は、/plugins、/themesにもチェックいれてください。
4. Conversion method：画像の変換方法。推奨設定のGDで良いです。
5. Images quality：画像の品質です。推奨設定は85%なので、特段変更する必要はありません。

参考：サイトの画像をWebPに対応させるプラグインWebP Converter for Mediaが簡単設定でした！ JunJunWeb.Net

２．詳細設定

詳細設定も変更不要です。下記にチェックが入っていることを確認してください。

• ✅Automatic removal of WebP files larger than original：WebPの方がオリジナル画像よりファイルサイズ大きくなった場合はWebP変換しない。
• ✅Browser Caching for WebP files (saving images in browser cache memory)：WebPでブラウザキャッシュさせる。
• Keep images metadata stored in EXIF or XMP formats (only available for Imagick conversion method)：画像のメタデータをEXIFまたはXMP形式で保存する。
• Enable cron to automatically convert images from outside Media Library (images from Media Library are converted immediately after upload)：メディアライブラリの外部からの画像を自動的に変換する。
• ✅Enable cron to convert images uploaded to Media Library to speed up process of adding images (deactivate this option if images added to Media Library are not automatically converted)：画像追加プロセスの高速化。
• Force redirections to WebP for all domains (by default, images in WebP are loaded only in domain of your website - when image is displayed via URL on another domain that original file is loaded)：すべてのドメインのWebPへのリダイレクトを強制する。
• ✅Log errors while converting to debug.log file (when debugging in WordPress is active)：変換エラー発生時のログを残す。

終わったら必ず、Save Changesボタンを押して保存しましょう。

３．WebP変換する

既に保存されている画像をWebPに変換する方法がRegenerate imagesです。最初に必ず実施してください。

Force convert all images againにチェックを入れ、Regenerate Allをクリックすれば全ての画像をWebPに変換してくれます。

変換前画像（JPEGなど）は、wp-content/uploads内に保存されます。それら元画像は消す必要はありませんし、消すとトラブルの元です。（サイト表示スピードとは関係ありません）

そして、同フォルダ内に.htaccessファイルが保存されており、非対応ブラウザの場合は自動的に置き換える設定が記載されています。

他のCMSでのWebP導入方法

WordPress以外のCMS（ブログや他のサイト作成ツール）では、プラグインが使えないため、次世代画像と従来画像のを自分で切り替え設定する必要があります。

CMSによって若干違ったりしますが、基本的には次の手順で行ってください。

１．WEBP変換ツールでWebPに変換

従来画像（JPEG、PNG）から次世代画像フォーマット（WebP）に変換するには、たとえば次の無料サービスが使えます。

WEBP変換ツール：https://lab.syncer.jp/Tool/Webp-Converter/

やり方は簡単で、ツール上で変換したい画像を選択した後、WebP変換された画像をダウンロードします。

タカ

変換前の画像も消さずに残しておいて下さい。消してしまうと非対応ブラウザで表示変換ができなくなります

２．WebP画像をCMSにアップロード

従来の画像フォーマット（JPEG、PNG、GIF）をそのままに、同名のWebPファイルも同時にCMSへアップロードします。

このとき、WebPファイルを他の画像ファイルと同じフォルダ内にアップロードしてください。置換設定をシンプルにするためです。

自動切り替え設定は２パターンあります。

1. 画像タグで切替える
2. .htaccessで切り替える

順番に解説します。

３－１．画像タグ設定する

imgタグで下記の通り記載します。

一例を挙げると、

imgタグで記載する場合は、全ての画像タグをこれに切り替えるだけOKです。まずは1画像で試して、うまくいったら次の画像でも試してみてください。

画像数が多いと記述が大変ですが、従来画像と次世代画像のファイル名を同じにしておけば置換できるので楽です。

エクセルやCMS搭載の置換ツール等を使って、拡張子を「.jpg」「.png」などから「.webp」へ一括変換できるはずです。

たとえば、次のような感じです。

タカ

一斉置換はバックアップ取った上で実施してください。ミスすると修正が超大変です。

３－２．.htaccess設定

もう一つの方法が、.htaccessファイルを使いWebサーバー上で従来画像と次世代画像（WebP）を振り分ける方法です。

.htaccessファイルとは、Webサーバーの動作を記述するテキストファイルで、HTMLを書き換えずにWebサーバーの設定を変更できます。

簡単に言えば、「ブラウザがSafariなど非対応ブラウザでは従来ファイルを表示、対応ブラウザはWebPファイルを表示」といった設定です。

下記.htaccessファイルを作成すれば、imgタグを変えること無く自動的に振り分け設定完了です。

 command

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1%2.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1$2\.webp [L,T=image/webp,R]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

出典：次世代フォーマット WebP を使ってみよう！

こちらの方が労力は少なくて済みますが、設定ミスするとサイトが表示されないなどのトラブルも起こりますので、十分注意してください。

通常はFFFTPなどのFTPソフトを使ってファイル設置しますが、エックスサーバーであれば、.htaccess編集ができます。

サーバーパネルにログイン後、ホームページ→.htaccess設定→変更したいドメインを選択→.htaccess編集です。

元々入力されているファイルは消さずに、追記する形で入力します。

元の.htaccessファイルをメモ帳などで保存した上で、必ずもとに戻せる状態で修正しましょう。間違って変更すると、記事が表示されなくなります。

他のサーバーでもおそらく.htaccess設定できるはずなので、検索してみてください。