当前位置：首页 > backend >正文

图片优化方案

backend 2025/6/16 19:37:26

文章目录

一、了解一下核心 Web 指标
二、图片优化
- 1. 为什么图片优化很重要？
- 2. 怎么进行优化
- - 1. 使用现代图片格式(AVIF/WebP)
  - 2. 不同设备加载不同尺寸
  - 3. 懒加载图片
  - 4. 注意事项

一、了解一下核心 Web 指标

https://developers.google.com/search/docs/appearance/core-web-vitals?hl=zh-cn

核心 Web 指标是一组指标，用于衡量网页的加载性能、互动性和视觉稳定性的实际体验。我们强烈建议网站所有者实现良好的核心 Web 指标，以便借助 Google 搜索取得理想成效，并确保用户在总体上获得良好的体验。这一方面连同其他网页体验方面，都与我们的核心排名系统所要奖励的内容相契合。

Largest Contentful Paint (LCP)：衡量加载性能。为了提供良好的用户体验，请尽力在网页开始加载的 2.5 秒内完成 LCP。
Interaction To Next Paint (INP)：衡量响应速度。为了提供良好的用户体验，请尽力将 INP 控制在 200 毫秒以内。
Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的用户体验，请尽力使 CLS 得分低于 0.1。

二、图片优化

在现代 Web 开发中，图片往往是影响页面性能的最大因素。据统计，图片通常占据网页总体积的 60%-70%，直接影响用户的加载体验和搜索引擎排名。在 Vue 3 项目中，合理的图片优化策略不仅能显著提升页面加载速度，还能改善 Core Web Vitals 指标，特别是 LCP（Largest Contentful Paint）。

1. 为什么图片优化很重要？

数据显示，图片通常占据网页总大小的 50-70%，是性能优化的重点目标。未优化的图片会导致：

加载时间过长：影响 LCP 指标，用户等待时间增加
带宽消耗巨大：特别是对移动用户不友好
SEO 排名下降：Google 优先推荐快速加载的网站
用户体验差：加载慢的网站跳出率高达 90%

通过合理的图片优化，你可以：

减少页面加载时间 1-3 秒
降低带宽使用量 50-80%
提升 LCP 评分从"需要改进"到"良好"
显著改善移动端用户体验

2. 怎么进行优化

1. 使用现代图片格式(AVIF/WebP)

传统的 JPEG 和 PNG 格式已经相当陈旧，现代格式如 WebP 和 AVIF 在保持同等画质的情况下，文件大小可以减少 50-80%。

webp: Google 开发，浏览器支持率 95%+（2025 年）
avif：更新的格式，压缩率更高，支持率约 85%+

具体实现方案

<picture><!-- 当浏览器支持 AVIF 格式时，优先加载这张 --><source srcset="./images/103.avif" type="image/avif" /><!-- 如果不支持 AVIF，但支持 WebP，就加载这张 --><source srcset="./images/103.webp" type="image/webp" /><!-- 最后回退到 JPG（所有浏览器都会支持） --><img src="./images/103.jpg" alt="..." loading="lazy" width="600" />
</picture>

2. 不同设备加载不同尺寸

为所有设备提供相同的高分辨率图片是资源浪费：

手机屏幕只需要 400px 宽的图片，却加载了 1200px 的版本
浪费用户流量，延长加载时间
特别是在移动网络环境下影响更明显

具体实现

<picture><!-- 大屏 (min-width: 1024px) 时，加载 1200px 宽度的 AVIF --><sourcesrcset="./images/147-600.avif"type="image/avif"media="(min-width: 1024px)"/><!-- 小屏 (max-width: 1023px) 时，加载 600px 宽度的 AVIF --><sourcesrcset="./images/147-300.avif"type="image/avif"media="(max-width: 1023px)"/><!-- 大屏 (min-width: 1024px) 时，加载 1200px 宽度的 webp --><sourcesrcset="./images/147-600.webp"type="image/webp"media="(min-width: 1024px)"/><!-- 小屏 (max-width: 1023px) 时，加载 600px 宽度的 webp --><sourcesrcset="./images/147-300.webp"type="image/webp"media="(max-width: 1023px)"/><img src="./images/147.jpg" alt="" loading="lazy" />
</picture>

3. 懒加载图片

懒加载延迟加载屏幕外的图片，直到用户滚动到可见区域才开始加载：

减少初始页面加载时间
节省带宽，特别是用户可能不会看到所有图片
改善 LCP，因为减少了首屏的网络请求竞争

具体实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>延长页面示例</title><style>.spacer {height: 5500px;background: linear-gradient(#eee, #fff);}img {display: block;margin: 20px auto;width: 80%;max-width: 600px;}</style></head><body><h1>上面是 空白，往下滚…</h1><div class="spacer"></div><!-- 下面这几张图才在懒加载范围里 --><img id="img1" src="./images/103.jpg" loading="lazy" alt="…" /><img id="img2" src="./images/103.jpg" loading="lazy" alt="…" /><img id="img3" src="./images/147.jpg" loading="lazy" alt="…" /><script>document.querySelectorAll('img').forEach((img) => {img.addEventListener('load', () => {console.log(`图片 ${img.id} 开始加载于`,performance.now().toFixed(0),'ms')})})</script></body>
</html>