网站图片检查

优化网站图片：发布前完成页面全面检查

使用本指南查看浏览器实际加载内容，为每张图片选择合适尺寸，修正HTML，发布前检查页面。

运行审核 使用检查清单

简要回答

导出新文件前先检查实时页面

最快的图片优化往往不是换转换器。先找大文件请求、缺失尺寸、懒加载的LCP图片或指向旧文件的元数据。先从页面开始，只导出必须更改的内容。

检查请求，不看文件夹 即使存在优化文件，页面仍可能加载大文件。
逐图选择 主图、文章图、重复卡片和元数据图像需要不同的规则。
告诉浏览器使用哪个文件 使用 srcset、sizes、宽度和高度，让浏览器选择合适文件并预留空间。
检查已发布页面 查找错误URL、布局偏移、懒加载的LCP图片、损坏的社交预览和过时的Schema图片。

先检查

从浏览器下载内容开始

设计文件和媒体文件夹无法反映用户实际获取内容。浏览器显示加载的图片URL、显示尺寸、页面是否预留空间，以及是否在可用小图处重复使用大图。

网络检查

加载的是哪个URL？

打开页面，记录真实图片URL、传输大小、显示尺寸及浏览器是否选择预期版本。

布局检查

图片有多大？

测量可见区域，不要凭源文件猜测。卡片、内容列和社交图片不应共用同一导出文件。

加载检查

它在首屏吗？

找到可能的最大内容绘制（LCP）图片，避免误用懒加载，且让次要图片延后加载。

上下文检查

元数据是否匹配？

检查替代文本、Open Graph 图片、JSON-LD 图片、附近文本和文件名，确保页面信息一致。

图片规划

转换前规划每张重要图片

图片规划将本指南与转换器文章区分开，明确每个图片区域的需求：尺寸、加载顺序、备用方案、元数据角色及最终校验，确保页面使用正确文件。

图片区域 决策 风险 检查
主图 设定可能的LCP图片、精确尺寸、加载顺序及备用路径。 懒加载或超大文件可能延迟首个有用图片加载。 对比首屏显示尺寸、请求尺寸及加载行为。
文章内容图片 定义内容宽度版本，并用宽高预留空间。 页面可能加载远宽于阅读栏的源图片。 检查桌面和移动端宽度，确认选用的 srcset 选项。
重复卡片图片 为列表、中心页、相关卡片和归档页创建小尺寸版本。 一张重复使用的文章图片可能大幅增加列表页负载。 扫描列表页，确认重复卡片未加载完整文章图片。
元数据图片 将 Open Graph 和 JSON-LD 图片准备为规划文件，而非意外残留。 搜索和分享预览可能显示旧图、裁剪图或无关图片。 检查最终URL的渲染元标签和结构化数据。

规划显示文件需新版本时，使用 图片转换指南 选择下一步。普通 WebP 工作用 JPG 转 WebP 指南，AVIF 指南仅用于仍需更多压缩的大图。

图片尺寸

为每个图片区域设定明确尺寸

响应式图片仅在HTML与布局匹配时有效。测量区域，选择几个合适宽度，预留宽高比，避免仅因存在大图就发送。

测量区域 以可见宽度为起点，而非原始文件大小。
使用简短宽度列表 几个规划好的版本比一堆随机导出文件更易维护。
预留布局空间 设置宽高或宽高比，避免图片加载导致页面位移。
分离预览图片 社交和Schema图片有其独立职责，不应是可见页面图片的随机复制。
缩小重复图片 在中心页、相关区块和归档页重复的图片需使用更小的专用文件。
保留原始文件以备后用 清晰存储源文件，发布的HTML指向优化后的输出。

简单检查：如果360像素卡片下载了2400像素文件，压缩不是主要问题。页面需要更小的图片版本，或HTML指向了错误文件。

加载顺序

让首张图片有意加载

