SharePoint Online 的圖像最佳化

附註:  我們想要以您的語言,用最快的速度為您提供最新的說明內容。 本頁面是經由自動翻譯而成,因此文中可能有文法錯誤或不準確之處。讓這些內容對您有所幫助是我們的目的。希望您能在本頁底部告訴我們這項資訊是否有幫助。 此為 英文文章 出處,以供參考。

在網頁載入速度取決於合併呈現包括圖像、 HTML、 JavaScript] 及 CSS 頁面所需的所有元素的大小。圖像的絕佳方式,讓您的網站更吸引人,但其大小會影響效能。藉由最佳化了壓縮和調整大小,以及使用 sprite 圖像,您可以位移極大圖像的效果。使用 SharePoint 圖像轉譯,您可以在簡報中上傳一個大型影像,並顯示允許將可重複使用,而非重新載入圖像的區段。

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

圖像 sprite 包含許多較小的圖像。使用 CSS 選取要顯示 [絕對位置] 頁面的特定部分的複合影像的一部分。基本上,您移動一張圖像,載入多個影像,而不是在頁面,並顯示圖像的一小部分所需的組件 sprite 圖像的位置會顯示一個小型視窗透過使用者。SharePoint Online使用 sprite sprite 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 的 blob 快取建立版本的每個轉譯的圖像的頁面。這種方式伺服器負載會降低,因為圖像只有一次的調整大小,並就準備好要做為使用者多次。如需有關如何裁剪圖像轉譯的詳細資訊,請參閱裁剪圖像轉譯

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

這項資訊有幫助嗎?

感謝您的意見反應!

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

×