新式页面和 Web 部件设计为跨设备完全响应，这意味着 Web 部件中使用的图像将根据其显示位置、使用的布局以及正在查看它们的设备而有所不同。 例如，新式页面旨在在移动设备上看起来很棒，自动图像缩放有助于创造这种有吸引力的体验。
什么图像尺寸效果最好？
由于采用响应式页面设计，没有以像素为单位的特定高度或宽度来确保图像在设备和布局中保持特定形状。 图像会自动调整大小和裁剪，以便在各种设备和布局上显示最佳效果。 但是，有一些指南可以帮助您确保图像在页面上看起来很棒。
要找到最适合页面的图像尺寸取决于以下因素：
- 纵横比：图像高度和宽度之间的关系
- 列布局：页面上的类型和列数
- Web 部件布局：为在其中使用图像的 Web 部件选择的布局
纵横比
纵横比是图像宽度和高度之间的关系。 它通常表示为两个数字，例如 3：2、4：3 或 16：9。 宽度始终是第一个数字。 例如，16：9 的比率可以是宽 1600 像素，高 900 像素。 或者，它可以是 1920 x 1080、1280 x 720 或可计算为等于 16：9 的任何其他宽度/高度组合。 您可以在网上和一些照片编辑工具中找到纵横比计算器，以帮助您确定图像的纵横比。
在大多数情况下，当新式 Web 部件中的图像纵横比为 16：9 或 4：3（具体取决于布局）时，它们可最佳地跨布局和设备工作。
列布局
页面中可以布局包含包含不同列类型和布局的部分，例如全角列、一列、两列、三列、三分之一左列和三分之一右列。 对于预期填充列宽度的图像，一般规则是它们的宽度至少与放置它们的列一样宽。 例如，一列中图像 Web 部件中的图像应至少为 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（右列） |
Web 部件布局
使用的 Web 部件中的布局也会影响图像的缩放方式。 以下示例显示了不同的 Web 部件以及可以使用的一些选项和纵横比。
| Web 部件 | 纵横比 |
|---|---|
| 主图 Web 部件 | 平铺和层布局的以下纵横比为：
|
| 突出显示的内容 Web 部件 | 16：9 是轮播、胶片显示窗格和网格布局的纵横比。 下面是 16：9 纵横比的示例。 第一张图像显示了胶卷布局，第二张图像显示了网格布局： 
|
| 图像 Web 部件 | 图像将扩展到包含 Web 部件的部分的宽度。 下面是图像 Web 部件中使用 16：9 纵横比的图像示例。 
您还可以选择使用图像编辑工具更改纵横比或手动裁剪，或使用调整大小手柄放大或缩小图像。 
|
| 图像库 Web 部件 | 以下纵横比可用于不同的布局：
|
| 新闻 Web 部件 | 根据布局，新闻 Web 部件中的图像可以是 4：3、16：9 或 21：9。 下面是头条故事和轮播布局中的图像示例： 
|
| 页面标题区域 | 当图像为横向或纵横比为 16：9 或更高，并且大小至少为 1 MB 时，图像显示效果最佳。 此外，请务必设置一个焦点，以保持图片中最重要的部分在视野中，尤其是当图片用于缩略图、新闻布局和搜索结果时。 示例 (原始图像 16：9) ，焦点设置在扬声器上： 
|
| 页面缩略图 | 页面缩略图显示在搜索结果、突出显示的内容结果、新闻文章等位置。 默认情况下，缩略图来自页面标题区域或页面上第一个顺序的 Web 部件 (例如页面布局) 的左上角。 可以替代默认值并更改页面缩略图。 时，最好使用纵横比为 16：9 的图像。 原始图像 16：9) (示例： 
|
| 快速链接 Web 部件 | 快速链接 Web 部件有六种不同的布局。 以下是预设的纵横比：
|
提示
将图像添加到页面标题区域或主图 Web 部件时，还最好在要始终显示的图像区域中设置焦点。 若要了解有关为这两个方案设置焦点的详细信息，请参阅使用 主图 Web 部件 和在 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 |