SharePoint 新版頁面中的影像大小和縮放比例

新式頁面和網頁組件的設計旨在跨裝置完全回應，這表示網頁組件中使用的影像會根據顯示位置、使用的版面配置，以及檢視影像的裝置，以不同的方式縮放。 例如，新式頁面旨在在行動裝置上看起來很棒，而自動圖像縮放有助於創造這種有吸引力的體驗。

跨裝置頁面的範例

什麼影像大小最適合？

由於回應式頁面設計，沒有特定的高度或寬度（以像素為單位）可確保影像在裝置和版面配置之間都能保持特定的形狀。 影像會自動調整大小並裁剪，以便在各種裝置和版面配置上顯示最佳效果。 但是，有一些指南可以幫助您確保您的圖像在頁面上看起來很棒。

要找到最適合您頁面的影像大小，取決於下列因素：

  • 外觀比例：影像高度與寬度之間的關係
  • 欄版面配置：頁面上的欄類型和欄數
  • 網頁組件版面配置：您針對使用影像的網頁組件所選擇的版面配置

外觀比例

外觀比例是影像的寬度和高度之間的關係。 通常以兩個數字表示，例如 3：2、4：3 或 16：9。 寬度一律是第一個數字。 例如，16：9 的比例可能是寬度 1600 像素 x 高度 900 像素。 或者，它可以是 1920 x 1080、1280 x 720 或任何其他可以計算為等於 16：9 的寬度/高度組合。 您可以在線和一些照片編輯工具中找到縱橫比計算器，以幫助您確定圖像的縱橫比。 

外觀比例為 16：9 和 4：3 的範例。

根據版面配置，現代化網頁組件中的影像在外觀比例為 16：9 或 4：3 時，在版面配置和裝置上效果最佳。

欄版面配置

頁面可以配置包含不同欄類型和版面配置的區段，例如全形欄、一欄、兩欄、三欄、三分之一左欄和三分之一右欄。 對於預期填滿欄寬度的影像，一般規則是它們至少與放置它們所在的欄一樣寬。 例如，一欄中影像網頁組件中的影像寬度至少應為 1204 像素。

以下是每個欄版面配置的寬度指導方針：

版面配置 以像素為單位的寬度
全形資料行 1920
一欄 1204
兩欄 每欄 586
三欄 每欄 380
左欄三分之一 380 為左欄;792 代表右欄
右欄三分之一 792 代表左欄;380 代表右欄

由於頁面具有回應式特性，全形欄中的影像一律會以螢幕的全寬顯示，並根據螢幕大小自動提供高度。

放置在其他欄版面配置中的影像高度將取決於您的長寬比。 以下是 16：9 和 4：3 外觀比例的高度/寬度指導方針， (向上/向下四捨五入到最接近的像素) 。 這有助於讓影像保持在適合行動裝置縮放的寬度和高度，例如：

外觀比例
版面配置		 16 x 9
寬度 x 高度，單位像素		 4 x 3
寬度 x 高度，單位像素
一欄 1204 x 677 1204 x 903
兩欄 586 x 330 586 x 439
三欄 380 x 214 380 x 285
左欄三分之一 左欄為 380 x 446;右欄為 792 x 446 左欄為 380 x 594;右欄為 792 x 594
右欄三分之一 左欄為 792 x 446;右欄為 380 x 446 左欄為 792 x 594;右欄為 380 x 594

網頁組件版面配置

您所用網頁組件中的版面配置也會影響影像的縮放比例。 下列範例顯示不同的網頁組件，以及您可以使用的一些選項和外觀比例。

網頁組件 外觀比例
主圖網頁組件 [並排] 和 [圖層] 版面配置的外觀比例如下：

  • 磚：網頁組件的高度會縮放為遵循 8：3 的外觀比例，而網頁組件內的影像會縮放為 4：3 的外觀比例。
  • 圖層：個別圖層縮放至 8：3 的長寬比，而每個圖層內的圖像縮放為接近 16：9 的長寬比。
  • 在行動裝置上，會以 16：9 的比例使用輪播版面配置。
