减小图片体积,加快你的网站

在多数网站上,图片占了访客下载字节的大头。这让图片优化成为你为页面速度和 Core Web Vitals 所能做的最高回报的事。下面是一份可落地的清单。

1. 压缩每一张图片

发布前把图片过一遍压缩工具。压缩得当的图片可以只有原始体积的一小部分,却看不出差别。CompressEasy 在浏览器中、可批量完成这件事,能融入任何工作流。

2. 使用现代格式

从 JPEG 和 PNG 切换到 WebP 或 AVIF,可以大幅降低图片体积。这是性能优化中最简单、最高杠杆的改动之一。

3. 按显示尺寸调整大小

不要把 4000 像素的图片用来显示 800 像素。让图片尺寸匹配实际显示大小,并以约 2 倍源图兼顾高分屏。

4. 对首屏外图片懒加载

给首屏以下的图片加上 loading="lazy",让浏览器在用户滚动时才下载它们。这能在长页面上大幅加快初始加载。

5. 设置宽高

始终为图片设置 width 和 height 属性(或用 CSS aspect-ratio),让浏览器预留空间。这能避免布局抖动,改善 Cumulative Layout Shift 指标。

先做最大的优化

如果你只做一件事,那就把最大的图片压缩并转换为 WebP 或 AVIF。它既快又免费,通常能削掉最多的页面体积。先把文件拖进压缩工具开始吧。

常见问题

图片优化能把速度提升多少?

由于图片常占页面体积的大头,优化它们可把总下载体积削减一半甚至更多,直接改善加载时间和 Core Web Vitals。

图片体积会影响 SEO 吗?

会,间接但很关键。更快的页面和更好的 Core Web Vitals 是排名因素,而更轻的图片是改善它们最简单的方式。

相关工具