如何让网站上的图片加载得更快（且不变模糊）
在大多数网站上，图片占据了访客所下载内容的最大部分——往往比其余所有东西加起来还多。优化它们是成本最低的速度改进，对访客和搜索引擎排名都有帮助。这里有一份实用清单，从影响最大的改动一直到最后的润色。
来自 CrispPic 团队阅读约 2 分钟
为什么图片体积很重要
页面上最慢的通常是它最大的那张图片，而浏览器常把它作为 Largest Contentful Paint（LCP）来衡量。Google 的 Core Web Vitals 认为 LCP 低于 2.5 秒为良好。在移动网络下，一张 3 MB 的主图就可能独自耗尽这全部预算。
1. 按显示尺寸提供图片
把 4000 像素的照片发送到只以 800 像素宽显示它的位置，是没有意义的。作为实用规则，图片最多是显示宽度的约两倍，这样可以在高密度屏幕上保持锐利。典型宽度：全宽主图 1600–2000 px，文章配图 800–1200 px，缩略图 300–400 px。
2. 使用现代格式
在画质相近的情况下，WebP 文件通常比 JPG 小 25–35%，并且所有当前的浏览器都支持它。PNG 仅用于需要无损图形或透明度的场合。如果必须支持较旧的软件，请保留一份 JPG 作为后备。详情参见 JPG、PNG 与 WebP。
3. 压缩到合理的大小
这些是粗略的目标，而不是规则：主图低于约 200 KB，文章内的图片低于约 100 KB，缩略图低于约 30 KB。设定好目标，让工具找出满足它的最高画质，而不是凭感觉拖滑块。
4. 对首屏以下的图片使用延迟加载
<img src="photo.webp" alt="Describe the image"
width="800" height="600" loading="lazy">延迟加载（lazy loading）会把图片推迟到访客滚动到附近时才加载。不要把它用在页面顶部的主图上——那张图应该立即加载，因为它通常就是 LCP 元素。
5. 始终设置宽度和高度
当尺寸写在 HTML 里时，浏览器会在图片到达之前预留正确大小的空间，这样页面在加载时就不会跳动（这种跳动被度量为 Cumulative Layout Shift）。具有描述性的 alt 属性有助于无障碍访问和图片搜索。
6. 用 srcset 提供多种尺寸
<img
src="photo-800.webp"
srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 640px) 100vw, 800px"
alt="Describe the image"
width="800" height="600">浏览器会选择对访客屏幕而言足够清晰的最小文件，因此手机不会去下载桌面版本。
如何检查你的成果
用 PageSpeed Insights 或 Chrome 开发者工具里的 Lighthouse 检测页面。两者都会标出尺寸过大和未优化的图片，并估算你能节省的确切字节数。
准备文件
每次导出都从原图出发。对已压缩过的副本再次压缩，比一次性压缩源文件损失更多画质。
常见问题
网站图片的最佳尺寸是多少？
就是它被显示时的尺寸，并为高密度屏幕上的清晰度预留最多约两倍该宽度的余量。对于全宽主图，1600–2000 像素是典型值。
网站的最佳图片格式是什么？
大多数照片和图形用 WebP，以 JPG 作后备，只有在无损画质或透明度必不可少时才用 PNG。
图片大小会影响 SEO 吗？
间接会。沉重的图片会拖慢页面，损害 LCP 等 Core Web Vitals，而页面体验是搜索引擎考量的信号之一。
我应该用插件自动压缩图片吗？
在大型网站上这能省时间，但你仍然需要提供正确的尺寸。调整尺寸通常是最大的收益，而且不依赖任何插件。
使用已预设好合适参数的工具试试
这些页面会打开专为这一场景预先设置好的 CrispPic 工具。你的图片在自己的浏览器中处理：不会上传到任何地方。
免费，无需账号，无水印。