Vue全攻略：轻松掌控图片大小配置，告别加载慢烦恼！

一、图片格式选择

1. JPEG

• 特点：适用于照片，压缩比高，文件大小小。
• 适用场景：风景、人物照片等。

2. PNG

• 特点：支持透明背景，压缩比适中，文件大小较大。
• 适用场景：图标、图形设计等。

3. WebP

• 特点：文件体积小，支持透明背景，压缩效果好。
• 适用场景：适合大多数图片展示场景。

二、图片压缩

1. 图片压缩工具

// 示例代码：使用TinyPNG压缩图片
const tinypng = require('tinypng');

tinypng.compress('path/to/your/image.jpg', 'path/to/your/output/image.jpg', function(result) {
  console.log('压缩完成');
});

2. CSS背景图片压缩

/* 示例代码：CSS背景图片压缩 */
.container {
  background-image: url('path/to/your/image.jpg');
  background-size: contain;
}

三、图片懒加载

1. Vue-lazyload插件

// 示例代码：使用Vue-lazyload插件
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'path/to/loading/image.jpg',
  attempt: 1
});

new Vue({
  el: '#app',
  data: {
    images: [
      'path/to/your/image1.jpg',
      'path/to/your/image2.jpg',
      // ...
    ]
  }
});

2. CSS懒加载

/* 示例代码：CSS懒加载 */
img {
  loading: lazy;
}

四、总结