目录
网站图片优化的重要性
图片常是页面加载缓慢的主要原因。 页面中最大数据量来自过大图片、错误格式或响应式传输不足，用户体验和搜索表现都会受损。
因此，图片优化需要系统化方案，而非零散修补。需明确格式、尺寸、传输及生成流程。
更快页面
合适尺寸的现代格式图片减轻传输负担，加快关键视觉加载。
性能
更佳搜索表现
更清晰的图片传输、更完善的元数据和更快的页面，有助于提升爬虫信号和页面质量。
搜索影响
减少发布混乱
系统化图片流程避免团队上传超大原图、缺失元数据及导出不一致。
操作清晰度
常用网站图片类型
大多数网站不需更多图片类型，而是需要正确的图片角色，合理尺寸和标注。应以任务思维管理，而非随意上传。
主图或最大内容绘制（LCP）图
这是页面顶部的主要视觉，通常是最大内容绘制元素，需精确尺寸，默认不应延迟加载。
用途：首屏印象与 LCP
内嵌内容图片
这些图片支持文章内容，应说明内容，使用合理的替代文本，并在桌面与移动端良好缩放。
用途：支持阅读流程
卡片、缩略图与聚合图
这些较小图片出现在分类页、相关文章模块和导航区域，应比页面主图尺寸更小。
用途：预览与导航
Open Graph 与社交预览图
此图决定页面在聊天和社交平台分享时的展示效果，是元数据资产，不仅是主图的复制。
用途：分享预览与点击率
JSON-LD 结构化数据图片
文章和产品结构化数据可引用主图，帮助搜索引擎识别页面的主要视觉资产。
用途：结构化数据完整性与实体清晰度
格式：选择合适的文件类型
最佳格式取决于图片角色，大多数网站需要多种格式组合，而非单一万能格式。
| 格式 | 适用场景 | 重要原因 |
|---|---|---|
| WebP | 常规网站图片、卡片、预览及日常内容视觉 | WebP 是实用默认格式，兼顾质量、压缩和发布流程的重复使用便利。 |
| AVIF | 精选大型摄影主图及高价值视觉，额外压缩需谨慎处理 | AVIF 可生成更小文件，但编码较慢，适合选择性优化，不宜作为通用默认。 |
| JPEG | 现代导出前的兼容旧格式和源文件 | JPEG 仍是常见输入格式，但重要网站图片很少作为最终格式。 |
| PNG | 截图、透明背景及需无损边缘的界面资源 | PNG 适合界面图形，但通常对普通摄影内容过大。 |
| SVG | 图标、图表、标志和简单插图 | SVG 可无损缩放，常优于光栅格式，适合锐利线条图形。 |
日常使用 WebP，针对少量需极致压缩的摄影图像使用 AVIF。
常规 WebP 路径请参考 JPG 转 WebP 工作流程指南 。选择性主图压缩请使用 JPEG 转 AVIF 指南 .
尺寸：响应式图片、尺寸设定与布局稳定
网站慢不仅是格式问题，常常是同一超大图适配所有屏幕。响应式尺寸可解决此问题。
- 生成多种宽度，确保手机、平板和桌面设备获取合适资源。
- 设置宽高以预留空间，减少布局偏移。
- 卡片和相关内容使用较小版本，避免处处复用全尺寸主图。
- 仅在需要缩放、下载或灯箱效果时保留大尺寸原图。
传输标记示例
内容图片使用小尺寸明确设置，主图保留预加载。此类标记便于浏览器行为和 Lighthouse 结果分析。
<picture>
<source
type="image/avif"
srcset="/images/articles/hero-640.avif 640w,
/images/articles/hero-1024.avif 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/articles/hero-640.webp 640w,
/images/articles/hero-1024.webp 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/articles/hero-1024.jpg"
alt="Product dashboard preview"
width="1024"
height="576"
loading="lazy"
decoding="async" />
</picture>传输优先级：延迟加载、最大内容绘制和核心网页指标
格式和尺寸确定后，传输是关键。原则简单：将首屏图片视为优先资源，而非次要考虑。
主图优化建议
主图应压缩并按实际布局调整尺寸，若为最大内容绘制元素应预加载。
使用现代格式，明确尺寸，避免首屏堆叠多个巨幅横幅。
影响传输的因素
主图延迟加载、手机端传输桌面尺寸资源、摄影内容使用超大 PNG 仍是常见错误。
这些问题削弱 Lighthouse 评分和真实用户体验。
上下文：文件名、替代文本及周边内容
图片优化不仅是数据量，搜索引擎和用户还需了解图片内容及其页面作用。
- 使用描述主题的文件名，避免相机导出名或占位符。
- 图片有意义时写替代文本，避免堆砌关键词。
- 保持附近标题、说明与图片内容一致。
- 确保图片角色支持页面主题，而非随意存在。
元数据：为何 Open Graph 和 JSON-LD 图片重要
页面浏览正常但元数据图片缺失会削弱发现效果，这是最易修复的质量缺陷之一。
Open Graph 图片
控制页面外部分享时的展示效果，优质 Open Graph 图提升社交和聊天平台的点击率和形象。
JSON-LD 图片属性
结构化数据为搜索引擎提供更清晰内容包，相关图片增强标题、描述与主视觉的关联。
如果你正在使用 Blazor 开发，请结合本指南使用 Blazor 元数据组件指南 ，以确保页面标题、描述、规范链接、Open Graph 图片和结构化数据保持一致。
流程：网站图片的系统化处理
- 导出前定义图片角色：主图、内嵌、卡片、Open Graph 或结构化数据图。
- 根据任务选择格式：常规用 WebP，精选大图用 AVIF，矢量用 SVG，需无损透明用 PNG。
- 按布局导出合适尺寸，避免处处传输超大原图。
- 设定传输优先级，主图为优先资源，次要图片保持高效。
- 发布前检查元数据图片、替代文本和文件名。
如果选择该流程的工具， 最佳网页图片转换器指南 涵盖本地与在线工具选择。
网站图片优化清单
- 每个重要页面在导出前都有明确的图片角色规划。
- WebP 负责常规网站图片，除非有更强选择性格式需求。
- 大型摄影图仅在额外节省值得时使用 AVIF。
- 主图按布局调整尺寸，若为最大内容绘制元素则不延迟加载。
- 卡片和聚合图使用比页面主图更小的变体。
- Open Graph 图片用于分享和预览。
- 结构化数据包含相关主图。
- 设置宽高属性以避免布局偏移。
- 替代文本和文件名清晰描述图片角色。
- 流程足够规范，避免同样错误在下一次发布中重现。