SharePoint Online 的圖像最佳化

網頁的載入速度取決於呈現網頁所需之所有元件 (包括圖像、HTML、JavaScript 和 CSS) 的組成大小。圖像是讓網站更加美觀的絕佳方式,但其大小會影響效能。您可藉由壓縮、調整大小以及使用精靈技術來最佳化圖像,藉此抵銷超大型圖像帶來的影響。您可以使用 SharePoint 圖像轉譯來上傳單一大型圖像,以及顯示圖像的各個部分,以便重複使用圖像,而不是重新載入圖像。

使用精靈技術加速在 SharePoint Online 中載入圖像

一個圖像精靈包含許多較小的圖像。您使用 CSS 選取複合圖像的一部分,以絕對位置顯示網頁的特定部分。基本上,您是在網頁中移動單一圖像而不是載入多個圖像,並讓該圖像的一小部分透過小視窗顯示,且在小視窗中將精靈圖像所需部分顯示給使用者。SharePoint Online 使用精靈技術在精靈 spcommon.png 中顯示各種圖示。

本文涵蓋的主題

  • 圖像壓縮

  • 圖像最佳化

  • SharePoint 圖像轉譯

spcommon 螢幕擷取畫面

由於您只下載單一圖像而不是數個圖像,然後再快取並重複使用該圖像,如此一來便可提升效能。即使圖像不維持快取,但藉由單一圖像而不是用多個圖像的這種方式,可降低 HTTP 向伺服器發出的請求總數,進而減少網頁載入次數。這實際上是一種「圖像統合」的形式。如果圖像不會經常變動 (例如圖示,如以上提供的 SharePoint 範例所示),這是一種相當有用的技術。您可以了解如何使用 Web Essentials (一種協力廠商、開放原始碼、以社群為基礎的專案),在 Microsoft Visual Studio 中輕鬆實現此技術。如需詳細資訊,請參閱 SharePoint Online 中的縮製和統合

使用圖像壓縮和最佳化加速在 SharePoint 中的網頁載入

圖像壓縮和最佳化功能可縮減您在網站上使用之圖像的檔案大小。縮減圖像大小的最佳技巧,通常是將圖像大小調整為可在網站上檢視的最大維度。讓圖像大於檢視的大小毫無意義。若要用快速簡易的方法縮減網頁大小,您可使用圖像編輯器確定圖像是正確的維度。

確定圖像的大小正確後,下一步就是將這些圖像的壓縮最佳化。用於壓縮和最佳化的工具有許多種,包括圖像中心和協力廠商工具。壓縮的關鍵在於盡量縮減檔案大小,但不犧牲使用者可察覺的檔案品質。請務必在高畫質顯示器上測試已壓縮的檔案,以確保這些檔案的顯示效果令人滿意。

使用 SharePoint 圖像轉譯以加速網頁下載

SharePoint Online 中的圖像轉譯功能,可讓您根據預先定義的圖像維度提供不同版本的圖像。當網站上有使用者產生的圖像內容,或是有透過 CSS 固定寬度和高度的圖像維度,這種方法就特別重要。即使圖像已受 CSS 固定,仍會載入高解析度圖像。在這種情況下,使用圖像轉譯可縮減檔案大小。

附註: 您必須啟用發佈功能,SharePoint 才會提供轉譯選項。您可以在 [設定] > [網站設定] > [管理網站功能] > [SharePoint Server 發佈] 底下啟用發佈功能。如果您未啟用發佈功能,系統就不會顯示轉譯選項。

圖像轉譯調整大小的運作方式是,採用您定義的最小維度 (無論是寬度或高度),然後調整圖像大小,以根據鎖定的長寬比自動重新調整其他維度。根據預設,系統會以保持維度的方式從中央裁剪圖像。例如,如果您定義 100 像素寬和 50 像素高的轉譯,而原始圖像為 1000 像素寬和 800 像素高,則系統會調整圖像大小,將 800 像素維度現在調整為 50 像素,而 1000 像素維度 (現為 62.5 像素) 則是從圖像中央進行裁剪。

步驟相當簡單,但對於要使用轉譯的圖像,SharePoint 網站上必須先轉譯,您才能新增圖像。此外,您也需要開啟 SharePoint Server 發佈基礎結構 (網站集合層級) 和 SharePoint Server 發佈 (網站層級) 功能。

新增圖像轉譯以加速網頁載入

  1. 請確認正在執行本程序的使用者帳戶,至少擁有網站集合之頂層網站的 [設計] 權限,而且網站正在發佈成網頁。

  2. 在網頁瀏覽器中,移至發佈網站集合的頂層網站。

  3. 選擇 [設定] 圖示。

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

    您可以使用立即可用的轉譯,或選擇 [圖像轉譯] 建立新的轉譯。

    圖像轉譯的螢幕擷取畫面
  5. 在 [圖像轉譯] 頁面中,選擇 [新增項目]。

    [新增項目] 的螢幕擷取畫面
  6. 在 [新圖像轉譯] 頁面中的 [名稱] 方塊,輸入轉譯的名稱。

  7. 在 [寬度] 和 [高度] 文字方塊中,輸入轉譯的寬度和高度 (以像素為單位),然後選擇 [儲存]。

    圖像轉譯名稱的螢幕擷取畫面

使用 SharePoint 的圖像轉譯自訂裁剪

根據預設,圖像轉譯是從圖像的中央產生。您可以裁剪您要使用的圖像部分,針對個別圖像調整圖像轉譯。您可以按照個別情況及每個轉譯來裁剪圖像。使用 SharePoint 的部落格快取來裁剪圖像可加速網頁載入,為每個轉譯建立圖像版本。因為圖像只會調整大小一次,即可多次提供給使用者,因此這種方式可降低伺服器負載。如需如何裁剪圖像轉譯的詳細資訊,請參閱裁剪圖像轉譯

擴展您的技能
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與其中一位 Office 支援專員連絡以深入了解您的意見。

×