SharePoint クラシック発行サイトの画像の最適化

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

注:

このトピックは、最新のポータル サイトではなく、SharePoint クラシック発行サイトに適用されます。 SharePoint モダン ポータル サイトでのイメージの最適化の詳細については、「 SharePoint モダン ポータル ページでのイメージの最適化」を参照してください。

スプライトを使用して画像の読み込みを高速化する

イメージ スプライトには、多数の小さなイメージが含まれています。 CSS を使用して、合成画像の一部を選択し、絶対配置を使用してページの特定の部分に表示します。 基本的には、複数の画像を読み込む代わりにページの周りを 1 つの画像を移動し、その画像の小さな部分を小さなウィンドウから見えるようにします。ここで、スプライト イメージの必要な部分がエンド ユーザーに表示されます。 SharePoint では、スプライトを使用して、スプライト spcommon.png ファイルにさまざまなアイコンを表示します。

ここで取り上げた内容:

• イメージ圧縮
• 画像の最適化
• SharePoint イメージの表示

複数のイメージではなく 1 つのイメージのみをダウンロードし、そのイメージをキャッシュして再利用するため、パフォーマンスが向上する可能性があります。 イメージがキャッシュされたままでなくても、複数のイメージではなく 1 つのイメージを持つことで、サーバーへの HTTP 要求の合計数が減り、ページの読み込み時間が短縮されます。 これは本当にイメージバンドルの一種です。 これは、上記の SharePoint の例に示すように、アイコンなど、画像が頻繁に変更されない場合に便利な手法です。 Microsoft Visual Studio でこれを簡単に実現するために、サードパーティのオープン ソースのコミュニティ ベースのプロジェクトである Web Essentialsを使用する方法を確認できます。 詳細については、「 SharePoint での縮小とバンドル」を参照してください。

画像の圧縮と最適化を使用してページの読み込みを高速化する

画像の圧縮と最適化は、サイトで使用するイメージのファイル サイズを縮小することです。 多くの場合、画像のサイズを小さくする最善の手法は、サイトで表示される最大サイズに画像のサイズを変更することです。 表示される画像よりも大きい画像を持つことに意味はありません。 イメージ エディターを使用して画像が正しいサイズであることを確認することは、ページのサイズを小さくするための迅速かつ簡単な方法です。

イメージが適切なサイズになったら、次の手順として、これらのイメージの圧縮を最適化します。 フォト ギャラリーやサード パーティ製ツールなど、圧縮と最適化に使用できるさまざまなツールがあります。 圧縮の鍵は、エンド ユーザーの識別可能な品質を失うことなく、ファイル サイズをできるだけ小さくすることです。 圧縮ファイルを高解像度ディスプレイでテストして、見た目が良いかどうかを確認してください。

SharePoint イメージ表示を使用してページのダウンロードを高速化する

イメージ表示は SharePoint の機能であり、事前に定義された画像ディメンションに基づいてさまざまなバージョンのイメージを提供できます。 これは、ユーザーが生成した画像コンテンツがある場合や、幅や高さなどの画像サイズがサイト上の CSS によって固定されている場合に特に重要です。 CSS によってイメージが固定されている場合でも、完全な解像度のイメージは読み込まれます。 この場合、イメージ表示を使用してファイル サイズを小さくできます。

注:

表示は、発行が有効になっている場合にのみ SharePoint で使用できます。 [設定] [サイトの設定] > [サイト機能>の管理] > SharePoint Server の発行で発行を有効にすることができます。 それ以外の場合、オプションは表示されません。

イメージ表示のサイズ変更は、定義した最小のサイズ (幅または高さ) を取得し、ロックされた縦横比に基づいて他のディメンションのサイズが自動的に変更されるようにイメージのサイズを変更することで機能します。 既定では、画像は中央から残りの寸法でトリミングされます。 たとえば、幅 100 ピクセル、高さ 50px のレンディションを定義し、元のイメージの幅が 1000px、高さが 800px の場合、800px ディメンションが 50 ピクセルになり、1000px ディメンション (現在は 62.5px) がイメージの中央からトリミングされるようにサイズ変更されます。

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

ページ読み込みを高速化するためのイメージ表示を追加する

1. この手順を実行しているユーザー アカウントに、少なくともサイト コレクションの最上位サイトに対するデザインアクセス許可があり、サイトが Web ページに公開されていることを確認します。

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

3. [ 設定] アイコンを選択します。

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

   すぐに使えるレンディションを使用するか、[ Image Renditions ]\(イメージ表示\) を選択して新しいレンディションを作成できます。

   

5. [イメージ表示] ページで [新しいアイテムの追加] を選択します。

   

6. [ 新しいイメージ表示] ページの [ 名前] ボックスに、表示の名前を入力します。

7. [ 幅] ボックスおよび [ 高さ] ボックスに、ピクセル単位で表示の幅と高さを入力して、[ 保存] を選択します。

   

イメージ表示を使用したカスタムトリミング

既定では、イメージ表示はイメージの中央から生成されます。 イメージの使用する部分をトリミングすることにより、個別のイメージのイメージ表示を調整できます。 画像は、表示ごとに個別にトリミングできます。 イメージをトリミングすると、SharePoint の BLOB キャッシュを使用して各レンディションのイメージのバージョンを作成することで、ページの読み込みが高速化されます。 これにより、イメージのサイズが 1 回だけ変更され、エンド ユーザーに複数回サービスを提供する準備が整うため、サーバーの負荷が軽減されます。 イメージの表示をトリミングする方法の詳細については、「イメージの表示 をトリミングする」を参照してください。