共用方式為

SharePoint 傳統發佈網站的影像優化

  • 發行項

網頁的載入速度取決於轉譯頁面所需的所有元件組合大小，包括影像、HTML、JavaScript 和 CSS。 影像是讓網站更具吸引力的絕佳方式，但其大小可能會影響效能。 藉由使用壓縮和重設大小來優化影像，並使用 Sprites，您可以位移大型影像的效果。 使用 SharePoint 影像轉譯，您可以上傳單一大型影像，並顯示影像的區段，讓映射可以重複使用而非重載。

注意事項

本主題適用於 SharePoint 傳統發佈網站，而非新式入口網站。 如需 SharePoint 新式入口網站中影像優化的相關信息，請參閱 優化 SharePoint 新式入口網站中的映像頁面。

使用精靈加速影像載入

spcommon 的螢幕快照。

影像原件包含許多較小的影像。 使用 CSS，您可以選取複合影像的一部分，以在具有絕對位置的頁面特定部分上顯示。 基本上，您會在頁面周圍移動單一影像，而不是載入多個影像，並透過向用戶顯示原件影像所需部分的小型視窗顯示該影像的一小部分。 SharePoint 會使用 sprites 在 sprite spcommon.png 檔案中顯示其各種圖示。

此處涵蓋的內容：

  • 影像壓縮
  • 影像優化
  • SharePoint 影像轉譯

這可以提高效能，因為您只下載一個映像，而不是數個映像，然後快取並重複使用該映像。 即使影像不會保持快取狀態，透過擁有單一影像而非多個映像，此方法也會減少對伺服器的 HTTP 要求總數，以減少頁面載入時間。 這其實是影像統合的形式。 如果影像不常變更，例如圖示，這是很實用的技術，如上面提供的SharePoint範例所示。 您可以瞭解如何使用 Web Essentials，這是第三方、開放原始碼、以社群為基礎的專案，可在 Microsoft Visual Studio 中輕鬆達成此目的。 如需詳細資訊，請參閱 SharePoint 中的縮製和統合。

使用影像壓縮和優化來加速頁面載入

影像壓縮和優化是關於減少您在網站上使用的映像檔案大小。 通常，減少影像大小的最佳技巧是將影像大小調整為站臺上檢視的最大維度。 影像的大小不會超過任何檢視範圍。 使用影像編輯器確保影像具有正確的維度，是減少頁面大小的快速且簡單的方式。

一旦影像大小正確，下一個步驟是優化這些影像的壓縮。 有各種工具可用來進行壓縮和優化，包括相片藝廊和第三方工具。 壓縮的關鍵在於盡可能減少檔案大小，而不會遺失使用者的任何可辨識品質。 請確定您在高定義顯示器上測試壓縮檔案，以確保它們看起來仍然不錯。

使用 SharePoint 影像轉譯加速頁面下載

影像轉譯是 SharePoint 中的一項功能，可讓您根據預先定義的影像維度來提供不同版本的映像。 當用戶產生的影像內容或像像維度，例如寬度和高度是由網站上的 CSS 固定時，這特別重要。 即使 CSS 已修正映射，仍會載入完整解析度映像。 在此情況下，可以使用影像轉譯來減少檔案大小。

注意事項

只有在啟用發佈時，才會提供 SharePoint 的轉譯。 您可以在 [設定 > 網站設定 > ] [管理網站功能 > SharePoint Server 發佈] 下啟用發佈。 否則不會顯示選項。

影像轉譯重設大小的運作方式是採用您定義的最小維度、寬度或高度，然後調整影像的大小，讓另一個維度根據鎖定的外觀比例自動重設大小。 根據預設，它會依其餘維度從中心裁剪影像。 例如，如果您定義 100px 寬和 50px 高的轉譯，而原始影像是 1000px 寬和 800px 高，則會重設大小，讓 800px 維度現在是 50px，而 1000px 維度 (現在會從影像的中心裁剪 62.5px) 。

這些步驟相當簡單，但若要讓影像使用轉譯，您必須先在SharePoint網站上轉譯，才能新增影像。 此外，您也必須開啟 SharePoint Server 發行基礎結構 (網站集合層級) 和 SharePoint Server 發行 (網站層級) 功能。

新增影像轉譯以加速頁面載入

  1. 確認執行此程式的用戶帳戶至少具有網站集合最上層網站的設計許可權，而且網站正在發佈至網頁。

  2. 在網頁瀏覽器中，移至發佈網站集合的最上層網站。

  3. 選擇 [設定] 圖示。

  4. 在 [ 網站設定] 頁面的 [ 外觀與風格 ] 區段中，您會看到內建影像轉譯。

    您可以使用現成的轉譯，或選擇 [ 影像轉譯 ] 來建立新的轉譯。

    影像轉譯的螢幕快照。

  5. 在 [ 影像轉譯] 頁面上，選擇 [ 新增專案]。

    [新增專案] 的螢幕快照。

  6. 在 [ 新增影像轉譯 ] 頁面的 [ 名稱 ] 方塊中，輸入轉譯的名稱。

  7. 在 [ 寬度 ] 和 [ 高度] 文本框中，輸入轉譯的寬度和高度，以像素為單位，然後選擇 [ 儲存]。

    影像轉譯名稱的螢幕快照。

使用影像轉譯自定義裁剪

根據預設，影像轉譯會從影像的中心產生。 您可以裁剪要使用的影像部分，以調整個別影像的影像轉譯。 您可以根據每個轉譯個別裁剪影像。 裁剪影像會使用 SharePoint 的 Blob 快取來建立每個轉譯的映像版本，以加速頁面載入。 如此一來，伺服器負載就會降低，因為映像只會重設大小一次，然後準備好多次提供給使用者。 如需如何裁剪影像轉譯的詳細資訊，請參閱 裁剪影像轉譯。