「次世代フォーマットでの画像の配信」の対策

どうも、リュウセイです！

サイトの表示速度を診断して改善が出来るGoogleの公式無料ツール「PageSpeed Insights」、あなたも使ってますか？

このツールを使うことで、サイトの表示速度の低下を招いている項目が一目で分かるという非常に優れたものなんですが、如何せん提案される項目が難しい･･･。

など、主な提案項目はこの辺なワケですが、ITに精通していないと正直『？』状態ですよね。

しかし、サイトの表示速度低下は、「ユーザーの離脱率アップ＆SEO評価低下」に繋がるので、決して無視は出来ません。

SEO評価が低下すると、検索上位での表示が絶望的に厳しくなるため、ブログ運営者全員に共通する課題だと言えます。

サイト表示速度に関しては

サイトの表示速度を改善させるために必要なこと

サイト表示速度改善に超便利なプラグイン【Autoptimize】

↑コチラの記事でも解説しているので、もし良かったら合わせて読んでみてください(追記予定です)。

今回の記事では「次世代フォーマットでの画像の配信」について解説していこうと思います。

上で紹介した記事の中でも解説していることですが、比較的改善しやすい項目なのでまずはここを改善させることがオススメです。

「次世代フォーマットでの画像の配信」とは

「次世代フォーマットでの画像の配信」とは、Googleがサイト表示速度改善のために推奨している、「JPEG 2000、JPEG XR、WebP」 などの画像フォーマットで配信する提案策のことです。

現在、Webサイトで使用されている画像は「JPG、GIF、PNG」などが一般的ですが、Googleは「JPEG 2000、JPEG XR、WebP」のいずれかで配信することを勧めています。

• JPEG 2000
• JPEG XR
• WebP

Googleが推奨するこれらの画像フォーマットとは、具体的にどのようなものなのか？

結論を言うと、これらのフォーマットで配信することに超したことはないのですが(出来るならそーしたいよ)、最大の問題は「対応ブラウザの少なさ」にあります(ここがネック！)。

上記３つのフォーマットについて、順番に解説していきます。

JPEG 2000

JPEG 2000とは、2000年頃に登場したJPEGの進化版となるフォーマットです。

JPEGよりも高性能で、表現力も高いです。

拡張子は「.jp2」「.j2c」「.j2k」「.jpf」「.jpx」「.jpm」「.mj2」「.jph」です。

JPEGの進化版だけあって、従来のJPEGでネックとなっていた可逆圧縮ができるようになっています。

ブラウザ毎の対応(2020年8月現在)

参考元：Can I use｜JPEG 2000

JPEG 2000は、2020年8月時点において、「safari」しか対応していません。

それ以外の対応していないブラウザではどうなるのか？というと、画像が表示されません。

ユーザーはsafariが多いといっても、safariしか対応していないのは、いくら次世代フォーマットと言えど正直使い勝手が悪いですね(現在では)。

しかし、今後のブラウザのアップデートによっていずれ対応していくので、現状ではそれを待つしかない状況となっています。

JPEG XR

JPEG XRとは、JPEGに替わる規格としてMircorosftが開発した画像フォーマットで、拡張子は「.hdp」「.wdp」「.jxr」です。

PEGと比べてノイズが少なくキレイな画像表現が特徴で、圧縮率が高いです。

半透明の表現もできて、可逆圧縮・不可逆圧縮の双方に対応していることが特徴的です。

ブラウザ毎の対応(2020年8月現在)

参考元：Can I use｜JPEG XR

JPEG XRは、2020年8月時点において、「Ie」「Edge」が対応済みとなっています。

macやiPhoneのユーザーを想定すると、safariやGoogleChromeにも対応してほしいですよね。

WebP（ウェッピー）

WebPは、Googleが開発している静止画フォーマットで、ファイルの拡張子は「.webp」です。

JPEGやPNGをそれぞれ30％程度圧縮できるスペックを備えているようです。

アニメーションの表現もでき、PNGのような透過表現にも対応しています。

ブラウザ毎の対応(2020年8月現在)

参考元：Can I use｜WebP

WebPは、2020年8月時点において、「Ie」「safari」以外のブラウザに対応しています。

