发布于 由admin

在 Vue 项目中，如何集成和配置 WebP/AVIF 等新一代图片格式，并实现按需加载和格式降级？

Vue 项目中的新一代图片格式：WebP/AVIF 集成、按需加载与格式降级（高级篇）

各位靓仔靓女，早上好（或者晚上好，取决于你几点看到这篇“论文”）。我是你们的临时讲师，今天咱们来聊聊 Vue 项目里那些让人又爱又恨的新一代图片格式：WebP 和 AVIF。

为啥说又爱又恨呢？爱的是它们的压缩率是真的香，能让你的网站嗖嗖嗖地快起来，节省带宽，提高用户体验。恨的是，兼容性这玩意儿，有时候真让人头秃。

别怕，今天咱们就是要攻克这个难题，手把手教你如何在 Vue 项目中优雅地集成 WebP/AVIF，实现按需加载和格式降级，让你的图片在各种浏览器里都能愉快地玩耍。

准备好，咱们要开始了！

第一部分：WebP/AVIF 的基础知识扫盲

在撸代码之前，咱们先来简单了解一下 WebP 和 AVIF 这两个家伙。

图片格式 优点 缺点 浏览器支持度
WebP 压缩率高（通常比 JPEG 小 25-34%），支持有损和无损压缩，支持透明度（alpha 通道）和动画。 编码和解码需要一定的计算资源，某些老旧浏览器不支持。 Chrome, Firefox, Safari (14+), Edge, Opera (基本覆盖了主流浏览器)
AVIF 压缩率更高（通常比 WebP 小 20% 左右），支持更多颜色信息，在相同质量下，文件体积更小。 编码和解码需要更高的计算资源，浏览器支持度相对 WebP 较低。 Chrome, Firefox, Safari (16+), Edge (逐步覆盖，但仍有部分用户使用不支持的旧版本)
JPEG 使用广泛，兼容性好，编码和解码速度快。 压缩率相对较低，不支持透明度，多次压缩会导致图片质量下降。 所有浏览器都支持。
PNG 支持无损压缩，适合存储需要精确像素的图片（如 logo、矢量图），支持透明度。 文件体积较大，压缩率相对较低。 所有浏览器都支持。

简单来说，WebP 和 AVIF 都是为了更小的体积和更好的质量而生的。但它们也面临着兼容性挑战。

第二部分：Vue 项目集成 WebP/AVIF 的前期准备

  1. 图片资源准备：

    • 你需要准备好 WebP 和 AVIF 格式的图片。可以使用在线工具或者命令行工具（如 cwebp, avifenc）将现有图片转换为这些格式。例如：
    # 将 image.png 转换为 WebP
cwebp image.png -o image.webp

# 将 image.png 转换为 AVIF
avifenc image.png image.avif

  2. Vue 项目搭建：

    • 确保你已经有一个 Vue 项目，如果没有，可以使用 Vue CLI 创建一个：
    vue create my-project

  3. 选择合适的图片处理库：

    • 这里我们推荐使用 vue-lazyload 库来实现按需加载，它非常轻量级且易于使用。
    npm install vue-lazyload --save

第三部分：核心代码实现：按需加载与格式降级

