プログレッシブJPEGでWEBパフォーマンスを向上させるアイデア

プログレッシブJPEGでWEBパフォーマンスを向上させるアイデア

プログレッシブJPEGでWEBパフォーマンスを向上させるアイデア

プログレッシブJPEGは、ピクセル数が大きく荒い画像を一旦表示し、その後鮮明な画像を読み込む形式です。

プログレッシブJPEGのバイト数のみを先にロードし、鮮明な画像の表示時に残りをロードするアイデアを紹介しています。

WEBパフォーマンスを向上させる新しい画像遅延読み込みであり、SEOの観点からもブラウザ実装を期待します。

WEBパフォーマンス向上がSEO命題

WEBパフォーマンスを向上させるためにまず重要なのは、WEBページを開いた時の表示速度ですよね。

素早く開くWEBページがユーザーに安心感・信頼感を与える事は、既にデータにより実証されています。

このため、パフォーマンスの高いWEBサイトはGoogleから高い評価を受け、SEO検索順位が上がる傾向にある訳です。

SEO上必須となるWEBページの読込速度

なかでも画像遅延読み込みを使ってWEBの表示速度を上げる事は、いまSEO上必須の作業と言えますね。

画像を一気に読み込むのではなく、場所を確保しつつ徐々に読み込んでユーザーストレスを軽減する技術です。

画像遅延読み込みなどでパフォーマンスを向上させる事は、GoogleがCore Web Vitalsで提唱しており、SEO対策をおこなう上では避けて通れない道です。

現在の画像遅延読み込み方法

画像遅延読み込みとして主流の方法と言えば、以下のやり方が挙げられます。

・ビューポートに入ってから読み込む場合(loading-lazy)
・まずは低画質の画像を読み込んで、後から差し替える(LQIP)
・低画質画像にSVGを使用し、滑らかなぼかしを使う(SQIP)

特に今はlazyによる画像遅延読み込みが一般的に導入しやすく簡単ですよね。

これに加えて、今回紹介するのがプログレッシブJPEGによる画像遅延読み込みです。

将来の画像遅延読み込み法としてメジャーになりうるかどうか、このアイデアの可能性を探ってみます。

プログレッシブJPEGとは

JPEG画像形式は、Webで最も一般的に使用されている画像形式の1つですよね。

JPEGは写真などのカラフルで複雑な画像に最もよく使用されるフォーマットです。

このJPEGには、通常以外に「プログレッシブモード」と呼ばれる形式仕様があります。

ベースラインモード

画像形式の最大の定義要素は一般に圧縮であり、JPEG形式もこの圧縮仕様によって状態が異なります。

ほとんどの画像編集ソフトでは、保存時に作成されるJPEGは「ベースラインモード」です。

ベースラインモードの読込

ベースラインモード

上記の様に画像が上から開き始め、シャッターが閉まる様に徐々に下まで進んで画像が表示される事がありますよね。

これがベースラインモードの特徴です。

プログレッシブモード

それに対しプログレッシブJPEGは、まずは画像のおおまかな輪郭を表示します。

一番の違いは、初めに大きめの枠組み(ピクセル単位)でロードするため、ぼやけた状態の画像になる事ですね。

プログレッシブモードの読込

プログレッシブモード

一旦画像がピクセル化されたような形で読み込まれ、次第により鮮明な形でロードされます。

画像の表示の違い

ベースラインモードとプログレッシブモードの違いを確認してみましょう。

両者を比較するために、同じJPEG画像をそれぞれのタイプの仕様で保存します。

大きいサイズの元画像のため、少しサイズ縮小を掛けると同時に2つのバージョンで画像をエクスポートします。

両者の比較

ベースラインモード
ベースラインモード(サイズ:213KB)
プログレッシブモード
プログレッシブモード(サイズ:204KB)

左がベースラインで、右がプログレッシブですね。

どちらの画像もこの1つのオプション以外はまったく同じ設定を使用しています。

ファイルサイズが若干プログレッシブJPEGの方が小さくなっています。

読込速度の比較(デモ)

高画質の画像を読み込みするときに両者にどれくらいの違いが出るのかを分かりやすく表現したデモがありますのでご覧ください。

注意:下記サイトは非常に重たくなる可能性がありますので、スマホ閲覧時は注意下さい!

