SharePoint Online の画像を最適化する

注:  最新のヘルプ コンテンツをできるだけ早く、お客様がお使いの言語で提供したいと考えております。 このページは、自動翻訳によって翻訳されているため、文章校正のエラーや不正確な情報が含まれている可能性があります。私たちの目的は、このコンテンツがお客様の役に立つようにすることです。お客様にとって役立つ情報であったかどうかを、このページの下部でお知らせください。 簡単に参照できるように、こちらに 英語の記事 があります。

Web ページの読み込み速度は、画像、HTML、JavaScript および CSS を含むページを表示するために必要なすべてのコンポーネントの合計サイズによって異なります。画像より魅力的でサイトを作成する優れた方法ですが、そのサイズがパフォーマンスに影響します。圧縮してサイズを変更すると、スプライトを使用すると、目的の画像を最適化するには、非常に大きな画像の効果をオフセットことができます。SharePoint イメージ表示を使用すると、1 つの大きな画像をアップロードし、再読み込みするのではなく再利用することができるようにする、画像のセクションを表示できます。

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

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

ここではどのような説明は。

  • 画像の圧縮

  • 画像の最適化

  • SharePoint イメージ表示

spcommon のスクリーンショット

[キャッシュし、その画像を再利用するいくつかの代わりに 1 つだけの画像をダウンロードするために、パフォーマンスを向上させることができます。場合でも、画像は残りませんキャッシュ、複数の画像ではなく単一の画像をことにより、この方法は、ページの読み込み時間を短縮がサーバーに HTTP 要求の合計数を減らします。これは、画像のバンドルを表す。これは非常に便利な手法場合は、画像を変更しない非常に多くの場合は、たとえば、アイコンは、上にある SharePoint の例のようにします。Web Essentials、Microsoft Visual Studio で簡単に実行サード パーティ、オープン ソース、コミュニティ ベースのプロジェクトの使い方ができます。詳細については、縮小し 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 の blob キャッシュを使用して、速度、画像をトリミングします。イメージのサイズが 1 回のみとエンドユーザーに複数回を提供する準備が整いますいる、このようにサーバーの負荷が低下することがあります。トリミングのイメージを表示する方法の詳細については、イメージ表示をトリミングする」を参照してください。

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

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

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

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

×