官网图片怎么优化体积和清晰度

打开网站，3 秒还在白屏——大概率是图片太大。图片是官网体积的最大头，80% 的性能问题来自图片。 这篇文章讲清官网图片怎么优化体积和清晰度。

为什么图片优化重要

1. 性能影响

• 图片占页面体积的 50% 到 80%。
• 图片加载慢，首屏 LCP 慢。
• 影响核心 Web 指标（Core Web Vitals）。

2. SEO 影响

• 速度是 Google 排名因素。
• Core Web Vitals 影响排名。
• 图片 SEO（alt、文件名）带来图片搜索流量。

3. 用户体验

• 加载慢用户跳出。
• 移动端流量贵，图片浪费流量。
• 模糊或失真的图片影响专业感。

4. 流量成本

• 大图片消耗带宽。
• 服务器/CDN 成本增加。

图片格式选择

主流格式对比

选择策略

if 浏览器支持 AVIF:
  使用 AVIF
elif 浏览器支持 WebP:
  使用 WebP
else:
  使用 JPEG（照片）/ PNG（透明）

动图

• GIF 体积大，质量差。
• 用 WebM 或 MP4 视频替代。
• 体积小 10 倍以上。

图片压缩

1. 有损 vs 无损

2. 压缩级别

• JPEG：75 到 85（视觉无损）。
• WebP：75 到 85。
• PNG：用工具无损压缩。

3. 压缩工具

响应式图片

不同设备加载不同尺寸的图片：

1. srcset 属性

<img 
  src="image-800.jpg" 
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="描述"
/>

2. picture 元素

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="描述" />
</picture>

3. 现代框架自动生成

• Nuxt Image、Next Image 自动生成多尺寸、多格式。
• 不用手动处理。

懒加载

1. 原生懒加载

<img src="image.jpg" loading="lazy" alt="描述" />

• 视口外图片不加载。
• 滚动到视口才加载。
• 减少首屏加载量。

2. 首屏图片不要懒加载

• 首屏图片要立即加载。
• 加 loading="eager" 或 fetchpriority="high"。

3. 模糊占位（LQIP）

• 加载前显示低质量模糊图。
• 加载完成后替换。
• 提升感知速度。

CDN 加速

1. 静态资源 CDN

• 图片放 CDN 节点。
• 全国/全球访问都快。

2. 图片处理 CDN

• Cloudflare Images、imgix、Cloudinary。
• 按需生成不同尺寸、格式。
• URL 参数控制（如 ?w=800&format=webp）。

图片尺寸规范

1. 显示尺寸 vs 文件尺寸

• 显示尺寸：页面显示多大（CSS）。
• 文件尺寸：图片本身多大（像素）。
• 文件尺寸至少 2 倍显示尺寸（高清屏）。

2. Hero 图

• 桌面：1920x1080 或更宽。
• 移动：750x1200（竖屏）。
• 提供 2 到 3 个尺寸。

3. 产品图

• 主图：800x800 或更大。
• 缩略图：200x200。
• 详情图：1200x800。

4. 博客配图

• 头图：1200x630（Open Graph）。
• 文中图：800x600。

图片 SEO

1. 文件名

• 描述性、含关键词。
• 用连字符（-）分隔。
• red-running-shoes.jpg 而不是 IMG001.jpg。

2. alt 属性

• 描述图片内容。
• 含关键词（自然）。
• 帮助盲人用户和搜索引擎。
• 图片搜索流量来源。

3. title 属性（可选）

• 鼠标悬停提示。
• 不如 alt 重要。

4. 图片 sitemap

• 提交图片 sitemap。
• 帮助搜索引擎发现图片。

优化清单

上传前

• 选对格式（WebP 优先）。
• 压缩（视觉无损）。
• 文件名含关键词。
• 尺寸合适（不超过显示 2 倍）。

上传时

• 加 alt 属性。
• 配置响应式（srcset）。
• 配置懒加载（非首屏）。
• 配置 CDN。

上线后

• 测试加载速度。
• 监控图片体积。
• 定期清理无用图片。

工具推荐

开发阶段

运营阶段

监控

成本参考

常见误区

• "图片清晰就好"：要平衡清晰度和体积。
• "用 PNG 一定比 JPEG 好"：照片用 JPEG/WebP 更小。
• "不压缩直接上传"：拖垮性能。
• "忽视格式"：现代格式（WebP/AVIF）大幅减小体积。
• "忽视响应式"：手机加载桌面大图。
• "忽视懒加载"：所有图片同时加载。
• "alt 写关键词堆砌"：被判定作弊。
• "用 GIF 当动图"：用视频。

怎么开始

1. 用 Lighthouse 审计官网图片。
2. 找出大图（>200KB）。
3. 转换为 WebP/AVIF。
4. 配置响应式（srcset）。
5. 配置懒加载（loading="lazy"）。
6. 上 CDN。
7. 持续监控图片体积。

广州市汉诺雷斯（HNREIS）做企业官网默认用 Nuxt Image 自动优化图片（WebP/AVIF、响应式、懒加载、CDN），保证性能和清晰度平衡。把你的官网图片情况告诉我们，我们给出图片优化方案。