SharePoint Online の画像を最適化する

Web ページの読み込み速度は、画像、HTML、JavaScript、CSS を含むページをレンダリングするのに必要なすべてのコンポーネントの合計サイズによって変わります。画像はサイトを魅力的に見せる素晴らしい手段ですが、そのサイズがパフォーマンスに影響を与えることがあります。画像の圧縮やサイズ変更を最適化して、スプライトを使用すると、非常に大きな画像でもその影響を緩和することができます。SharePoint のイメージ表示を使用して、1 つの大きな画像をアップロードすると、再読み込みするのではなく再利用できるように、画像セクションを表示できます。

スプライトを使って、SharePoint Online での画像の読み込み速度を向上させる

スプライト画像とは、多数の小さい画像をひとつにまとめた画像です。CSS を使って、絶対位置で複合画像の一部を指定し、ページの特定部分を表示します。基本的には、複数の画像を読み込むのではなく、ページ全体で単一の画像を移動して、その画像の小さい部分を小さいウィンドウを通して表示します。これにより、スプライト画像の必要な部分がエンド ユーザーに表示されます。SharePoint Online では、スプライトを使用して、さまざまなアイコンを spcommon.png というスプライトで表示しています。

ここでカバーする内容

  • 画像の圧縮

  • 画像の最適化

  • SharePoint イメージ表示

spcommon のスクリーンショット

この方法では、複数の画像をダウンロードするのではなく 1 つの画像だけをダウンロードし、その画像をキャッシュして再利用するため、パフォーマンスを高めることができます。画像がキャッシュに残っていない場合でも、複数の画像ではなく 1 つの画像を保持することで、この方法でサーバーへの HTTP 要求の合計数が少なくなり、ページの読み込み時間が短くなります。この方法は、画像バンドルの 1 つの形式です。上記の SharePoint の例のように、アイコンなどの頻繁に変更されない画像の場合は非常に有効な技術です。Microsoft Visual Studio で Web Essentials、サードパーティ、オープンソース、コミュニティベースのプロジェクトを使って、これを簡単に実現できます。詳細については、「SharePoint Online の縮小およびバンドル」を参照してください。

画像の圧縮と最適化を使って、SharePoint でのページの読み込み速度を向上させる

画像の圧縮と最適化は、サイトに使用する画像のサイズを小さくすることを目的としています。 画像のサイズを小さくする場合に最もよく使われる技術は、画像のサイズをサイトで表示できる最大サイズに変更する方法です。 表示できるサイズよりも大きい画像があっても意味がありません。 画像エディターを使って正確なサイズを確認すると、簡単にページのサイズを小さくできます。

画像を適切なサイズに変更した後は、画像の圧縮を最適化します。[フォト ギャラリー] やサードパーティのツールなど、圧縮や最適化に使用できるさまざまなツールがあります。圧縮する場合の重要なポイントは、ファイル サイズを可能な限り小さくしつつ、一方でエンド ユーザーが感じる画質を損なわないようにすることです。高解像度のディスプレイで圧縮したファイルのテストを行い、画質に問題がないことを確認してください。

SharePoint のイメージ表示を使用して、ページのダウンロード速度を向上させる

イメージ表示は SharePoint Online の機能です。この機能では、事前定義された画像のサイズに基づいて、異なるバージョンの画像を表示できます。これは、ユーザーが作成した画像コンテンツがある場合や、幅と高さなどの画像サイズがサイトの CSS で固定されている場合などに特に重要になります。画像が CSS で固定されている場合でも、画像はフル解像度で読み込まれます。この場合、ファイル サイズは、イメージ表示を使用して削減できます。

注: イメージ表示は、発行が有効のときに SharePoint で利用できます。発行を有効にするには、[設定] > [サイトの設定] > [サイト機能の管理] > [SharePoint Server 発行機能] の順に選びます。それ以外の方法では、このオプションは表示されません。

イメージ表示によるサイズ変更では、定義された最小サイズ (幅または高さ) を取得してから、画像のサイズ変更を行います。これにより、ほかのサイズについては、固定の縦横比をもとに自動的に変更できます。 既定では、残りのサイズに従って画像を中央からトリミングします。 たとえば、幅 100px、高さ 50px に表示サイズを定義し、元の画像が幅 1000px、高さ 800px の場合、サイズ変更では、800px が 50px になり、1000px (現在は 62.5px) が画像の中心からトリミングされます。

画像を除けば、イメージ表示を使用する手順は比較的シンプルですが、画像を追加する前にイメージ表示が SharePoint サイトで有効である必要があります。 さらに、SharePoint Server 発行インフラストラクチャ (サイト コレクション レベル) 機能と SharePoint Server 発行 (サイト レベル) 機能も有効にする必要があります。

イメージ表示を追加して、ページの読み込み速度を向上させる

  1. この手順を行っているユーザー アカウントに、少なくともサイト コレクションのトップレベル サイトに対するデザイン権限があり、サイトが Web ページに発行されていることを確認してください。

  2. Web ブラウザーで、発行サイト コレクションのトップレベル サイトに移動します。

  3. [設定] アイコンをクリックします。

  4. [サイトの設定] ページの [外観] セクションに標準のイメージ表示が表示されます。

    そのまま使用できるイメージ表示を使うか、または [イメージ表示] を選んで新しい表示を作成します。

    イメージ表示のスクリーンショット
  5. [イメージ表示] ページで、[新しいアイテムの追加] を選びます。

    [新しいアイテムの追加] のスクリーンショット
  6. [新しいイメージ表示] ページの [名前] ボックスで、イメージ表示の名前を入力します。

  7. [] と [高さ] に、幅と高さをピクセル単位で入力して、[保存] をクリックします。

    イメージ表示名のスクリーンショット

ユーザー設定で、SharePoint のイメージ表示をトリミングする

既定では、イメージ表示は画像の中央から生成されます。 個々の画像のイメージ表示は、使用する画像をトリミングすることで調整できます。 イメージ表示ごとの個別の基準により、画像をトリミングできます。 画像をトリミングすると、SharePoint ブログのキャッシュを使ってイメージ表示ごとに画像のバージョンが作成され、ページの読み込み速度が向上します。 この方法では、画像のサイズ変更は 1 回のみで、その後、何回でもユーザーに表示できるため、サーバーの負荷が軽減されます。 イメージ表示をトリミングする方法については、「イメージ表示をトリミングする」を参照してください。

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×