接下来，就是见证奇迹的时刻了！我们一步步来实现按需加载和格式降级。

  1. 注册 vue-lazyload 插件：

    在 main.js 文件中，注册 vue-lazyload 插件：

    import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: '/path/to/error.png', // 加载失败时显示的图片
  loading: '/path/to/loading.gif', // 加载中显示的图片
  attempt: 3 // 加载失败后重试的次数
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

  2. 创建图片组件（MyImage.vue）：

    这个组件负责判断浏览器是否支持 WebP/AVIF，并根据情况加载不同格式的图片。

    <template>
  <picture>
    <source
      v-if="isAvifSupported"
      :srcset="avifSrc"
      type="image/avif"
    />
    <source
      v-if="isWebpSupported"
      :srcset="webpSrc"
      type="image/webp"
    />
    <img
      v-lazy="jpgSrc"
      :alt="alt"
    />
  </picture>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isWebpSupported: false,
      isAvifSupported: false,
    };
  },
  computed: {
    webpSrc() {
      return this.src.replace(/.(png|jpg|jpeg)$/i, '.webp');
    },
    avifSrc() {
      return this.src.replace(/.(png|jpg|jpeg)$/i, '.avif');
    },
    jpgSrc() {
      return this.src; // 降级到原始格式
    },
  },
  mounted() {
    this.checkWebpSupport();
    this.checkAvifSupport();
  },
  methods: {
    checkWebpSupport() {
      const img = new Image();
      img.onload = () => {
        this.isWebpSupported = (img.width > 0) && (img.height > 0); // 避免加载错误图片也返回true
      };
      img.onerror = () => {
        this.isWebpSupported = false;
      };
      img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEAWgA0CWkAAYcAgCdASoBAAEAAkA4JQBOgCNgkAADeAAAAAAEgAFiWkAA3AA/v/EWCg==';
    },
     checkAvifSupport() {
      const img = new Image();
      img.onload = () => {
        this.isAvifSupported = (img.width > 0) && (img.height > 0); // 避免加载错误图片也返回true
      };
      img.onerror = () => {
        this.isAvifSupported = false;
      };
      img.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxAAIAAAAYcGl4bWElAAAAIHptZGEAAAAHCAIAAAAAAAAQcDJvbQAAAAAAEQAAAAEAAAAIBDRhdXgAAAAkAAAAIGNvcmUAAAAAAAAAAAAAYXZjMQAAAAKb2MAAAAAAUAAAAgYXYxQsbEAAIAAAAPAAEAAAAKAAAAAAAAAAAAAAIAAAAAFWlwcnAAAABwaXJjAAAABAAAAABpcGNvAAAAAAABAAAAAMmp4AAAAAbAAAAAABwAAAAAAAFlpcG1hAAAAAAABAAEEAAAACW1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAHJlcwEAAAAAVGl0bAAAAAAAAAAAAAAAAAAAYW5peQ=='; //一个极小的AVIF图片
    },
  },
};
</script>

    代码解释：

    • props: src 属性接收图片的原始路径（例如 image.jpg），alt 属性用于图片的 alt 标签。
    • data: isWebpSupported 和 isAvifSupported 用于存储浏览器是否支持 WebP 和 AVIF 格式。初始值为 false。
    • computed:
      • webpSrc: 根据 src 属性生成 WebP 格式的图片路径（例如 image.webp）。
      • avifSrc: 根据 src 属性生成 AVIF 格式的图片路径（例如 image.avif）。
      • jpgSrc: 返回原始图片路径，作为格式降级的最后选择。
    • mounted: 在组件挂载后，调用 checkWebpSupport 和 checkAvifSupport 方法检测浏览器是否支持 WebP 和 AVIF 格式。
    • checkWebpSupport 和 checkAvifSupport: 这两个方法通过创建一个 Image 对象，并加载一个非常小的 WebP/AVIF 图片来检测浏览器是否支持这些格式。如果加载成功，则设置相应的 isWebpSupported 或 isAvifSupported 为 true。 重点： 使用data URL而不是请求服务器上的图片，避免额外的网络请求。 同时，需要检查图像的width和height，避免加载失败但依旧返回true的情况。
    • template: 使用 <picture> 元素来提供不同格式的图片资源。 <source> 元素根据 isWebpSupported 和 isAvifSupported 的值来决定是否加载 WebP 或 AVIF 格式的图片。 如果浏览器不支持 WebP 或 AVIF，则加载 <img> 标签中的原始图片（JPEG/PNG）。 v-lazy 指令来自 vue-lazyload 插件，用于实现按需加载。

  3. 在父组件中使用 MyImage 组件：

    在你的 Vue 组件中使用 MyImage 组件，例如：

    <template>
  <div>
    <MyImage src="/images/my-image.jpg" alt="My Image" />
    <MyImage src="/images/another-image.png" alt="Another Image" />
  </div>