以下是頂端) (的圖層版面配置和底部) (圖層版面配置影像範例：

圖層和並排版面配置中的主圖網頁組件影像範例
醒目提示的內容 Web 部件 16：9 是輪播、影片顯示窗格和格線版面配置的外觀比例。
以下是外觀比例為 16：9 的範例。 第一個影像顯示影片顯示窗格版面配置，第二個影像顯示格線版面配置：
使用影片膠捲版面配置的醒目提示內容網頁組件。
醒目提示的內容格線版面配置，顯示展開的相片。
圖像網頁組件 影像會展開為包含網頁組件的區段寬度。
以下是使用 16：9 外觀比例之影像網頁組件中的影像範例。
使用 16：9 比例的 [影像] 網頁組件中的影像。
您也可以選擇使用影像編輯工具變更長寬比或徒手裁剪，或使用調整大小控點來放大或縮小影像。
在 SharePoint 編輯工具中開啟的相片。
圖像藝廊網頁組件 下列外觀比例可用於不同的版面配置：

  • [磚] 和 [浮動切換] 版面配置會遵循所有影像的外觀比例： 16：9、1：1、4：3 等等。
  • 格線版面配置允許三種外觀比例：1：1 正方形、16：9 寬和 4：3 標準。
第一個影像顯示 [影像庫] 網頁組件中的磚版面配置， (保持 16：9 和 1：1 的外觀比例) 。 第二個影像顯示使用 1：1 外觀比例) 的格線配置 (。

使用磚版面配置選項的圖像藝廊 Web 組件。

使用格線版面配置選項的圖像庫 Web 組件。
新聞網頁組件 根據版面配置，新聞網頁組件中的影像可以是 4：3、16：9 或 21：9。
以下是頭條新聞和輪播版面配置中的影像範例：
新聞版面配置影像範例
頁面標題區域 影像在橫向或外觀比例為 16：9 以上，且大小至少為 1 MB 時，效果最佳。 此外，請務必設定焦點，以保持圖片中最重要的部分，尤其是當圖片用於縮圖、新聞版面配置和搜尋結果時。
原始影像 (16：9) ，焦點設定在喇叭上：
頁面標題區域中 16：9 影像的範例。
頁面縮圖 頁面縮圖會顯示在搜尋結果、醒目提示的內容結果、新聞文章等位置。 根據預設，縮圖來自頁面標題區域，或來自頁面 (上第一個順序的網頁組件，例如頁面配置) 的左上角。 您可以覆寫預設值並變更頁面縮圖。 這樣做時，最好使用外觀比例為 16：9 的影像。
原始影像 16：9) (範例：
醒目提示內容網頁組件中的頁面縮圖影像範例
快速連結 Web 部件 [快速連結] 網頁組件有六種不同的版面配置。 以下是預設的外觀比例：

  • 壓縮、清單、並排：1：1、4：3
  • 底片膠捲、格線、按鈕：16：9
第一個影像顯示 [快速連結] 網頁組件中的 [壓縮] 版面配置。 第二個影像顯示使用影片顯示版面配置的相同快速連結 Web 組件。

顯示連結縮圖影像的 [快速連結] 網頁組件。

顯示影像 16：9 比例的 [快速連結] 網頁組件。

秘訣

當您將影像新增至頁面標題區域或主圖網頁組件時，建議您將焦點設定在您想要一律顯示的影像區域。 若要深入了解如何設定這兩個案例的焦點，請參閱 使用主圖網頁組件 和 在 SharePoint 網站上建立和使用新式頁面。 焦點

網站標頭影像建議

除了頁面之外，您可能還想要在延伸版面配置中新增自訂標誌或影像。 以下是這些元素的大小建議。

元素 描述 建議
寬度 x 高度，單位像素
網站標誌 較大的徽標可以是非方形和透明的，具體取決於上傳的設計。 192 x 64
格式：PNG、JPEG、SVG (群組連線的網站上不允許使用 SVG)
網站標誌縮圖 如果未上傳網站標誌，或是在需要方形格式的地方，會使用的方形標誌縮圖。
此元素為必要。		 64 x 64
格式：PNG、JPEG、SVG (群組連線的網站上不允許使用 SVG)
延伸版面配置網站標誌 延伸的頁首版面配置具有延伸的網站標誌寬度。 300 x 64
格式：JPEG、PNG、SVG
延伸版面配置背景影像 可與延伸標頭搭配使用的新背景影像。 2560 x 164
格式：JPEG、PNG