现代页面和 Web 部件设计为跨设备完全响应,这意味着 Web 部件中使用的图像将根据显示位置、使用布局以及查看它们的设备以不同方式缩放。 例如,现代页面设计为在移动设备上外观美观,自动图像缩放有助于创建具有吸引力的体验。
哪些图像大小最适合?
由于响应式页面设计,没有特定的高度或宽度(以像素为单位)可确保图像在设备和布局中保持特定形状。 将自动调整图像的大小和裁剪,以跨各种设备和布局显示最佳结果。 但是,有一些指南可帮助确保图像在页面上外观不错。
查找页面的最佳图像大小取决于以下因素:
-
纵横比:图像的高度和宽度之间的关系
-
列布局:页面上的栏类型和数量
-
Web 部件布局:为使用图像的 Web 部件选择的布局
纵横比
纵横比是图像的宽度和高度之间的关系。 它通常以两个数字表示,例如 3:2、4:3 或 16:9。 宽度始终是第一个数字。 例如,16:9 的比率可以是宽度为 1600 像素,高度为 900 像素。 或者,它可以是 1920 x 1080、1280 x 720 或其他可以计算为等于 16:9 的宽度/高度组合。 您可以在联机和某些照片编辑工具中查找纵横比计算器,以帮助确定图像的纵横比。
在大多数情况下,当布局和设备的纵横比为 16:9 或 4:3 时,现代 Web 部件中的图像效果最佳,具体取决于布局。
列布局
页面可以布局为包含不同列类型和布局的节,例如全角列、一列、两列、三列、三分之一左列和三分之一右列。 预期填充列宽的图像的一般规则是,它们的宽度至少与放置它们时所位于的列的宽度相同。 例如,一列中图像 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 部件及其布局,以及每个列中使用的纵横比。
请考虑此图像,其原始纵横比为 16:9:
下面是此图像的示例,显示在一栏页面布局中,在不同的 Web 部件和布局中。
磁贴和图层布局的纵横比如下:
下面是"图层"布局中显示的图像示例, (顶部) 和 (布局)
|
|
16:9 是 Carousel、幻灯片和卡片布局的纵横比。 下面是"幻灯片版式"中显示的图像示例, (顶部) 和卡片 (底部) 。
|
|
图像将扩展到包含 Web 部件的部分的宽度。 可以选择使用"图像"工具栏更改纵横比或随意裁剪,或使用调整大小控点放大或缩小图像。 下面是一个示例,显示以 4:3 (蓝色) 图像裁剪标记
|
|
以下纵横比用于不同的布局:
下面是"图块"布局中显示的图像示例 (顶部和) 底部的 (布局)
|
|
根据布局,新闻 Web 部件中的图像可以是 4:3、16:9 或 21:9。 下面是一个顶部故事和一个木马布局中的图像示例。
|
|
图像在横向或纵横比为 16:9 或更高时以及大小至少为 1 MB 时效果最佳。 此外,请确保将焦点设置为保持图片视图中最重要的部分,尤其是当图片用于缩略图、新闻布局和搜索结果时。 在 (焦点设置为 16:9) 图像的示例。
|
|
页面缩略图显示在搜索结果、突出显示的内容结果、新闻文章等位置。 默认情况下,缩略图来自页面标题区域,或者来自在页面上按第一顺序排序的 Web 部件 (如页面布局的左上方) 。 可以覆盖默认值并更改页面缩略图。 这样做时,最好使用纵横比为 16:9 的图像。 原始 (16:9 的示例)
|
|
快速链接 Web 部件具有六种不同的布局。 下面是建议的纵横比:
下面是"紧凑"版式顶部和底部 () 幻灯片版式 (的示例)
|
网站标头图像建议
除了页面之外,你可能还想在扩展布局中添加自定义徽标或图像。 下面是针对这些元素的大小建议。
元素 |
说明 |
建议 宽度 x 高度(以像素为单位) |
---|---|---|
网站徽标 |
根据上传的设计,非正方形和透明较大徽标 |
192 x 64 格式:组连接的站点不允许使用 PNG、JPEG、SVG (SVG) |
网站徽标缩略图 |
如果未上传任何网站徽标或需要方形格式的位置,则使用方形徽标缩略图 此元素是必需的。 |
64 x 64 格式:组连接的站点不允许使用 PNG、JPEG、SVG (SVG) |
扩展版式网站徽标 |
扩展的页眉布局具有扩展的网站徽标宽度。 |
300 x 64p 格式:JPEG、PNG、SVG |
扩展布局背景图像 |
一个可以与扩展头一起使用的新背景图像。 |
2560 x 164 格式:JPEG、PNG |