</template>

<script>
import MyImage from './MyImage.vue';

export default {
  components: {
    MyImage,
  },
};
</script>

    注意： 确保你的 public/images 目录下有 my-image.jpg、my-image.webp、my-image.avif、another-image.png、another-image.webp、another-image.avif 这些文件（或者根据你的实际情况修改路径）。

第四部分：进阶技巧：服务端渲染（SSR）的 WebP/AVIF 支持

如果你的项目使用了服务端渲染（SSR），那么浏览器嗅探的工作需要在服务端进行。我们可以通过 user-agent 头部信息来判断浏览器是否支持 WebP/AVIF。

  1. 安装 ua-parser-js 库：

    npm install ua-parser-js --save

  2. 修改 MyImage.vue 组件（SSR 兼容）：

    <template>
  <picture>
    <source
      v-if="isAvifSupported"
      :srcset="avifSrc"
      type="image/avif"
    />
    <source
      v-if="isWebpSupported"
      :srcset="webpSrc"
      type="image/webp"
    />
    <img
      v-lazy="jpgSrc"
      :alt="alt"
    />
  </picture>
</template>

<script>
import UAParser from 'ua-parser-js';

export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      default: '',
    },
    userAgent: { // 新增 userAgent 属性
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isWebpSupported: false,
      isAvifSupported: false,
    };
  },
  computed: {
    webpSrc() {
      return this.src.replace(/.(png|jpg|jpeg)$/i, '.webp');
    },
    avifSrc() {
      return this.src.replace(/.(png|jpg|jpeg)$/i, '.avif');
    },
    jpgSrc() {
      return this.src; // 降级到原始格式
    },
  },
  mounted() {
    if (process.client) { // 客户端环境
      this.checkWebpSupport();
      this.checkAvifSupport();
    } else { // 服务端环境
      this.isWebpSupported = this.checkWebpSupportSSR(this.userAgent);
      this.isAvifSupported = this.checkAvifSupportSSR(this.userAgent);
    }
  },
  methods: {
    checkWebpSupport() {
      const img = new Image();
      img.onload = () => {
        this.isWebpSupported = (img.width > 0) && (img.height > 0);
      };
      img.onerror = () => {
        this.isWebpSupported = false;
      };
      img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEAWgA0CWkAAYcAgCdASoBAAEAAkA4JQBOgCNgkAADeAAAAAAEgAFiWkAA3AA/v/EWCg==';
    },
     checkAvifSupport() {
      const img = new Image();
      img.onload = () => {
        this.isAvifSupported = (img.width > 0) && (img.height > 0);
      };
      img.onerror = () => {
        this.isAvifSupported = false;
      };
      img.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxAAIAAAAYcGl4bWElAAAAIHptZGEAAAAHCAIAAAAAAAAQcDJvbQAAAAAAEQAAAAEAAAAIBDRhdXgAAAAkAAAAIGNvcmUAAAAAAAAAAAAAYXZjMQAAAAKb2MAAAAAAUAAAAgYXYxQsbEAAIAAAAPAAEAAAAKAAAAAAAAAAAAAAIAAAAAFWlwcnAAAABwaXJjAAAABAAAAABpcGNvAAAAAAABAAAAAMmp4AAAAAbAAAAAABwAAAAAAAFlpcG1hAAAAAAABAAEEAAAACW1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAHJlcwEAAAAAVGl0bAAAAAAAAAAAAAAAAAAAYW5peQ=='; //一个极小的AVIF图片
    },
    checkWebpSupportSSR(userAgent) {
      const parser = new UAParser(userAgent);
      const browser = parser.getBrowser();
      // 根据 userAgent 判断是否支持 WebP，这里只是一个简单的示例
      return browser.name === 'Chrome' || browser.name === 'Firefox' || (browser.name === 'Safari' && parseInt(browser.version) >= 14);
    },
      checkAvifSupportSSR(userAgent) {
      const parser = new UAParser(userAgent);
      const browser = parser.getBrowser();
      // 根据 userAgent 判断是否支持 AVIF，这里只是一个简单的示例
      return browser.name === 'Chrome' || browser.name === 'Firefox' || (browser.name === 'Safari' && parseInt(browser.version) >= 16);
    },
  },
};
</script>

    代码解释：

    • props: 新增 userAgent 属性，用于接收服务端的 user-agent 信息。
    • mounted: 判断当前环境是客户端还是服务端。
      • 如果是客户端，则使用之前的 checkWebpSupport 和 checkAvifSupport 方法检测。
      • 如果是服务端，则调用 checkWebpSupportSSR 和 checkAvifSupportSSR 方法，根据 userAgent 判断是否支持 WebP。
    • checkWebpSupportSSR 和 checkAvifSupportSSR: 这两个方法使用 ua-parser-js 库解析 user-agent，并根据浏览器名称和版本判断是否支持 WebP/AVIF。 注意： 这里的判断逻辑只是一个简单的示例，你需要根据实际情况进行调整。

  3. 在父组件中传递 userAgent：

    在你的 Vue 组件中，从服务端获取 user-agent，并将其传递给 MyImage 组件。 以 Nuxt.js 为例：

    <template>
  <div>
    <MyImage src="/images/my-image.jpg" alt="My Image" :userAgent="userAgent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      userAgent: '',
    };
  },
  mounted() {
    // 在客户端环境下获取 userAgent
    if (process.client) {
      this.userAgent = navigator.userAgent;
    }
  },
  asyncData({ req }) {
    // 在服务端环境下获取 userAgent
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
    return { userAgent };
  },
};
</script>

    代码解释：

    • data: userAgent 属性用于存储 user-agent 信息。
    • mounted: 在客户端环境下，从 navigator.userAgent 获取 user-agent。
    • asyncData: 在服务端环境下，从 req.headers['user-agent'] 获取 user-agent。 注意： asyncData 是 Nuxt.js 特有的方法，用于在服务端获取数据。 如果你使用其他的 SSR 框架，请使用相应的方法。

