发布于 由admin

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

各位朋友，大家好！

今天咱们来聊聊 Vue 应用里的图片优化，这可是个能让你的网站飞起来的秘密武器。别担心，这玩意儿听起来高大上，其实掌握了技巧，就像学会了给汽车加涡轮增压一样简单。

咱们今天就分几个模块，像剥洋葱一样，一层一层地把图片优化的策略给扒个精光：

  1. 响应式图片：让图片像水一样适应屏幕
  2. WebP/AVIF：图片界的“瘦身衣”
  3. 懒加载：让你的网页先跑起来再说
  4. 预加载：重要图片，提前就位

准备好了吗？那咱们就发车了！

1. 响应式图片：让图片像水一样适应屏幕

话说当年，咱搞网站，都是一张图伺候所有屏幕。小屏幕上，图太大，浪费流量；大屏幕上，图又太小，糊得像马赛克。这可不行！得让图片像水一样，根据屏幕大小自动调整。

响应式图片的核心思想，就是根据不同的屏幕尺寸，加载不同大小的图片。听起来复杂，其实实现起来就那么几行代码。

  • srcset 和 sizes 属性

这是 HTML5 提供的神器。srcset 定义了不同分辨率的图片，sizes 定义了在不同屏幕尺寸下，图片应该占据的宽度。

<img
  srcset="
    image-320w.jpg  320w,
    image-480w.jpg  480w,
    image-800w.jpg  800w
  "
  sizes="(max-width: 320px) 280px,
         (max-width: 480px) 440px,
         800px"
  src="image-800w.jpg"
  alt="A responsive image"
/>

这段代码的意思是：

  • 如果屏幕宽度小于 320px，图片宽度显示 280px，浏览器会选择 image-320w.jpg。

  • 如果屏幕宽度小于 480px，图片宽度显示 440px，浏览器会选择 image-480w.jpg。

  • 否则，图片宽度显示 800px，浏览器会选择 image-800w.jpg。

  • src 属性是兜底用的，如果浏览器不支持 srcset 和 sizes，就加载 image-800w.jpg。

  • <picture> 元素

<picture> 元素更强大，可以根据不同的媒体查询，加载不同的图片。这玩意儿就像个变形金刚，能根据你的需求，变出不同的图片。

<picture>
  <source media="(max-width: 480px)" srcset="image-small.jpg">
  <source media="(max-width: 768px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="A responsive image">
</picture>

这段代码的意思是：

  • 如果屏幕宽度小于 480px，加载 image-small.jpg。
  • 如果屏幕宽度小于 768px，加载 image-medium.jpg。
  • 否则，加载 image-large.jpg。
  • <img> 标签是兜底用的，如果浏览器不支持 <picture> 元素，就加载 image-large.jpg。

Vue 中如何使用？

在 Vue 组件中，你可以直接使用这些 HTML 标签。

<template>
  <picture>
    <source media="(max-width: 480px)" :srcset="smallImage">
    <source media="(max-width: 768px)" :srcset="mediumImage">
    <img :src="largeImage" alt="A responsive image">
  </picture>
</template>

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

总结一下：

策略 优点 缺点 适用场景
srcset/sizes 简单易用，兼容性好，浏览器自动选择最佳图片。 需要预先生成不同尺寸的图片。 大部分场景，尤其是图片尺寸与屏幕尺寸有直接关系时。
<picture> 更加灵活，可以根据不同的媒体查询，加载不同的图片。 代码稍微复杂一些。 需要根据设备特性（例如，Retina 屏幕）加载不同图片时。

2. WebP/AVIF：图片界的“瘦身衣”

话说回来，即使你用了响应式图片，图片本身如果太大，加载速度还是慢。这时候，就需要给图片穿上“瘦身衣”，让它们变得更苗条。

WebP 和 AVIF 就是图片界的“瘦身衣”。它们比传统的 JPEG 和 PNG 压缩率更高，这意味着在保证图片质量的前提下，图片体积更小。

  • WebP

WebP 是 Google 开发的一种现代图片格式，它支持有损压缩和无损压缩，并且在相同质量下，WebP 图片比 JPEG 图片小 25%-34%。

  • AVIF

AVIF 是 Alliance for Open Media 开发的一种更新的图片格式，它基于 AV1 视频编解码器。AVIF 的压缩率比 WebP 更高，而且支持更多的特性，例如 HDR 和宽色域。

如何使用 WebP/AVIF？

  • 图片转换

你需要将现有的图片转换为 WebP 或 AVIF 格式。有很多工具可以做到这一点，例如：

