网站图片怎么优化：格式、压缩与懒加载

图片是页面体重的最大头

一页文字可能只有几十 KB，一张相机直出的原图可以到十几 MB——一张图顶几百页文字。所以"网站慢"的第一嫌疑人几乎总是图片。好消息是：图片优化不需要技术底子，按"选格式、限尺寸、压质量"三步走，谁都能把体积砍掉一大半。

第一步：按内容选格式

格式	适合的内容	特点
WebP	照片、截图等绝大多数图片	同画质体积通常最小，现代浏览器全支持，默认首选
JPEG	照片（需兼容老旧环境时）	老牌通用格式，压缩率不如 WebP
PNG	图标、线条图、需要透明背景的图	无损，照片用它会非常胖
SVG	图标、Logo 等矢量图形	无限缩放不变糊，体积通常极小

简单记：照片类一律 WebP（要兼容极老环境才退回 JPEG）；图标线条用 PNG 或 SVG。把 PNG 照片转成 WebP，常常是单张收益最大的一步。

第二步：先限尺寸，再调质量

顺序别反：页面显示宽度只有 800 像素，就没必要上传 4000 像素的原片——多余像素用户根本看不到，白耗流量与加载时间。先把尺寸压到"显示尺寸的两倍"以内（兼顾高分屏），再调压缩质量。质量与体积的取舍：产品图、头图选质量优先；氛围图、截图选体积优先，肉眼几乎看不出差别。

1. 确认图片在页面里的实际显示宽度，把图片缩到它的两倍以内。
2. 用浏览器本地处理的压缩工具批量转换（本站的图片压缩工具不在服务器处理，图片不出你的电脑）。
3. 需要精确达标时用"目标体积"模式，让工具自动找能达标的最高质量。

第三步：懒加载与 alt 文本

懒加载是让首屏之外的图片"滚到再加载"：给 img 标签加 loading="lazy" 一个属性就完成，首屏立刻变轻。另外别为了省事删掉 alt 文本：它是读屏软件对图片的"配音"，也是搜索引擎理解图片的线索，一句话描述图里是什么就够。

三个常见坑

只转格式不限尺寸——4000 像素的 WebP 依然很胖；背景大图没人管——首屏最大的那张图往往藏在 CSS 里；批量压完删了原图——留一份原始文件，压缩是不可逆的。

一句话总结与下一步

图片优化的完整顺序：选对格式 → 限尺寸 → 压质量 → 懒加载 → 补 alt。前三步用工具半小时能清完一个站，是新手回报率最高的性能投资。

下一步该读什么

• 在线图片压缩工具：照着本文流程直接上手：限宽高、目标体积、PNG 转 WebP
• Core Web Vitals 优化：图片是最大内容元素（LCP）的头号影响因素