图片尺寸
如何查看图片尺寸
替换模板/参考网站原有的图片素材，需要知道原图片的尺寸。用Chrome浏览器打开网页 – 快捷键F12 – 快捷键【Ctrl + Shift + C】 – 光标放在图片上，就能看到该图尺寸。
如何确定图片尺寸
由于网页可以上下滚动，图片的高度可根据内容灵活调整，我们通常只需确定图片宽度。一图多用时，上传图片所需的最大尺寸版本，WordPress 可自动裁剪出更小尺寸的图片。
以 deepseek.com 为例，顶部导航栏 LOGO 宽112px，底部导航栏 LOGO 宽160px，直接上传宽 160px 的 LOGO 即可。这样既能保证清晰度，又能避免重复上传不同尺寸的图片。
常规图片尺寸
一个网站上，图片的种类、数量很多，如果不想逐张查看图片尺寸，取近似值即可。
由于网页可以上下滚动，图片的高度可根据内容灵活调整，我们只需知道图片的宽度。
常规台式电脑屏幕宽1920px，图片的宽度可以参考这个尺寸确定。
| 图片宽度/屏幕宽度 | 素材图片宽度 | 常见应用 |
| 全宽 | 1920px | Hero，Banner，整个版块的背景图 |
| 1/2 | 960px | 关于我们、联系我们版块、产品详情页 |
| 1/3 | 640px | 产品列表页、文章列表页 |
| 1/4 | 480px | 产品列表页、文章列表页、图片组 |
| 1/5 | 384px | 图片组 |
更大图片尺寸
宽度1920px的图片，已经可以占满标准台式电脑的屏幕。如果考虑宽屏电脑访客的体验，图片宽度增加到2400px。特殊地，想允许访客放大查看细节的图片（如摄影作品、画作等），可上传超大尺寸的高清图片。
也有忽略屏幕宽度，直接上传4000 x 3000 像素高清图片的。加载速度较慢，但更容易被谷歌判断为原创图片。可以根据实际情况选择。
图片清晰度与加载速度
图片的清晰度和网页的加载速度，都会影响用户体验。图片文件越小，网页加载速度越快，但过度压缩会导致画质损失。在图片压缩优化时，我们需要平衡图片文件大小与图片清晰度。
图片格式
需要透明度、含文字、LOGO细节的，选择 PNG 格式。不需要透明度的实拍图、人物合照，选择 JPG 格式。
WEBP/AVIF 格式可转可不转，传统格式的图片压缩工具也在不断进步。PNG/JPG 图片可以比 WEBP/AVIF 图片更小，且兼容性更佳。
自动压缩 VS 手动压缩
WordPress插件的自动压缩功能，会对所有图片采用统一的压缩标准（如60%或80%质量），压缩效果可控性差。有条件的，推荐使用 Photoshop 等专业工具，实施差异化压缩策略，在上传前，确保图片足够清晰——特别是LOGO、Banner等关键图片。
注意：多次压缩可能累积画质损失，建议保留原图，先测试确定最佳导出参数，再直接从原图导出目标尺寸和质量。
首屏图片文件大小
为确保用户体验，我们要重点控制首屏图片的总大小 ≤ 1MB，比如：
| 图片 | LOGO | Hero 背景图 | Hero 前景图 |
| 大小 | 20KB | 300KB | 150KB |
其它图片文件大小
不在首屏的图片，可以设置为Lazy load，访客滚动到接近图片所在位置时，图片才开始加载。
| 图片 | 全宽 Banner图 | 半宽图片 | 1/3宽度图片 | 客户LOGO等小图 |
| 大小 | 200KB | 150KB | 100 KB | 50KB |
图文分离
专业设计标准
专业的网页设计采用分层结构，将文本与视觉元素分离，这种架构具备以下优势：
- SEO友好：搜索引擎可直接抓取文本内容，提升排名。
- 多语言支持：翻译工具可识别并转换文本，对小语种用户更友好。
- 响应式适配：文字和图片可灵活调整，适配不同屏幕尺寸。
- 维护轻松，可直接在网站上修改文字，不影响视觉元素。
分层结构
专业的网页设计采用分层结构，每个版块/容器可以有：
- 背景层： 可以是纯色、渐变色、背景图片、幻灯片、视频等。
- 遮罩层：可设置Overlay的颜色和透明度，提升文字可读性。
- 内容层：放置可交互的元素（文字、按钮、图片等）。
- 每层可独立修改，各元素可自适应不同屏幕尺寸，翻译插件、搜索引擎都能识别其中的文字
国内常见做法
由于网页设计师稀缺，国内网站大多依赖传统美工设计，将文字直接嵌入图片中，并为不同设备（PC/手机/平板）导出多套尺寸。这种做法适合只面向国内用户的中文网站——平台为主，不追求SEO效果，单一语言，无需翻译。
当这种图文混合的设计模式应用于外贸企业的独立站时，有以下缺陷：
- SEO不友好，搜索引擎无法抓取关键文本内容。
- 翻译插件无法识别图片内嵌文字，关键信息无法传递给小语种客户。
- 不支持响应式设计。小屏文字模糊，大屏图片失真，需要为不同屏幕准备不同素材。
- 维护困难，任何文字修改都需要重新出图 – 更新所有尺寸版本 – 重新上传发布。
国内外设计流程对比
| 专业设计标准 | 国内常见做法 | |
| 执行者 | 网页设计师 | 美工 |
| 工具 | 专业页面编辑器 | Photoshop 等图像处理软件 |
| 输出成果 | 网页代码 | 固定尺寸图片 |
Hero优化建议
用户在访问网站时，通常希望迅速确认（几秒钟）该网站是否包含所需内容。首页首屏的Hero要满足用户的这一需求，否则，用户很可能会选择离开并寻找其他解决方案。
国内惯用的幻灯片/走马灯
虽然技术上可行，但从用户体验和转化效果考虑，我们建议谨慎使用，原因如下：
- 多张轮播图会稀释焦点，访客难以抓住核心信息。
- 大图片太多，加载速度慢，用户体验不佳。
- 要让访客看清楚内容，每页幻灯片需停留3s，3张共9s，但新访客首屏停留时间平均仅3s。
- 移动端用户习惯向下滑动，后续轮播内容可能完全被忽略。
- 如果决定使用幻灯片/走马灯，请保持每张图片的尺寸相同。
优化建议
经典搭配：吸睛大标题 + 一句话阐述核心产品/服务的优势 + CTA按钮。
清晰传达您的产品/服务能解决什么问题，让访客瞬间理解您的价值。业务相关图片/视频可以作为背景，也可以与文字形成左右结构。建议实现图文分离。
Hero 图片高度
通常出现在网站首页和着陆页的第一屏，也叫首页首屏或首页大图版块。Hero 背景图的宽度为1920px，图片的高度可以自定义，通常在600px~900px之间。
- 高度 900px：可以覆盖整个版面，让用户把注意力集中在Hero版块。
- 高度 600px：可以在显示大图的同时，露出下一版块的内容，吸引用户往下翻页。
Banner 图片
图片宽度为1920px，图片的高度可以自定义，通常在300px~500px之间。常作为关于我们、联系我们等页面的第一个版块，有时也出现在页中。
特色图片 Featured Image
特色图片是用来代表产品、文章、页面等内容的主要视觉元素。它通常显示在文章列表、归档页面、社交媒体分享以及单篇文章的顶部，帮助吸引访客的注意力并提升内容的视觉吸引力。也可能出现在谷歌搜索结果中——SEO友好。
为保证网站整体视觉的统一性，如果列表页启用了特色图片，那么，每篇文章都要准备一张特色图片，且特色图片的比例要统一。比如：所有特色图片的长宽比都是1:1。
图片的统一性
为保持网站整体视觉统一性，同一版块或者同一类别的图片，格式、比例、命名最好能统一。可以在 Photoshop 或 Canva 提前设定标准化画布尺寸，批量处理图片。
比如：所有合作品牌LOGO均为透明背景的PNG图片，高度统一为150px。产品图长宽比均为1:1，文章的特色图片长宽比均为16:9。
图片处理工具
- 在线去背景：https://www.remove.bg/
- 在线图片压缩：https://tinypng.com/，https://tinyjpg.com/
- 统一图片尺寸：https://www.canva.com/，https://www.canva.cn/（也可以去背景）