*   **在线转换工具：** 像 TinyPNG、Squoosh 等，使用方便，适合少量图片转换。
*   **命令行工具：** 像 cwebp (WebP) 和 avifenc (AVIF)，适合批量图片转换。
*   **图像处理软件：** 像 Photoshop、GIMP 等，功能强大，适合专业人士。
  • 服务器配置

你需要配置服务器，使其能够提供 WebP/AVIF 图片。这通常需要在 .htaccess 文件或者服务器配置文件中添加一些规则。

*   **Apache:**
    ```apache
    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
      RewriteCond %{REQUEST_FILENAME}.webp -f
      RewriteRule (.*).(jpe?g|png)$ $1.webp [NC,T=image/webp]
    </IfModule>

    <IfModule mod_headers.c>
      <FilesMatch ".webp$">
        Header set Vary Accept
      </FilesMatch>
    </IfModule>
    ```
*   **Nginx:**
    ```nginx
    http {
      include mime.types;
      default_type application/octet-stream;

      map $http_accept $webp_suffix {
        default "";
        "~*webp" ".webp";
      }

      server {
        listen 80;
        server_name yourdomain.com;

        root /var/www/yourdomain;
        index index.html index.htm;

        location ~* ^.+.(jpe?g|png)$ {
          add_header Vary Accept;
          try_files $uri$webp_suffix $uri =404;
        }
      }
    }
    ```
  • HTML 代码

你可以使用 <picture> 元素来同时提供 WebP/AVIF 和传统的 JPEG/PNG 图片，以便在不支持 WebP/AVIF 的浏览器中进行兼容。

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

Vue 中如何使用？

在 Vue 组件中，你可以直接使用这些 HTML 标签。

<template>
  <picture>
    <source :srcset="avifImage" type="image/avif">
    <source :srcset="webpImage" type="image/webp">
    <img :src="jpgImage" alt="An image">
  </picture>
</template>

<script>
export default {
  data() {
    return {
      avifImage: 'image.avif',
      webpImage: 'image.webp',
      jpgImage: 'image.jpg'
    }
  }
}
</script>

总结一下：

格式 优点 缺点 适用场景
WebP 压缩率高，兼容性好，支持有损压缩和无损压缩。 压缩时间稍长。 大部分场景，尤其是需要兼顾压缩率和兼容性时。
AVIF 压缩率更高，支持 HDR 和宽色域。 兼容性不如 WebP，压缩时间更长。 对图片质量要求高，并且需要支持 HDR 和宽色域时。

3. 懒加载：让你的网页先跑起来再说

话说回来，即使你用了响应式图片和 WebP/AVIF，如果网页上图片太多，一次性加载，还是会影响首屏加载速度。这时候，就需要用到懒加载。

懒加载就像一个聪明的管家，它会先加载首屏需要的图片，而把其他图片留到用户滚动到可视区域时再加载。这样，网页就可以先跑起来，给用户一个更快的响应。

  • 实现原理

懒加载的原理很简单：

1.  **监听滚动事件：** 监听 `window` 的 `scroll` 事件。
2.  **判断图片是否在可视区域：** 当页面滚动时，判断图片是否进入可视区域。
3.  **加载图片：** 如果图片进入可视区域，就加载图片。
  • 原生 JavaScript 实现
const images = document.querySelectorAll('img[data-src]');

function loadImage(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = () => {
    img.removeAttribute('data-src');
  };
}

function lazyLoad() {
  images.forEach(img => {
    if (img.getBoundingClientRect().top <= window.innerHeight && img.getAttribute('data-src')) {
      loadImage(img);
    }
  });
}

window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
lazyLoad();

这段代码的意思是：

1.  获取所有带有 `data-src` 属性的 `<img>` 标签。
2.  定义 `loadImage` 函数，用于加载图片。
3.  定义 `lazyLoad` 函数，用于判断图片是否在可视区域，并加载图片。
4.  监听 `window` 的 `scroll` 和 `resize` 事件，并调用 `lazyLoad` 函数。
5.  在页面加载完成后，调用 `lazyLoad` 函数。
  • Vue 中如何使用？

在 Vue 组件中，你可以使用 vue-lazyload 这样的插件，或者自己实现一个懒加载组件。

*   **使用 `vue-lazyload` 插件**
npm install vue-lazyload
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: '1.3', // 预加载的比例
  error: 'error.png', // 加载失败的图片
  loading: 'loading.gif', // 加载中的图片
  attempt: 3 // 尝试加载的次数
})
<template>
  <img v-lazy="imageSrc" alt="A lazy-loaded image">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'image.jpg'
    }
  }
}
</script>
*   **自己实现懒加载组件**
<template>
  <img
    ref="image"
    :src="src"
    :data-src="dataSrc"
    :alt="alt"
    @load="onLoad"
    @error="onError"
  >
