阐述 Vue 应用中的图片优化策略，包括响应式图片、WebP/AVIF 格式、图片懒加载、CDN 加速和预加载。

各位靓仔靓女，晚上好！我是你们的老朋友，今晚咱们来聊聊 Vue 应用里的图片优化，让你的网站飞起来！

咱们的目标是：

1. 响应式图片： 在不同设备上展示合适大小的图片，节省流量。
2. WebP/AVIF 格式： 用更小的体积呈现更高质量的图片。
3. 图片懒加载： 让首屏加载速度更快，用户体验更好。
4. CDN 加速： 把图片放在离用户最近的地方，加速访问。
5. 图片预加载： 提前加载关键图片，避免出现“图片加载中”的尴尬。

准备好了吗？Let’s go！

一、响应式图片：适配各种屏幕的魔法

想象一下，你用手机浏览一个网站，结果看到一张巨大的图片，不仅浪费流量，加载速度还慢得像蜗牛，是不是想砸手机？响应式图片就是解决这个问题的利器。

1. srcset 和 sizes 属性：

这是 HTML5 提供的原生解决方案，告诉浏览器不同屏幕尺寸应该加载哪张图片。

• srcset：定义了不同分辨率的图片资源。
• sizes：定义了在不同屏幕尺寸下，图片所占的宽度。

<img src="image-480w.jpg"
     srcset="image-480w.jpg 480w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     alt="响应式图片">

这段代码的意思是：

• 如果屏幕宽度小于 600px，浏览器会选择 image-480w.jpg。
• 如果屏幕宽度小于 1000px，浏览器会选择 image-800w.jpg。
• 否则，浏览器会选择 image-1200w.jpg。

原理： 浏览器会根据屏幕的像素密度（device pixel ratio）和 sizes 属性计算出最合适的图片。

2. <picture> 元素：

<picture> 元素比 srcset 更加灵活，可以根据不同的媒体查询条件选择不同的图片资源。

<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(max-width: 1000px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="响应式图片">
</picture>

这段代码的意思是：

• 如果屏幕宽度小于 600px，使用 image-small.jpg。
• 如果屏幕宽度小于 1000px，使用 image-medium.jpg。
• 否则，使用 image-large.jpg。

优点： 可以根据不同的屏幕尺寸、像素密度，甚至浏览器是否支持某种图片格式来选择图片。

3. Vue 中的应用：

在 Vue 组件中，可以动态地根据屏幕尺寸来改变 srcset 和 sizes 属性，或者使用 <picture> 元素。

<template>
  <img :src="defaultImage"
       :srcset="srcset"
       :sizes="sizes"
       alt="响应式图片">
</template>

<script>
export default {
  data() {
    return {
      defaultImage: 'image-480w.jpg',
      srcset: 'image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w',
      sizes: '(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px'
    };
  }
};
</script>

或者使用 <picture>：

<template>
  <picture>
    <source media="(max-width: 600px)" :srcset="smallImage">
    <source media="(max-width: 1000px)" :srcset="mediumImage">
    <img :src="largeImage" alt="响应式图片">
  </picture>
</template>

<script>
export default {
  data() {
    return {
      smallImage: 'image-small.jpg',
      mediumImage: 'image-medium.jpg',
      largeImage: 'image-large.jpg'
    };
  }
};
</script>

二、WebP/AVIF：图片界的瘦身大师

WebP 和 AVIF 是两种现代图片格式，它们可以在保证图片质量的前提下，大幅度减小图片体积。

• WebP： 由 Google 开发，支持有损压缩和无损压缩，以及透明度。
• AVIF： 基于 AV1 视频编码，压缩率更高，但兼容性不如 WebP。

1. WebP 的优势：

• 体积小：通常比 JPEG 小 25%-34%。
• 支持透明度：支持 Alpha 通道，可以创建透明背景的图片。
• 兼容性好：主流浏览器都支持。

2. AVIF 的优势：

• 压缩率更高：通常比 WebP 小 20% 左右。
• 画质更好：在相同体积下，画质优于 WebP。

3. Vue 中的应用：

在 Vue 应用中，可以使用 <picture> 元素来提供 WebP 和 AVIF 格式的图片，如果浏览器不支持，则回退到 JPEG 或 PNG 格式。

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

这段代码的意思是：

• 如果浏览器支持 AVIF 格式，使用 image.avif。
• 如果浏览器支持 WebP 格式，使用 image.webp。
• 否则，使用 image.jpg。

4. 如何生成 WebP/AVIF 格式的图片：

• 可以使用在线工具，例如 Squoosh。
• 可以使用命令行工具，例如 cwebp 和 avifenc。
• 可以使用 Node.js 库，例如 sharp 和 imagemin。

例如，使用 sharp 转换图片格式：

const sharp = require('sharp');

sharp('image.png')
  .webp({ quality: 80 })
  .toFile('image.webp');

sharp('image.png')
  .avif({ quality: 80 })
  .toFile('image.avif');

表格对比：JPEG vs WebP vs AVIF

特性	JPEG	WebP	AVIF
压缩算法	DCT	VP8/VP9	AV1
体积	中等	小	最小
画质	一般	较好	更好
透明度	不支持	支持	支持
兼容性	广泛	较好	较差
适用场景	老旧项目	现代项目	对画质要求高的项目

三、图片懒加载：让首屏飞起来

图片懒加载是一种优化技术，它只在图片进入可视区域时才加载图片，可以有效地减少首屏加载时间，提高用户体验。

1. 原生 loading="lazy" 属性：

HTML5 提供了 loading="lazy" 属性，可以实现简单的图片懒加载。

<img src="image.jpg" loading="lazy" alt="懒加载图片">

优点： 使用简单，无需 JavaScript 代码。

缺点： 兼容性有限，部分老旧浏览器不支持。

2. Intersection Observer API：

Intersection Observer API 是一种更强大的懒加载解决方案，它可以监听元素是否进入可视区域，然后执行相应的操作。

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

这段代码的意思是：

1. 获取所有带有 data-src 属性的 <img> 元素。
2. 创建一个 Intersection Observer 实例，监听元素是否进入可视区域。
3. 当元素进入可视区域时，将 data-src 属性的值赋给 src 属性，然后移除 data-src 属性，并停止监听该元素。

3. Vue 中的应用：

在 Vue 组件中，可以使用自定义指令来实现图片懒加载。

<template>
  <img v-lazy="imageUrl" alt="懒加载图片">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'image.jpg'
    };
  },
  directives: {
    lazy: {
      mounted(el, binding) {
        const observer = new IntersectionObserver((entries, observer) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              el.src = binding.value;
              observer.unobserve(el);
            }
          });
        });
        observer.observe(el);
      }
    }
  }
};
</script>

