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

次世代画像フォーマット

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

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

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

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

記事を読むメリット

  • Core Web VitalsのLCP改善ができる
  • Page Speed Insightの点数が上がる
  • 次世代画像フォーマットWebPのプラグインの使い方が分かる
  • WebPの.htaccess設定が分かる

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対策(Core Web Vitals)
  • UX向上(読者のストレス低減)

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

ページ表示速度が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など)に自動的に表示を切り替える設定が必要になります。

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

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

  • WordPressプラグインを使う方法
  • 画像変換サービスを使いサーバー設定(.htaccess)をする方法

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

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

 

次世代画像の市場シェア

Webブラウザのシェア(2020年12月時点)

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

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

Webブラウザの総合シェア

Webブラウザ シェア

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

  1. Chrome:47%
  2. Safari:31%
  3. IE:7.4%
  4. Edge Legacy:5.6%
  5. Firefox:5.5%
  6. Samsung Internet:1.1

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

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

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

  1. Chrome:58.3%
  2. IE:12.1%
  3. Safari:10.1%
  4. Edge Legacy:9.1%
  5. Firefox:8.7%
  6. Opera:0.63%

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

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

スマホ Webブラウザ シェア

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

  1. Safari:63%
  2. Chrome:31%
  3. Samsung Internet:3.1%
  4. UC Browser:0.81%
  5. Android:0.65%
  6. Firefox:0.41%

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

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

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

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

 

JPEG 2000の特徴と市場シェア

JPEG 2000の特徴

JPEG 2000

規格時の1色あたりのビット数8 - 12ビット
可逆圧縮・非可逆圧縮選択可
主な符号化技術ウェブレット変換、EBCOT
採用WebブラウザSafari、iOS Safariに対応(全体シェアの5%未満)
開発元Joint Photographic Experts Group

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のブラウザ対応状況を表しており、赤色が未対応、緑色が対応済みのブラウザです。下に行くほど最新のバージョンで、緑が多いほど良いです。

  • 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 の特徴

規格時の1色あたりのビット数8 - 32ビット
可逆圧縮・非可逆圧縮選択可
主な符号化技術重複双直交変換
採用WebブラウザIEや一部Edgeに対応(全体シェアの10%未満)
開発元Microsoft

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

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

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

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の特徴

規格時の1色あたりのビット数8 - 32ビット
可逆圧縮・非可逆圧縮選択可
主な符号化技術重複双直交変換
採用WebブラウザIEや一部Edgeに対応(全体シェアの10%未満)
開発元Microsoft

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

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

WebPの採用Webブラウザ

  • 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 メリット

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

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

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

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

②透過画像を扱える

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

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

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

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

WebP(ウェッピー)のデメリット

WebP デメリット

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

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

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

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

 

WebPの導入方法

WebP 導入方法

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

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

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

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

WordPressでのWebP導入方法

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

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

1.WebP Converter for Mediaプラグインを導入する

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

WebP Converter for Media

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

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

  1. Image loading mode:via .htaccess
  2. List of supported files extensions:.jpg、.jpeg、.png
  3. List of supported directories:/uploads
  4. Conversion method:GD(recommended)
  5. Images qualiy:85%

【各設定の解説】

  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

2.詳細設定

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

  • ✅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ボタンを押して保存しましょう。

3.WebP変換する

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

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

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

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

他のCMSでのWebP導入方法

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

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

1.WEBP変換ツールでWebPに変換

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

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

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

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

2.WebP画像をCMSにアップロード

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

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

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

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

順番に解説します。

3-1.画像タグ設定する

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

<img src="表示したい画像URL" onerror="this.src='エラー時に表示したい画像URL'" />

一例を挙げると、

<img src="../test.webp" onerror="this.src='../test.png'" />

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

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

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

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

置換前:<img src='../test.png'" />

置換後:<img src="../test.webp" onerror="this.src='../test.png'" />

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

3-2..htaccess設定

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

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

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

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

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

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

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

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

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

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

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

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

  • この記事を書いた人
  • 最新記事

アフィリラブ

副業アフィリ歴7年&ブログ歴3年 / 月7桁達成 / 2019年から専業 / LINEオープンチャット「アフィリラブの部屋」開設(参加者400名突破) / 自己投資で借金300万円以上→2012年アフィリ開始→借金完済 / 100kmラン12h完走

アフィリラブTwitter アフィリラブInstagram アフィリラブFacebook

おすすめ記事

GRC 1

GRCは有限会社シェルウェアが開発した、人気の高い検索順位チェックツールです。アフィリエイターは使っていない人の方が少ないかもしれませんね。 GRCはボタン一つで、複数サイトにおける検索語ごとの検索順 ...

Q&A LSI Search 2

今回は、最近リリースされた潜在キーワード取得ツール「Q&A LSI Search」を紹介します。 Q&A LSI Searchは簡単に言えば、Yahoo知恵袋などの複数のQ&A ...

サイト 売買 3

サイト売買(M&A)サービスは、サイトの売買をサポートする比較的新しいサービスです。日本では2005年頃から各社サービスを開始しています。 個人間のサイト売買ではトラブルが起こりやすく、売買サ ...

4

IR-SEO は令和時代に生き残る『2019年最新 今やるべき 王道のSEO対策 理論』のWebセミナー動画です。 2019年3月、5~6月初旬にかけて起こったGoogleアップデートにより、報酬やア ...

-SEO対策

© 2021 アフィリラブ

Core Web Vitals対策note
Core Web Vitals対策note