塑造首屏的图片需不同规则。找到可能的LCP图片，避免误用懒加载，且让下方图片保持静默直到需要。

  1. 1

    命名最大内容绘制（LCP）图片

    若首个重要图片可能成为 Largest Contentful Paint，切勿误用懒加载。

  2. 2

    让下方图片保持低调

    首屏以下图片通常应使用懒加载和异步解码。

  3. 3

    检查 CSS 背景图

    裁剪的背景仍可能下载大文件。请为可见区域使用合适尺寸的文件。

  4. 4

    检查重复请求

    当同一超大文件在多个小卡片中重复使用时，成本会大幅增加。

HTML

为测量区域使用响应式HTML

对重要图片明确浏览器选择。示例展示宽度选项、sizes、固定尺寸和备用方案。根据区域调整加载行为，而非习惯操作。

HTML响应式图片示例
<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="仪表盘截图展示上传流程"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

搜索与分享

让图片、替代文本和元数据讲述同一个故事

图片SEO不仅是添加关键词。可见图片、附近文本、有用的替代文本、Open Graph 标签和 JSON-LD 图片链接应清晰描述同一页面。装饰图应保持装饰性质。

文件名说明图片内容 使用与页面和主题相关的命名，避免相机导出或临时下载名。
替代文本必须有用 清晰描述有用图片，装饰图像不参与关键词优化。
附近文本支持图片内容 标题、说明和附近段落应与图片内容一致。
已检查元数据 Open Graph 和 JSON-LD 图片链接应指向代表页面的准备文件。

检查发现社交预览薄弱时，继续使用 打开图形图像指南。当Schema和元标签有问题时，使用 Blazor 元数据指南 保持JSON-LD和页面元数据一致。

步骤

每页的简单图片检查

  1. 1

    打开真实页面

    从当前URL开始，而非资源文件夹。记录实际加载的图片。

  2. 2

    制定图片规划

    为每个重要图片记录目标宽度、宽高比、加载顺序、备用方案及元数据角色。

  3. 3

    只转换变更部分

    仅对检查发现的文件使用转换工具，避免重新导出整个媒体文件夹。

  4. 4

    更新HTML和元数据

    将 srcset、sizes、尺寸、Open Graph 和 JSON-LD 图片链接指向准备好的文件。

  5. 5

    验证浏览器输出

    检查页面、网络请求、社交元数据、结构化数据及移动端布局。

  6. 6

    保留规则以备下次使用

    记录图片决策，避免未来更新时重新猜测。

工具提示

确定需转换文件后使用 PixelPress

检查显示文件夹需要新的 WebP 或 AVIF 文件时，PixelPress 可本地转换。原始文件保持不变，输出文件夹易于审核。

Open PixelPress

检查清单

发布前图片检查清单

文章、落地页或产品页上线前使用此清单，捕捉仅靠转换无法发现的页面问题。

已检查实际请求 检查关注页面加载的图片，而非仅仓库中的文件。
每个重要图片都有规则 每个重要图片的宽度、宽高比、加载顺序、备用方案和元数据使用均已确定。
显示尺寸与文件匹配 浏览器不会被迫下载比可见图片大数倍的文件。
首屏加载有意为之 可能的LCP图片未被误用懒加载、未超大，也未隐藏在背景后。
已检查响应式HTML 重要内容图片使用 srcset、sizes、尺寸和必要的备用方案。
已审查视觉质量 页面中的文字、面孔、产品细节、渐变和截图依然清晰。
元数据指向规划文件 Open Graph 和 JSON-LD 图片链接应指向规划文件，而非随机残留。
未引用旧原始文件 发布的HTML加载优化文件，而非庞大源文件。

常见问题

常见问题解答

网站图片检查及加载问题解答

下一步

推荐文章
最佳网页图片转换器
页面检查后，选择需要转换的新文件对应的转换器。
阅读文章
推荐文章
将 JPG 转为 WebP
尺寸和图片区域明确后，使用 WebP 指南处理普通 JPG 导出。
阅读文章
推荐文章
Open Graph 图片预览指南
检查发现社交预览图片薄弱或缺失时，使用 Open Graph 指南。
阅读文章
推荐文章
PixelPress
当检查生成明确更新文件列表时，使用本地批量转换。
阅读文章