ページの表示速度は画像で決まる!? 画像を最適化する5つの方法

訪問者の記憶に残るようなWebサイトにするために、画像は不可欠な要素です。

画像はサイト訪問者のエンゲージ率を高め、直帰率を改善できる要素のひとつです。一方で、画像を入れすぎるとページの表示速度が遅くなるなど、Webサイトのパフォーマンスを下げる恐れがあります。

GoogleやBingといった検索エンジンのクローラーは、画像が重く表示速度が遅いWebサイトの評価を下げています。そのため、画像の扱いには注意が必要です。

では、どのようにすれば画像の質を保ったままページの表示速度を短縮できるのでしょうか？

この記事では、初心者でも行動にうつせる「画像を最適化してページのロード時間を削減するための方法」をご紹介します。

【大前提】画像を最適化する際は「モバイル」を意識する

現在のオンライン上のトラフィックのうち、およそ60%はモバイル端末から来ていると言われています。

Googleもモバイル端末を優先したブラウジングを強化しており、オンラインビジネスを行なっている企業にとって、モバイルフレンドリーなWebサイトは必須です。

多くの人がネットサーフィンにモバイル端末を使っているので、画像はモバイルに最適化されていることがマストです。

画像を最適化する4つのメリット

Webサイトの画像を最適化ことで、多くのメリットが期待されます。

ここでは具体的に4つのメリットをご紹介します。

1. Webサイトのディスク容量を削減できる

サイズの大きい画像は、Webサーバー上で多くのディスク容量を要します。

この問題を解決する手段として、より高額なレンタルサーバーを借りたり、またサーバーをホストする手もありますが、それではコストが高くなってしまいます。

そこで画像を最適化することによって、コストをかけずに、Webサイトのディスク容量を節約できるのです

2. ページのロードスピードがあがる

画像を最適化することで、ページをロードする時間を短くできます。とくにモバイル端末では、画像を最適化するだけでもページスピードに劇的な変化を与えられるでしょう。

また画像をWebサイトのために最適化しておくことで、あらゆる種類のブラウザで表示しやすくなり、優れたWebサイトとして機能させられるのです。

▲ページのロード時間を評価してくれるPageSpeed Insight。49点以下は要改善

3. SEOを改善できる

Googleは、Webページの表示スピードは重要な要素だと言及しており、とくにモバイルでの表示スピードが遅いページの検索ランキングを下げるとしています（スピードアップデート）。

つまり画像の最適化は、SEOの観点からいっても重要な役割を果たしてくれるのです。

4. UXを向上させられる

検索エンジンだけでなく訪問者もまた、読み込みの早いページを求めています。

訪問者により良いUXを提供するには、正しく構造化されたページと、最適化された画像が欠かせません。

オンラインビジネスにとって、UXはビジネスの存続のためにも欠かせないことです。

画像を最適化する5つの方法

以下で画像を最適化し、ページの表示速度を早くする具体的な手法を5つご紹介します。

どの程度Webサイトの読み込みを早くしたいかによって、方法を使い分けましょう。

1. 適切なファイルフォーマットを選ぶ

Webに最適化された画像ファイルフォーマットを選ぶことで、読み込み時間を減らせます。

今回はたくさんあるフォーマットファイルから、4つご紹介します。

【PNG（Portable Network Graphics）】

通常はLossless圧縮が必要な際に使われます。画像の質が高いのが特徴ですが、その分容量も大きくなります。

PNGは高画質なのが特徴で、画像から背景を取り除くのも簡単にできます。

【JPEG（Joint Photographic Experts Group）】

PNGよりも画像の質は落ちますが、その分画像サイズも小さくなります。JPEGはlossy圧縮やlossless圧縮にも使われており、デジタルカメラの画像にも広く使われている形式です。

JPEGはPNGと異なり、背景の取り除きはできません。しかし簡単に圧縮できるうえ、画像サイズも小さいのが特徴です。

【GIF（Graphic Interchange Format）】

GIFは動画化された画像をソーシャルメディアやブログ上に表示するためにｍインターネット上で広く使われているファイル形式です。lossless圧縮のみ対応しており、比較的小さなファイル容量で動画化された画像を作成できます。

GIFを使えば、短いメッセージをユーザーに伝えたり、よりコミカルな効果を演出できます。

【SVG（Scalable Vector Graphics）】

シンプルな画像やテキスト、ロゴに使われるファイル形式です。SVGファイルは、図形やカーブ、線、テキスト要素を含んでいます。

SVGファイルは、どのような大きさや解像度の画面でも素早くスケールできるのが特徴です。ほとんどのWebブラウザや端末に対応しており、フレキシブルに活用できます。そのうえファイル容量は小さく、JPEGやPNGと同じように画像検索エンジン上に表示されます。

2. 画像をリサイズする

画像のリサイズは、画像の容量を削減するうえでキーとなります。

ここでいう画像のリサイズとは、HTMLの属性やCSSでサイズを縮めるのではなく、実際の画像サイズを変更することを意味しています。

たとえば3800×5000pxの寸法の製品画像を、300×300pxの大きさで画面に表示させるとします。この際、HTMLコードでheightとwidthの属性を設定する代わりに、サーバーからブラウザに送られる前にリサイズするのです。

先にリサイズすることで、Webページのロード時間を減らせるだけでなく、帯域幅やディスクスペースも削減できます。

