在搭建Wordpress网站的过程中，几乎每个客户都会问到图片的尺寸，具体有哪些行业通用的设计标准？在搭建外贸B2B网站的过程中要考虑哪些因素？这篇文章详细讲解。
常规的图片宽度参考
最常见的台式电脑分辨率是1920×1080px，以此为基准，全宽图片的宽度为 1920px，其它图片的宽度，可以根据图片占屏幕宽度的比例估算出来。
| 图片宽度/屏幕宽度 | 素材图片宽度 |
|---|---|
| 全宽 | 1920px |
| 1/2 | 960px |
| 1/3 | 640px |
| 1/4 | 480px |
图片比例
宽度确定后，结合图片比例就能确定图片的尺寸，常见的图片比例有：
- 1:1（正方形）：最早是胶片经典画幅，如今是亚马逊、阿里等平台指定的产品图比例。
- 2:3（竖起来 3:2）：单反摄影的原生比例，源自徕卡推出的135胶卷画幅，从1913年沿用至今。
- 3:4（竖起来4:3）：19世纪电影放映机的胶片规格，老电影、老电视、老电脑的屏幕比例。
- 16:9（竖起来 9:16）：现代宽屏通用标准，最常见的台式电脑屏幕比例就是16:9.
在外贸B2B网站中，由于大部分网站都有产品展示的需求，使用最广泛的是1:1的产品图，又由于B端客户主要通过电脑访问，2:3、3:4、16:9的横屏图片也很常见。
在主流的图片素材平台（Unsplash、摄图网等）和AI生图工具（Nano Banana、即梦）中，常见的图片比例也是这几种。
精准尺寸
有一些客户想知道自己购买的模板或者同行网站上的某一张图片，具体的尺寸是多少，这种情况下，我们可以借助Chrome浏览器查看（其它浏览器入口和快捷键略有不同）：
- 用Chrome浏览器打开网页。
- 快捷键F12打开Chrome控制台。
- 快捷键Ctrl + Shift + C，启用元素选择工具。
- 选择需要查看尺寸的图片。
- 在图片旁边、在Chrome控制台的Computed标签下，都可以查看到该图片的具体尺寸。
取精准还是大概？
由于现在都是响应式设计，不同设备，或者同一设备的浏览器窗口缩小放大，图片的显示尺寸都会随之变化，所以不用纠结图片的精确尺寸，取1920px的全宽、半宽、1/3宽、1/4宽即可。
比如：这张图片在全屏状态下，尺寸是952.5 x 535.78px，缩小Chrome浏览器窗口后，尺寸是589×331.312px，让美工提供按960px宽度准备16:9的图片即可。
倒是要注意图片比例对排版效果的影响，如果模板/参考网站放的是16:9的横向图片，可以准备16:9、4:3、3:2的横向图片，甚至1:1的正方形图片，但不要提供21:9的超宽图片，也不要提供竖版图片，差异太大。
考虑图片在不同设备上的清晰度
在Wordpress网站中，外贸企业只需要准备好最大尺寸的图片（宽度1920px或者2560px），我作为建站服务商，会对图片进行裁剪或者转小，以适配不同设备，当然，这项服务仅限于定制建站，在几百元的模板建站中，我只负责把客户提供的原图替换上去。
关于图片的最大尺寸，需要综合考虑图片在不同设备上的清晰度，比如：某图片组在电脑端的布局是一行6张图（工厂环境图的常见布局），单张图片的宽度为1920/6=320px，考虑到在手机上，这张图片会单独成行，原图的宽度应大于400px，才能保证图片在手机上不会模糊发虚。这种情况下，图片的最大尺寸应该取400px.
常规的设计标准，只需兼顾台式电脑和手机两大终端，图片显示效果只需要考虑这两种设备。更高的设计标准，除了这两大终端，还要考虑平板、手提电脑这些移动设备，手机、平板还要区分竖屏、横屏，另外还要适配超宽屏幕（2560×1080px），对图片和网页设计都有更高要求。
全宽图片的高度 – Hero
在外贸B2B网站中，首页首屏Hero的背景图，最常用的宽度是1920px（满屏），高度可以自由设置，通常小于1080px。因为屏幕顶部要显示浏览器的窗口和地址栏，屏幕底部要显示Windows工具栏，留给网页的高度约950px.
满屏图片
如果想让Hero背景图片占满整个屏幕，图片尺寸可以是1920×950px.
导航栏独立成行
如果导航栏不是悬浮在Hero背景图上，需要减去导航栏的高度，比如，这张Hero背景图的尺寸是1920×820px.
露出下一版块
为了引导客户往下滑动，通常我们会露出Hero下的第一个版块，又要为该版块预留部分高度，Hero高度越小，下方版块露出的内容越多。
Hero背景图的比例
虽然标准台式电脑的屏幕比例是16:9，但是网站Hero背景图的比例其实更接近21:9——因为要减去Chrome浏览器、Windows工具栏、顶部导航栏、下方版块的显示位置。Nano Banana、即梦等AI图片生成工具，大多也提供21:9的比例选项。
全宽图片的高度 – Banner
Banner翻译成中文是横幅，是指长度远大于宽度的展示模块，在外贸B2B网站上，最常见的是导航栏下方的Banner.
在关于我们、联系我们、产品列表页、文章列表页，导航栏下方Banner最常见的高度是300px. Banner图的尺寸就是1920x300px，可以在图片上放当前页面的标题、描述、面包屑导航。当然，
- 对于有设计师的品牌网站来说，Banner图增加了一个展示机会。
- 对于缺少设计师的小公司来说，Banner图增加了图片制作的成本和压力。
通常网页设计师会预留Banner图的位置，如果没有无力提供图片，换成黑色纯色背景即可。
除了导航栏下方的Banner，有时候在页面中间会出现CTA Banner，可能是邮件订阅框、留言表单或者其它内容，宽度同样是1920px，高度根据要放置的内容而定，要放进去的内容越多，Banner图越高。
