首页文章 工具关于 支持订阅

Web 图像优化

将图像转换为 WebP,按合适质量压缩,并按显示尺寸调整大小。更快的图像意味着更好的 Core Web Vitals、更高的 SEO 排名和更低的跳出率。免费、即时、私密。

为什么图像优化对网站重要

图像通常是任何网页上最大的资源,平均占页面总重量的 60–70%。未优化的图像是页面加载缓慢的主要原因,直接影响:跳出率(53% 的移动用户会放弃加载超过 3 秒的页面)、Core Web Vitals 分数(尤其是 LCP - 最大内容绘制)以及 Google 搜索排名(页面速度是已确认的排名因素)。

Web 图像优化清单

  1. 使用 WebP 格式 - 与等效质量的 JPEG 相比,体积小 25–35%。所有现代浏览器均支持。
  2. 将质量设为 75–85 - 在典型网页查看尺寸下,质量差异几乎不可察觉。
  3. 按显示尺寸缩放 - 切勿在 800px 列中提供 4000px 图像。先进行尺寸调整。
  4. 使用响应式图像 - 添加 srcset 以为不同屏幕宽度提供不同尺寸。
  5. 添加 loading="lazy" - 延迟离屏图像以加速首屏加载。
  6. 设置明确的宽高 - 防止布局偏移(提升 CLS 分数)。

Web 优化推荐设置

大多数 Web 图像:WebP 格式,质量 80,按实际显示宽度缩放。主图像:质量 85,最大宽度 1920px。缩略图:质量 75,宽度 400–800px。产品图像:质量 85,800–1200px 方形。

常见问题

Image optimization typically delivers the largest single improvement to page load time. Reducing a page's total image weight from 5 MB to 500 KB cuts image loading time by 90% on a typical connection. This can move LCP from 4+ seconds to under 2.5 seconds - the threshold for a "Good" Core Web Vitals score - improving both user experience and search rankings.
WebP is the recommended format for most websites. It achieves 25–35% smaller files than JPEG at equivalent quality and is supported by 97% of browsers. For advanced optimization, use AVIF as primary with WebP as fallback - AVIF is 20% smaller than WebP but has 93% browser support. Implement both via the HTML <picture> element.
Yes, directly. Google's Core Web Vitals include LCP (Largest Contentful Paint), which measures how long the largest image on the page takes to load. A poor LCP score (above 4 seconds) is a confirmed Google ranking signal. Image optimization is the fastest and most impactful way to improve LCP. Google's PageSpeed Insights will specifically flag unoptimized images as "opportunities."
Before - always. While some CMS platforms (WordPress with plugins, Shopify) offer automatic image optimization, the best approach is to pre-optimize before upload. This ensures your CDN and page source always serve optimized images regardless of plugin configuration, and avoids the processing overhead of on-the-fly optimization.