イメージオプティマイザーとは?| 画像サイズを小さくする方法

イメージオプティマイザーは、画像をインターネット用に最適化して、画像の読み込みを速くするために、画像のファイルサイズを縮小します。

Share facebook icon linkedin icon twitter icon email icon

イメージオプティマイザー

学習目的

この記事を読み終えると、以下のことができます。

  • 「イメージオプティマイザー」を定義する
  • 画像を高速化するほかの方法を理解する

イメージオプティマイザーとは?

イメージオプティマイザーは、画像ファイルを小さくするサービス、製品、またはライブラリです。通常、イメージオプティマイザーは、理想的には画質をあまり損なうことなく、画像を圧縮してサイズ変更することで、画像のファイルサイズを縮小します。これにより、ユーザーのブラウザーに読み込む時間が短縮され、Webサイトの表示速度とパフォーマンスが向上するので、Web用に画像が最適化されます。

なぜ画像サイズを小さくする必要があるのか?

Webページに表示されるすべての画像は、表示される前にユーザーのブラウザーからダウンロードする必要があります。画像のサイズ(寸法ではなくファイルサイズ)が大きいほど、ダウンロードにかかる時間は長くなり、より多くの帯域幅が消費されます。ユーザーがモバイルデバイスを使用している場合でも、大きな画像がダウンロード時に大量のデータを消費します。

したがって、画像を小さく保つことは、Webサイトのパフォーマンスにとって重要であり、Webサイトのパフォーマンスは、SEOにとって、そして、Webサイト上でのユーザーのエンゲージメント率とアクティブ率を高くするために非常に重要です。Googleでは、読み込み速度が速いサイトは優先順位が上がります 。Webページの読み込みに時間がかかると、ユーザーの直帰率が高くなり、コンバージョン率が低くなります

画像ファイルサイズをどのように縮小するか?

画像サイズを小さくするための最初の手順は、その寸法を縮小することです。たとえば、一般的なWebサイトでは、横幅が3000ピクセル以上の画像は必要ありません。(実際、ほとんどのデスクトップディスプレイの横幅は1920ピクセル以下です)。画像の寸法を調整すると、画質を落とさずに、ファイルサイズを小さくすることができます。

画像は圧縮することもできます。イメージコンプレッサー(Photoshopの「Web用に保存」機能など)は、JPEGファイルをずっと低い解像度に縮小することができ、画像は本質的に同じに見えます。ただし、画像は、ぼやけることなく、プロ級の見栄えになるべきです。ティッピングポイント(転換点)となるのは、解像度が低すぎて、パフォーマンスの向上に価値がなくなる時点です。テストしてみることが大切です。画像は大型のモニターでも小さなスマートフォンの画面でもプロ級の見栄えになるべきです。

画像のサイズ変更や圧縮以外に、画像を最適化する方法はあるか?

画像のファイル形式は、ファイルのサイズに影響します。Web用のほとんどの画像は、PNGやGIFではなくJPEG形式である必要があります。これは、(ファイルサイズに影響する)品質を調整するのにJPEGファイルが最も簡単だからです。JPEGファイルは非可逆圧縮を使用するため、圧縮すると画像の細部の情報が失われます。その結果、圧縮によってJPEGファイルを元のサイズの何分の1かに縮小できる場合があります。通常、これはGIFファイルとPNGファイルでは不可能です(どちらも可逆圧縮を使用します)。

CDNはどのように画像の読み込みを高速化するか?

CDN(コンテンツ配信ネットワーク)は、画像などのコンテンツを保存してエンドユーザーに配信する、世界中に分散配置されたサーバー群です。CDNサーバーは、高速配信のために最適化されていて、配信元サーバー よりもエンドユーザーに近い場所に配置されているため、レイテンシーが低減され、インターネット経由で配信される画像、動画、そのほかのコンテンツの読み込み時間を短縮します。Cloudflare CDNの詳細については、こちらをご覧ください。

画像のSEO最適化とは何か?

画像の検索エンジン最適化と画像の最適化は別個のものですが、関連しています。画像ファイルのサイズを小さくすると、読み込み時間が短縮され、画像の検索エンジン最適化に役立ちます。Googleは、可能であれば画像を圧縮するよう開発者に推奨しています。

ただし、検索エンジン用の画像を正しく最適化するために、開発者は次のことを行う必要があります:

  1. 画像のファイル名を関連性のある読みやすいものにし、可能な場合は関連するキーワードを含める
  2. スクリーンリーダーを使用するサイト訪問者のために、1つまたは複数のキーワードが含まれる、画像の内容を簡潔でわかりやすく説明するaltタグを含める
  3. 画像をあらゆるサイズに対応するレスポンシブでモバイルフレンドリーなものにする
  4. ユーザー体験とエンゲージメントを高めるキャプション画像を使用する
  5. SNSでの共有のために、Open GraphとTwitter Cardsの画像を含める