</template>

<script>
export default {
  props: {
    dataSrc: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      src: 'loading.gif', // 加载中的图片
      loaded: false
    }
  },
  mounted() {
    this.lazyLoad();
    window.addEventListener('scroll', this.lazyLoad);
    window.addEventListener('resize', this.lazyLoad);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.lazyLoad);
    window.removeEventListener('resize', this.lazyLoad);
  },
  methods: {
    lazyLoad() {
      if (this.loaded) return;
      const el = this.$refs.image;
      if (el.getBoundingClientRect().top <= window.innerHeight) {
        this.src = this.dataSrc;
        this.loaded = true;
        window.removeEventListener('scroll', this.lazyLoad);
        window.removeEventListener('resize', this.lazyLoad);
      }
    },
    onLoad() {
      this.$emit('load');
    },
    onError() {
      this.src = 'error.png'; // 加载失败的图片
      this.$emit('error');
    }
  }
}
</script>

总结一下：

策略 优点 缺点 适用场景
懒加载 提高首屏加载速度，减少不必要的资源加载。 需要监听滚动事件，可能会影响性能。 网页图片较多，用户不需要一次性加载所有图片时。

4. 预加载：重要图片，提前就位

话说回来，懒加载虽然能提高首屏加载速度，但如果用户滚动到某个图片时，还需要等待加载，体验也不好。这时候，就需要用到预加载。

预加载就像一个贴心的服务员，它会在后台提前加载一些重要的图片，当用户需要时，就可以立即显示出来，无需等待。

  • 实现原理

预加载的原理很简单：

1.  **创建 `Image` 对象：** 创建一个 `Image` 对象。
2.  **设置 `src` 属性：** 设置 `Image` 对象的 `src` 属性为要预加载的图片地址。
3.  **监听 `load` 事件：** 监听 `Image` 对象的 `load` 事件，当图片加载完成后，执行相应的操作。
  • 原生 JavaScript 实现
function preloadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = () => {
      resolve();
    };
    img.onerror = () => {
      reject();
    };
  });
}

const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

Promise.all(imageUrls.map(preloadImage))
  .then(() => {
    console.log('All images preloaded!');
  })
  .catch(() => {
    console.log('Some images failed to preload!');
  });

这段代码的意思是：

1.  定义 `preloadImage` 函数，用于预加载图片。
2.  创建一个 `Image` 对象，并设置 `src` 属性为要预加载的图片地址。
3.  监听 `Image` 对象的 `load` 和 `error` 事件，并分别执行 `resolve` 和 `reject` 函数。
4.  使用 `Promise.all` 函数，并发预加载所有图片。
5.  当所有图片加载完成后，或者有图片加载失败时，执行相应的操作。
  • Vue 中如何使用？

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

<template>
  <div>
    <img :src="imageSrc" alt="An image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'placeholder.jpg' // 占位图
    }
  },
  mounted() {
    this.preloadImage('image.jpg')
      .then(() => {
        this.imageSrc = 'image.jpg'; // 替换为预加载的图片
      });
  },
  methods: {
    preloadImage(url) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
        img.onload = () => {
          resolve();
        };
        img.onerror = () => {
          reject();
        };
      });
    }
  }
}
</script>

总结一下：

策略 优点 缺点 适用场景
预加载 提高用户体验，提前加载重要图片，避免用户等待。 可能会增加初始加载时间，浪费带宽。 网页中需要快速显示的图片，例如，轮播图、重要按钮等。

最后总结：

优化策略 适用场景 优点 缺点
响应式图片 需要在不同设备上显示不同尺寸的图片时。 减少不必要的流量消耗，提高加载速度，提升用户体验。 需要预先生成不同尺寸的图片。
WebP/AVIF 需要减小图片体积，提高加载速度时。 压缩率高，体积小，加载速度快。 兼容性问题，需要服务器配置。
懒加载 页面图片过多，一次性加载会影响首屏加载速度时。 提高首屏加载速度，减少不必要的资源加载。 需要监听滚动事件，可能会影响性能。
预加载 某些图片需要快速显示，避免用户等待时。 提高用户体验，提前加载重要图片，避免用户等待。 可能会增加初始加载时间，浪费带宽。

好了，各位朋友，今天的 Vue 应用图片优化讲座就到这里。希望这些技巧能帮助你的网站飞起来！ 记住，没有一劳永逸的解决方案，最佳的策略往往是多种方法结合使用，根据你的具体需求，灵活调整。 祝大家编码愉快！

发表回复

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