現代頁面與網頁部分設計為跨裝置完全響應式，意即網頁部分中使用的圖片會根據展示位置、所使用的版面配置及觀看裝置的不同縮放。 例如，現代頁面設計得適合行動裝置，自動縮放有助於營造吸引人的體驗。
什麼樣的圖片尺寸最適合？
由於響應式頁面設計，沒有特定的像素高度或寬度能確保圖片在不同裝置和版面上都能維持特定形狀。 影像會自動調整大小並裁切，以呈現各種裝置與版面中最佳的效果。 不過，有一些指引可以幫助你確保你的圖片在頁面上看起來很棒。
找到最適合你頁面的圖片尺寸取決於以下幾個因素：
- 長寬比：影像高度與寬度的關係
- 欄位配置：您頁面上的欄位類型與數量
- 網頁零件版面：您為圖片所使用的網頁部分所選擇的版面配置
外觀比例
長寬比是影像寬高之間的關係。 它通常以兩個數字表示，例如 3：2、4：3 或 16：9。 寬度永遠是第一個數字。 舉例來說，16：9 的比例可以是寬 1600 像素、高 900 像素。 或者，可能是1920 x 1080、1280 x 720，或其他可以計算出等於16：9的寬高組合。 你可以在網路上找到長寬比計算器，也有一些照片編輯工具，幫助你判斷影像的長寬比。
在大多數情況下，現代網頁零件中的圖片在不同配置與裝置間，當長寬比為 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 |
網頁零件版面
你使用的網頁部分中的版面配置也會影響圖片的縮放方式。 以下範例展示了不同的網狀部分，以及你可以使用的選項和長寬比。
| 英雄蜘蛛網部分 | 以下圖塊與圖層佈局的長寬比如下：
|
| 重點內容網頁部分 | 16：9 是旋轉木馬、幻燈片條和格狀佈局的長寬比。 這裡有一個 16：9 長寬比的例子。 第一張圖片顯示 Filmstrip 的佈局，第二張則是格狀的佈局： 
|
| 圖片網頁部分 | 圖片會展開至包含該網頁部分的區塊寬度。 這裡有一張圖片範例，顯示 Image 網頁部分使用 16：9 的長寬比。 
你也可以選擇用影像編輯工具調整長寬比或自由裁切，或使用調整大小的柄來調整圖片大小。 
|
| 圖片集網站部分 | 以下的長寬比可用於不同的版面配置：
|
| 新聞網路部分 | 根據版面配置，新聞網頁部分的圖片可為4：3、16：9或21：9。 以下是頂層故事與旋轉木馬佈局中的圖片範例： 
|
| 頁面標題區 | 圖片在橫向或 16：9 或以上的畫面比例，且大小至少 1 MB 時看起來最好。 此外，務必設定焦點，以保持照片中最重要的部分，尤其是在縮圖、新聞版面和搜尋結果中使用時。 原始圖片 16：9) (，焦點設定在喇叭上： 
|
| 頁面縮圖 | 頁面縮圖會顯示在搜尋結果、重點內容、新聞貼文等地方。 預設情況下，縮圖會來自頁面標題區，或是頁面 (上第一順序的網頁部分，例如頁面版面) 的左上角。 你可以覆寫預設設定並更改頁面縮圖。 這樣做時，最好使用16：9的畫面比例。 原始圖片 16：9 () ： 
|
| 快速連結網頁部分 | 快速連結網頁部分有六種不同的版面配置。 以下是預設的長寬比：
|
秘訣
當你將圖片加入頁面標題區或 Hero 網頁部分時，最好將焦點設定在你想一直顯示的圖片區域。 想了解更多如何為這兩種情境設定焦點，請參閱「 使用 Hero 網頁」 部分及 「在 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 |