しかし、safariユーザーが多いことを鑑みると、痒いところに手が届いていない感じが否めません。

safariは「iOS14」で対応されると言われているので(未実装)、今後の展開に期待です。

ただし、iOS14に対応するのはiPhone6s以降に発売したモデルが対象なので、iPhone6以前のモデルを使っているユーザーのブラウザ(safari)にはWebPが表示されないという点に注意です。

「次世代フォーマットでの画像の配信」対策の結論

JPEG 2000、JPEG XR、WebPのそれぞれのフォーマットについて解説してきた結論としては、現状での対応ブラウザ及び今後の事を考慮すると、「WebP」で配信するのが最も現実的だと言えます。

とは言っても、今の状況でサイトにアップしている画像を全てWebPに変換してしまうと、対応していないブラウザでは画像が表示してくれなくなります。

ですが、未対応ブラウザでは「JPG、GIF、PNG」の形式で表示させ、「WebP」に対応しているブラウザにはWebPで表示させるという魔法のようなやり方が実はあるんです！

他記事でも紹介している「EWWW Image Optimizer」というプラグインを使うことで、それが可能になります。

元画像(JPG、GIF、PNG)を残すことで、WebP対応していないブラウザには「JPG、GIF、PNG」で表示させることを可能としています。

元画像がないとWebP対応していないブラウザだった場合に画像が表示されなくなってしまうので、手動で元画像を消さないように注意しましょう。

「EWWW Image Optimizer」でのWebP変換

WebP変換はそんなに難しい作業ではないので、実際にやってみましょう。

STEP.１

• 「EWWW Image Optimizer」の設定からWebPのタブを開く
• 1番上にある「WebP Conversion」にチェックを入れて「変更を保存」をクリック

 

STEP.２

• 下にスクロールするとコードが生成されている
• 「リテライトルールを生成する」を押さずにコードをコピーする

 

STEP.３

• コピーしたコードを「.htaccess」の一番上に貼り付ける(青で表示されているのが貼り付けたコードです)

 

※「.htaccess」の編集は、サーバー管理画面から行えます(画像はエックスサーバーの管理画面です)。また、「.htaccess」に新規に記述するときのルールは「必ず一番上にコードを記述する」です。

最後に、右下にある「確認画面へ進む」をクリックして「実行」をクリックすれば終了です。

「.htaccess」にコードを貼り付けると、先程コードが表示されていた「EWWW Image Optimizer」の下の画面が、画像のような状態になっていたら設定は全て完了です。

この設定が終われば、次回から画像アップロード時に元画像を残したまま自動でWebPを生成してくれます。

そして、対応ブラウザにはWebP、未対応ブラウザには元画像を表示する設定まで完了しています。

WordPressにWebPを直アップロードする方法

「EWWW Image Optimizer」でも十分な圧縮率ですが、自分でWebP変換した方がより圧縮出来るケースがあります。

その場合、EWWW Image Optimizerを無効にして、自分でWebP変換した画像を元画像とセットでアップロードしたすることによって、更にサイト負担を軽減することが出来ます。

しかし、初期の設定ではWebPの画像をWordPressにアップロード出来ません。

そのため、WordPressにWebP画像をアップするための２つの方法についてご紹介します。

「function.php」にコードを追記する方法

function.phpの部分に下記のコードを追記して下さい。

FTP等を使ってサーバに直アップロードする方法

function.phpなどをあまり触りたくない方はこの方法がおすすめです。

画像のアップロード先は　public_html/ドメイン/wp-content/uploads/　の中です。

ファイルの中に画像をドラッグ＆ドロップしてアップロード完了です。

設定によっては　public_html/ドメイン/wp-content/uploads/2020/07　の様に年/月と細分化されているので確認しておきましょう。

まとめ

ここまで読んでいただき、ありがとうございました。

今回は「次世代フォーマットでの画像の配信」に重点を置いて解説してきました。

この他にも、Googleの「PageSpeed Insights」にて提案される主な改善項目はどれも重要なものばかりなので、SEO対策のためにもしっかりと対策しておきたいところです。

それでは、今回はこの辺で。

ありがとうございました。

ﾁｬｵ(･∀･)！