また昔のデザインに合わせてリサイズされた画像だと、現在の新しいWebサイトのデザインでは寸法が合わない可能性があります。たとえば以前は1600×1800pxでサイトのバナーサイズを設定していたとしたら、現在は800×1000pxの画像が正しい寸法です。こうすることで数KBも節約できます。

なお「表示サイズが小さいと画像の質が悪くなる」という誤った認識をしている人も多いです。

しかし実際は、どんなに大きくても横幅1926pxあれば十分です。6000pxの高画質すぎる画像は、Webでは必要ありません。

3. 画像のファイル容量を圧縮する

Webページにおいて画像は「視覚的なインパクト」として重要な役割を担っています。そのためビジュアルを重視する企業にとっては、ページの読み込み速度より、画像のクオリティの優先度が高いことも多いでしょう。

しかし正しく画像を圧縮すれば、画像のクオリティを保ったまま、ファイル容量を削減でき、読み込み時間を短くできるのも事実です。

もちろん画像のファイル容量を100%→10%に圧縮したら、ページの読み込みは速くなりますが、画質は粗くなります。

しかしファイル容量を100％→80％〜90%に圧縮する程度であれば、見た目上はほとんど変化はなく、ページの読み込み時間を十分に速められます。

4. Lossy圧縮とLoseless圧縮を理解する

Lossy圧縮もしくはLossless圧縮をおこなうためには、Adobe PhotoshopやAffinity Photoなどのソフトウェアを利用します。

画像の用途に合わせて、圧縮方法を柔軟に選びましょう。基本的にはLossy圧縮がおすすめです。

Lossy圧縮（非可逆圧縮）

画像を圧縮する際にデータの一部を失う圧縮形式です。人間が知覚できない領域の色調をカットし、ファイル容量を格段に減らせます。

なお一度圧縮してしまうと、復元しても完全にオリジナルに戻すことはできません。

Lossy圧縮はファイル容量の小さいJPEGファイルに向いています。データは失いますが、画質を妥協せずに大きな容量削減効果が得られるためおすすめです。

Lossless圧縮（可逆圧縮）

画像の圧縮時に、すべてのデータを損なわずに保持できる圧縮形式です。

圧縮を戻すと、完全オリジナルに復元可能。しかしその分、Lossy圧縮よりはファイル容量が大きくなります。

▲出典：PC Magazine Encyclopedia

5. 画像最適化ツールを使う

世の中にはたくさんの画像最適化ツールがあります。

無料のものから有料のものまであり、どのツールを使うかは好みと最適化のタイプによるでしょう。

有名なツールは以下のようなものがあります。

• Adobe Photoshop
• OptiPNG
• JPEG Optimizer
• ImageRecycle
• JPEG Mini

もっと画像を最適化したい人は……

ここまでに述べたポイントは、画像やWebサイトパフォーマンスを改善するために大切な要素です。

くわえて以下のようなポイントも抑えておくとより良いでしょう。

• サーバーに追加する前に画像をリサイズする
• リサイズができないときはHTMLで高さと幅を指定する
• 不必要なサイズを減らすために画像を圧縮する
• 可能であればSVGファイルを使う
• 画像を説明するalt属性（代替テキスト）を挿入する
• PNG／JPEG／GIFをそれぞれ適切な場所で使う

テキストを画像化して配置するのではなく、SVGやWebフォントを使うその他、以下のような技術を抑えておくと、さらにページのロードスピードを挙げられます。ぜひご検討ください。

ブラウザキャッシュ

ブラウザキャッシュは、2回目以降のアクセスの際にブラウザのローカルストレージから同一のデータを取り出す技術。わかりやすくいうと、前回アクセスした際にページ内容を、ブラウザに保存しておくことを指します。

ブラウザキャッシュを利用することで、ロード時間を短くしUXを向上させられます。

レイジーロード

レイジーロード（Lazy Load）は、ページを開いた時に全てのコンテンツを読み込まず、スクロールにあわせて順次コンテンツを読み込む技術です。

すべての画像を同時に読み込まないことで、最初のページロード時間を短縮できるのです。

読み込み時間を減らすことで、訪問者がページから離れてしまうのを防ぐ効果があります。

▲出典：Google

画像が最適化できているかを調べられる3つのソフトウェア

Webサイトの画像がかかえる問題をテストするソフトウェアを3つご紹介します。

なおいずれのツールも、デスクトップとモバイルのスコアが異なることがあります。とくにモバイルはデスクトップと比べてスコアが低くなる傾向にあるため、注意を払いましょう。

PageSpeed Insight

あなたのWebサイト上に最適化されていないコンテンツがないか、またどのように改善できるかを教えてくれるGoogle公式の無料ツールです。

PageSpeed Insight

Google Lighthouse

Webページのコンテンツが重くないかを確認できるオープンソースのソフトウェアです。Chrome拡張またはコマンドラインで実行できます。

PageSpeed Insight

ImageKit

URLを入れれば、数分以内に以下の問題を指摘してくれるおすすめツールです。

• 最適な画像フォーマット
• レイジーロード
• HTTP2
• 画像リサイズ
• デスクトップとモバイルのスコア

ImageKit

おわりに

Googleの調査によると、読み込みに10秒以上かかるページは直帰率が123%上がると言われています。

ここで紹介したことを実践すれば、あなたのWebサイトは優れたUXを提供できるだけでなく、サイトへの流入も増えるはずです。

画像を最適化するメリットは明らかです。さっそく始めてみましょう。

（原文：David Bailey-Lauring　翻訳：Shimizu Yui）

こちらもおすすめ！▼