这段代码定义了一个名为 lazy 的自定义指令，当元素进入可视区域时，将 imageUrl 的值赋给 src 属性。

4. 使用现成的 Vue 懒加载组件：

有很多现成的 Vue 懒加载组件可以使用，例如：

• vue-lazyload
• vue-lazy-image

这些组件通常提供了更多的配置选项，例如占位图、加载动画等。

四、CDN 加速：让图片飞到用户身边

CDN（Content Delivery Network）是一种分布式网络，它将网站的静态资源（例如图片、CSS、JavaScript 文件）缓存到全球各地的服务器上，当用户访问网站时，CDN 会选择离用户最近的服务器来提供资源，从而加速访问速度。

1. CDN 的优势：

• 加速访问：用户可以从离自己最近的服务器获取资源，减少网络延迟。
• 减轻服务器压力：CDN 可以分担服务器的流量压力，提高网站的稳定性。
• 提高安全性：CDN 可以防御 DDoS 攻击，保护网站的安全。

2. 常用的 CDN 服务：

• 阿里云 CDN
• 腾讯云 CDN
• 七牛云 CDN
• Cloudflare

3. Vue 中的应用：

在 Vue 应用中，只需要将图片的 URL 替换为 CDN 上的 URL 即可。

例如，将 image.jpg 放在阿里云 CDN 上，假设 CDN URL 为 https://cdn.example.com/image.jpg，则在 Vue 组件中可以使用以下代码：

<template>
  <img :src="cdnImageUrl" alt="图片">
</template>

<script>
export default {
  data() {
    return {
      cdnImageUrl: 'https://cdn.example.com/image.jpg'
    };
  }
};
</script>

五、图片预加载：避免“图片加载中”的尴尬

图片预加载是一种优化技术，它在用户访问页面之前提前加载图片，可以避免出现“图片加载中”的尴尬，提高用户体验。

1. 使用 <link rel="preload">：

HTML5 提供了 <link rel="preload"> 元素，可以预加载图片。

<link rel="preload" href="image.jpg" as="image">

优点： 简单易用，浏览器会自动处理预加载。

缺点： 兼容性有限，部分老旧浏览器不支持。

2. 使用 JavaScript 预加载：

可以使用 JavaScript 创建一个 Image 对象，然后将图片的 URL 赋给 src 属性，浏览器会自动下载图片。

const image = new Image();
image.src = 'image.jpg';

3. Vue 中的应用：

在 Vue 组件中，可以在 mounted 钩子函数中预加载图片。

<template>
  <div>
    <img :src="imageUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'image.jpg'
    };
  },
  mounted() {
    const image = new Image();
    image.src = this.imageUrl;
  }
};
</script>

4. 预加载的注意事项：

• 不要过度预加载：预加载太多的图片会增加页面的加载时间，反而影响用户体验。
• 只预加载关键图片：只预加载首屏需要显示的图片，或者用户可能会点击的图片。
• 使用缓存：确保浏览器缓存了预加载的图片，避免重复加载。

六、总结：优化图片的葵花宝典

说了这么多，我们来总结一下 Vue 应用中的图片优化策略：

策略	优点	缺点	适用场景
响应式图片	节省流量，适配不同屏幕尺寸	需要生成多张不同分辨率的图片，增加开发成本	所有需要展示图片的场景
WebP/AVIF	体积小，画质好	兼容性问题，需要回退到 JPEG/PNG 格式	对图片体积和画质有要求的场景
懒加载	减少首屏加载时间，提高用户体验	需要 JavaScript 代码，可能会影响 SEO	图片数量较多的场景
CDN 加速	加速访问，减轻服务器压力，提高安全性	需要购买 CDN 服务，增加成本	对访问速度和稳定性有要求的场景
预加载	避免“图片加载中”的尴尬，提高用户体验	不要过度预加载，可能会增加页面的加载时间	需要快速展示关键图片的场景

最佳实践：

1. 尽量使用 WebP/AVIF 格式的图片。
2. 使用响应式图片，适配不同屏幕尺寸。
3. 对图片进行懒加载，减少首屏加载时间。
4. 使用 CDN 加速图片访问。
5. 对关键图片进行预加载，避免“图片加载中”的尴尬。

好了，今天的讲座就到这里，希望对大家有所帮助。记住，优化是一个持续的过程，要不断学习和尝试，才能让你的 Vue 应用飞起来！

下次再见！