Demo:Progressive JPG Demo | Codes | Pooya Karimian

右がベースラインモードで、左がプログレッシブモードです。左の方が早く画像を表示し終わります。

なぜプログレッシブJPEGの方が良いとされるのか

高画質画像ばかりでは処理が遅くなる

高画質な画像を読み込む事は、それだけサーバーに負担がかかる事を意味しています。

例えばあるWEBページが高画質なJPEG画像ばかりで構成されているとしましょう。

そんなWEBページをユーザーが最初に訪れると、画像が全て表示されるまでページが表示されなかったり、マウスのスクロールが動かない事があります。

ユーザーが嫌うページはGoogleからも嫌われる

ストレスを与えられたユーザーはさっと諦めて次のWEBページを訪問しようとしますよね。

ユーザーに嫌われるページはGoogleにも嫌われるため、検索順位の下落につながるのです。

つまりSEOの面でこのWEBページ表示処理が早いか遅いかは重要な問題なのです。

プログレッシブJPEGのメリット

このWEBページ処理の速さの面で、プログレッシブモードの方がベースラインモードよりも有利とされています。

その理由は主に以下の内容です。

ファイルサイズを抑える事ができる

プログレッシブJPEGはベースラインモードのJPEGよりもファイルサイズを抑える事ができ、その分読み込みも早くなります。

画像スペースの確保・内容示唆

しかも表示スペースは荒い画像で前もって確保しているので、画像読み込みによるコンテンツ移動も起きません。

真っ白な空白ではなく大き目ピクセルの画像が出るので、何の画像かがユーザーも何となくわかりますしね。

ただしどちらのモードであっても容量の大きいJPEGファイルであれば、それだけ読み込みに時間が掛かります。

プログレッシブJPEGを使うだけでは、WEBパフォーマンスを上げるには不十分な事を知っておきましょう。

プログレッシブJPEGの作り方

WEBツールを使う

Optimizilla

Optimizilla

「Optimizilla」はオンラインの画像変換ツールです。

1回のセッションで最大20枚の画像を変換・サイズ圧縮できます。

リンク先:Optimizilla

compress-or-die.com

compress-or-die.com

このオンライン圧縮サービスを使用すれば、メタデータを削除しつつプログレッシブJPEGを生成する事ができます。

リンク先:compress-or-die.com

Wordpressへの画像アップロード

プラグイン:EWWW Image Optimizer

EWWW Image Optimizer

「EWWW Image Optimizer」は画像圧縮用のWordPressプラグインです。

これを使えば、メディアに画像をアップロードする時に自動でプログレッシブJPEGに変換してくれます(FTPアップ時は適用されない)。

とりあえずこのプラグインを入れておけば問題はないでしょう。

Photoshop

Photoshopでは画像をJPEGに保存するときに、「プログレッシブ」のチェックマークを付けるところがあります。

プログレッシブのチェックマーク

ここにチェックを付けて保存すると、プログレッシブJPEGで保存されます。

画像遅延読み込みの課題

画像を遅延読み込みさせるのは、WEB表示のパフォーマンスを上げる主要な機能です。

繰り返しとなりますがGoogleが提唱する通り、WEBの表示速度を上げる事はSEO対策において最も重要な課題となります。

例えば低品質画像プレビュー(LQIP)やSVGベースのバリアント(SQIP)などの画像遅延読み込み方法は以前からありました。

画像遅延読み込みの特徴

これらはいずれも一旦ぼやけた画像を表示し、後で元の画像に置き換えられる特徴があります。

JPEGファイルに上記のような遅延読み込みを適用する場合、以下のデータを個別に保存しなければなりません。

保存するファイルデータ

・最初に映すピクセルの粗い画像データ
・最終的に映す鮮明な画像データ

荒いデータと鮮明データの読込が必要

一旦ファイルサイズの小さい「荒いデータ」を表示しているのは、ファーストビューでの負担を軽減するためです。

ですので後から鮮明な画像を読み込む必要があります。

最初のレンダリング処理を、鮮明な画像データ表示で圧迫させないためにそうしているのです。

JPEG画像が多ければ負担も多い

ですので多くのJPEG画像で構成されているWebサイトの場合は、例え全てプログレッシブJPEGであっても読込負担は掛かります。

