图片通常是导致页面加载缓慢和 Core Web Vitals (CWV) 评分不佳的主要因素，直接影响 LCP（最大内容绘制）和 CLS（累积布局偏移）。要优化 LCP，必须减小首屏大图的文件大小和首字节时间。这包括使用 WebP 或 AVIF 格式，它们比 JPEG 或 PNG 具有更出色的压缩率。此外，利用响应式图片技术（通过 `srcset` 和 `sizes` 属性），使浏览器根据屏幕尺寸下载对应的图片版本。针对 CLS，最常见的问题是图片加载时内容“跳动”。您必须在 HTML 标签中显式定义 `width` 和 `height` 属性，或使用 CSS 的 aspect-ratio 属性，以便浏览器在图片下载前预留出空间。此外，对首屏以下的所有图片实施原生延迟加载（`loading="lazy"`），优先保障关键内容的渲染。最后，考虑使用 CDN 将图片分发至离用户更近的节点，显著降低延迟并提升性能指标。
逐步指南
转换至 WebP/AVIF
弃用传统格式，改用在更小体积下提供更高画质的新一代图片格式。
显式设置尺寸
为所有 <img> 标签添加宽度和高度属性，防止意外的布局偏移。
实施 Srcset
使用响应式图片属性，根据用户设备屏幕尺寸提供不同分辨率的图片。
添加延迟加载
为非关键、首屏以下的图片启用延迟加载，加快初始页面的渲染速度。
优化首屏大图
确保首屏最大的图片（LCP 元素）设置为预加载且不使用延迟加载，以提升加载优先级。
Pro Tips
- 使用 TinyPNG 或 Squoosh 等工具，在不损失肉眼可见画质的前提下压缩图片。
- 避免将文本嵌入图片中；使用 CSS 和网络字体代替，这更有利于无障碍访问和 SEO。
- 预加载 LCP 核心图片，明确告知浏览器这是加载优先级最高的内容。
- 确保您的 CDN 已配置为能根据浏览器自动分发最佳图片格式。
pSeoMatic 如何提供帮助
pSeoMatic 会深度分析您网站的媒体资产，精准找出拖慢 Core Web Vitals 评分的未优化图片。通过锁定哪些图片缺失尺寸属性或体积过大，pSeoMatic 为您提供清晰的 LCP 和 CLS 优化路径，助力网站获得更高的搜索排名和用户参与度。
免费试用 pSeoMatic相关问题
延迟加载会伤害 SEO 吗？
不会。只要使用原生浏览器支持或 SEO 友好的 JavaScript 库正确实施，就不会对 SEO 产生负面影响。
网页图片的最佳格式是什么？
目前 AVIF 提供最强的压缩比，其次是 WebP，两者都优于传统格式。
图片引起的“布局偏移”是什么意思？
如果图片未定义尺寸，加载过程中会突然占位并将下方内容挤开，造成用户阅读中断，这是 CLS 扣分的主因。
相关指南
准备好付诸行动了吗？
pSeoMatic 根据您的数据生成数千个经过 SEO 优化的页面。