建站服务 FAQ 中的《图片处理：尺寸、命名、压缩》，客户问得最多的是图片的尺寸，具体有哪些行业通用的设计标准？要考虑哪些因素？这篇文章详细讲解。
设计标准：台式电脑
最常见的台式电脑分辨率是 1920×1080px，以此为基准，全宽图片的宽度为 1920px，其它图片的宽度，可以根据图片占屏幕宽度的比例估算出来。
| 图片宽度 / 屏幕宽度 | 100% | 50% | 25% |
| 推荐的图片宽度 | 1920px | 960px | 480px |
- 由于网页可以上下滚动，图片的高度可以很灵活，通常只需确定图片宽度。
- 如果图片在手机上独立成行，为避免清晰度不足，建议图片宽度 > 480px。
常用图片尺寸
一图多用时，上传图片所需的最大宽度版本即可，WordPress 可自动裁剪出更小尺寸的图片。
- 首页大图：1920×700px
- Banner 图：1920×300px
- 产品图：1000x1000px
图片比例
宽度确定后，结合图片比例就能确定图片的尺寸，常见的图片比例有：
- 1:1（正方形）：最早是胶片经典画幅，如今是亚马逊、阿里等平台指定的产品图比例。
- 2:3（竖起来 3:2）：单反摄影的原生比例，源自徕卡推出的135胶卷画幅，从1913年沿用至今。
- 3:4（竖起来4:3）：19世纪电影放映机的胶片规格，老电影、老电视、老电脑的屏幕比例。
- 16:9（竖起来 9:16）：现代宽屏通用标准，最常见的台式电脑屏幕比例就是16:9.
大部分外贸 B2B 网站都有产品展示的需求， 1:1 的产品图应用最广泛，由于 B 端客户主要通过电脑访问，横屏图片也很常见。主流的图片素材平台、AI 生图工具都提供这几种常见比例。
精准尺寸
通常只需要根据宽度和图片比例准备素材，如果想知道精准尺寸，可以借助 Chrome 浏览器查看：
- 用 Chrome 浏览器打开网页，快捷键 F12 打开 Chrome 控制台。
- 快捷键 Ctrl + Shift + C，启用元素选择工具，选择需要查看尺寸的图片。
- 在图片旁边、在 Chrome 控制台的 Computed 标签下，都可以查看到该图片的具体尺寸。
网站上图片很多，只有少数图片需要查看精准尺寸。
取精准还是大概？
现代网站多为响应式设计，图片宽度会随屏幕宽度自动调整，不同设备，或者同一设备的浏览器窗口缩小放大，图片的显示尺寸都会随之变化，所以不用纠结图片的精确尺寸。
倒是要注意图片比例，如果模板/参考网站放的是 16:9 的横向图片，可以准备16:9、4:3、3:2 的横向图片，甚至 1:1 的正方形图片，但不要提供 21:9 的超宽图片，也不要提供竖版图片，差异太大。
示例：以上图片在全屏状态下，尺寸是 952 x 535px，缩小 Chrome 浏览器窗口后，尺寸是 589 x 331px，让美工提供按 960px 宽度准备 16:9 的图片即可。
Hero 图片
虽然标准台式电脑的屏幕比例是 16:9（1920×1080px），但屏幕还要为浏览器、工具栏、下方版块预留位置，Hero 图片的比例通常接近 21:9，各种高度的 Hero 图片各有其适用场景。
| 应用场景 | 优点 | 推荐高度 |
|---|---|---|
| 满屏图片，导航栏悬浮 | 图片展示效果佳 | 960px |
| 满屏图片，导航栏独立成行 | 导航栏清晰，注意力集中 | 900px |
| 露出下方版块 | 可引导客户往下滑动 | <700px |
Banner 图片
Banner 翻译成中文是横幅，是指长度远大于宽度的展示模块。
- 经常出现在关于我们、联系我们、列表页顶部，可以放当前页面的标题、描述、面包屑导航。
- 有时出现在页面中间，CTA Banner，可能是邮件订阅框、留言表单等内容，高度随内容变化。
为增加展示机会，大多设计师会预留 Banner 图位置，高度 300~500 px，如果不想增加制图成本，也可以删除版块或者换成纯色背景。
更大图片尺寸
宽度 1920px 的图片已经可以占满标准台式电脑的屏幕。如果考虑宽屏电脑访客的体验，图片宽度增加到 2560px。
特殊地，想允许访客放大查看细节的图片（如摄影作品、画作等），可无视屏幕宽度，上传超大尺寸的高清图片（如 4000 x 3000 px）。高清图片需要更长的加载时间，但更容易被谷歌判定为原创，大家可根据实际情况选择。