第五部分：最佳实践与注意事项

  1. 图片压缩优化：

    • 使用专业的图片压缩工具（如 ImageOptim, TinyPNG, squoosh.app）对 WebP 和 AVIF 图片进行压缩优化，以获得更小的文件体积。

  2. CDN 加速：

    • 将你的图片资源部署到 CDN 上，可以提高图片加载速度，减轻服务器压力。

  3. 缓存策略：

    • 设置合理的缓存策略，可以减少不必要的图片请求，提高网站性能。

  4. Polyfill：

    • 对于一些老旧浏览器，可以使用 Polyfill 来提供 WebP/AVIF 的支持。 但是，Polyfill 会增加额外的 JavaScript 代码，可能会影响性能。

  5. Content-Type 设置：

    • 确保你的服务器正确设置了 WebP 和 AVIF 文件的 Content-Type。
      • WebP: image/webp
      • AVIF: image/avif

  6. 监控与分析：

    • 使用 Google Analytics 或其他分析工具监控 WebP/AVIF 的使用情况，以及图片加载速度，以便进行优化。

总结

恭喜你，已经完成了 WebP/AVIF 集成、按需加载和格式降级的整个流程！ 现在，你的 Vue 项目可以更加高效地加载图片，提供更好的用户体验。

记住，技术是不断发展的，你需要持续学习和实践，才能掌握最新的知识和技巧。

希望这篇“论文”对你有所帮助！ 如果你有任何问题，欢迎随时提问。

祝你编码愉快！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注