新式頁面和網頁元件是專為跨裝置完全回應所設計，這表示網頁元件中使用的影像會依據顯示位置、使用哪個版面配置，以及用來查看影像的裝置而有不同的縮放比例。 例如，新式頁面的設計適合在行動裝置上美觀，而自動圖像縮放比例可協助建立具吸引力的體驗。
哪些影像大小最適合使用？
由於回應式頁面設計，沒有特定高度或寬度的圖元，可確保影像在裝置和版面配置之間維持特定圖形。 圖像會自動調整大小並裁剪，以顯示各種裝置和版面配置的最佳結果。 不過，有一些指導方針可協助確保您的影像在頁面上看起來不錯。
尋找頁面的最佳圖像大小取決於這些因素：
-
長寬比：圖像的高度和寬度之間的關係
-
欄版面配置：頁面上的欄類型和數目
-
網頁零件版面配置：您針對使用影像的網頁部分所選擇版面配置
長寬比
長寬比是影像的寬度和高度之間的關係。 通常以兩個數字表示，例如 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;左欄為 380;右欄為 792 |
|
右方欄的三分之一 |
左欄為 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 是顯示顯示畫面、影片帶和卡片版面配置長寬比。 以下範例顯示于下方畫面頂端和卡片 (圖像) 圖像 (圖像) 。
|
|
|
影像會展開為包含網頁部分的區段寬度。 您可以選擇使用圖像工具列變更長寬比或手邊裁剪，或使用調整大小控點來放大或縮小影像。 以下範例顯示圖像裁切線 (4：3) 藍色線條
|
|
|
下列長寬比用於不同的版面配置：
以下是顯示在最上方磚和磚 (磚) 磚 (圖)
|
|
|
新聞網頁部分 - |
根據版面配置，新聞網頁部分的影像可以是 4：3、16：9 或 21：9。 以下是上方故事中的影像範例和導圖版面配置。
|
|
當影像為橫向或長寬比為 16：9 或更大的大小，且大小至少為 1 MB 時，影像會獲得最佳效果。 此外，請務必將焦點設定為讓圖片最重要的部分保持在視野中，尤其是當圖片用於縮圖、新聞版面配置和搜尋結果時。 在喇 (焦點設定時，) 圖像 16：9 的範例。
|
|
|
頁面縮圖會顯示在搜尋結果、強調的內容結果、新聞文章等位置。 根據預設，縮圖會來自頁面標題區域，或位於頁面第一順序的網頁 (例如頁面版面配置頁面的左上方) 。 您可以覆蓋預設值並變更頁面縮圖。 當您這麼做時，最好使用長寬比為 16：9 的影像。 原始 (16：9 圖像範例)
|
|
|
快速連結網頁部分有六種不同的版面配置。 以下是建議的長寬比：
以下範例顯示壓縮版面配置中的圖像 (上方) 及底部圖像 (幻燈片)
|
提示:
-
當您新增影像至頁面標題區域或主要網頁元件時，最好也會在您想要永遠顯示的圖像區域中設定焦點。 若要深入瞭解如何設定這兩種案例的焦點，請參閱變更主要網頁部分 影像的焦點，以及自訂頁面中的標題區域。
-
網站標題圖像建議
除了頁面之外，您可能還想要在延伸版面配置中新增自訂標誌或影像。 以下是這些元素的大小建議。
|
元素 |
描述 |
建議 寬度 x 高度 ，以圖元為單位 |
|---|---|---|
|
網站標誌 |
根據上傳的設計，較大的標誌可非正方形且透明 |
192 x 64 格式：在群組連接的網站 (PNG、JPEG、SVG) |
|
網站標誌縮圖 |
未上傳任何網站標誌或需要方形格式之位置時所使用的方形標誌縮圖 此元素為必填專案。 |
64 x 64 格式：在群組連接的網站 (PNG、JPEG、SVG) |
|
延伸版面配置網站標誌 |
延伸頁眉版面配置具有延伸的網站標誌寬度。 |
300 x 64p 格式：JPEG、PNG、SVG |
|
延伸版面配置背景圖像 |
可與延伸頁眉一起使用的新背景影像。 |
2560 x 164 格式：JPEG、PNG |