最近のブラウザでは「ドメインへの同時接続が6つまで」しか許可されていないためです。

最後の鮮明画像への差替えに負担がかかる

先ほども述べた通り、一旦荒いデータを表示しても後から鮮明な画像データに置き換えなければなりません。

ブラウザによっては次の荒い画像の読み込みを開始する前に、前の画像の鮮明なバージョンを読み込んでしまい、結果として負担が掛かります。

単にプログレッシブJPEGを採用するだけでは、ユーザーに対してページ読込の早い印象を与える最大のソリューションとはなり得ません。

新アイデア

では、荒い画像の次に差し替える鮮明な画像データを一から読み込まずに済んだらどうでしょうか。

ここで紹介するアイデアは、サーバーから先にプログレッシブJPEGバイト数分だけをロードして、画像のプレビューデータとして素早く表示できるようにするものです。

鮮明画像から「部分的なデータ」を一度取得してプレビューし、後から残りのデータだけを取得する訳ですね。

JPEGのプログレッシブモード分だけをダウンロード

例えば現在のビューポート上の全てのプレビュー画像が読み込まれた時に、プレビューとして既に要求したデータは再度要求せず、残りの画像データのみを読み込む事ができます。

ポイント:負担の違い

仮にプレビューの荒い画像の負担を「5」、鮮明画像負担を「10」とします。

プレビュー 鮮明画像 負担
通常 5 10 15
新アイデア 5(10の半分) 5(残り) 10

通常はプレビュー用の画像負担「5」と鮮明画像負担の「10」で合計「15」の負担が掛かります。

それに対し今回のアイデアは、プレビュー用の画像負担「5」と、鮮明画像負担が残りの「5」で合計「10」の負担に軽減できます。

しかもプログレッシブJPEGであれば、荒い画像と鮮明な画像を別々に用意する必要もありません。

AjaxとHTTPrequestを併用

残念ながらimgタグには、部分的な画像データを読込する機能はありません。

ただしAjaxを使い、画像を配信するサーバーが「HTTP範囲リクエスト」をサポートしていれば可能になります。

HTTP範囲リクエスト

要求されたファイルのうちどれ位のバイト数をHTTP応答に含めるかを、HTTPレスポンスヘッダーを使ってサーバーに通知する事ができます。

この機能はApache、IIS、nginx等の主要なレンタルサーバーでサポートされています。

動画の特定位置へのジャンプ

主に動画の再生の時などにこの機能が使用されていますよね。

ユーザーが動画の最後の付近にジャンプしたい場合、ユーザーが目的の部分を見る前に動画データ全体を読み込むのは効率的ではありません。

ユーザーが要求した時間の動画データのみがサーバーに応答される事で、ユーザーは素早くその箇所を見る事ができる訳です。

プログレッシブJPEGプレビューツール

プログレッシブJPEG、Ajax、およびHTTP範囲リクエストを使用すれば、追加のデータを読み込む事なくプレビュー画像を読み込む事ができます。

別ページにAjaxおよびHTTP範囲リクエストによるプログレッシブJPEG読込ができるテストページを用意しました。

テストページ:プログレッシブJPEG読込テストページ

5秒後に鮮明画像へ変換されます。

ご注意

Photoshopでプログレッシブにチェックを付けて作成した場合、上記の読込テストではうまく動きませんでした。

紹介した「compress-or-die.com」や「Optimizilla」などのWEBツールで変換したJPEGであれば、きちんと読込されます。

誠に申し訳ございませんが、GoogleChromeでは上記テストページのプレビュー画像が表示されていません。

それ以外の新EdgeやFirefox、Safariなどでは表示されます。

ツール配布先:EmbeddedImage Preview(EIP)

まとめ

このプログレッシブJPEGの範囲読込には強い将来性を感じます。

HTTP範囲リクエストとAjaxを使っで実現しなければならないのが現状ですが、プログレッシブバイト分だけ先に表示する事ができる機能がブラウザに実装されると良いですよね。

そうすればJPEG画像はプログレッシブJPEGにするだけで、WEBパフォーマンスが一段上がります。

SEO環境を整えているのはGoogleでありそのGoogleがブラウザを作っている訳ですから、将来に期待したいところです。

この記事をシェアする

一押し人気コーナー紹介

SEOカテゴリの関連記事