Vite 打包图片优化

图片资源优化

图片压缩

使用图片压缩工具对图片进行压缩，可以减小图片的体积，提高加载速度。

tinypng 压缩图片 tinypng
迅捷压缩迅捷压缩

图片懒加载

图片懒加载可以减少页面加载时的请求次数，提高页面加载速度。

vue-lazyload vue-lazyload
html img标签的loading属性 loading属性

html

<img src="image.png" loading="lazy" alt="..." />

图片格式选择

WebP 格式图片体积更小，加载速度更快，但是兼容性不是很好。
SVG 格式图片矢量图，体积小，清晰度高，但是不适合复杂的图片。

base64 编码

小图片可以转换为 base64 编码，减少请求次数，提高加载速度。

vite.config.js 配置 assetsInlineLimit

文档地址：vite assetsInlineLimit

javascript

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [vue()],
    build: {
        assetsInlineLimit: 1024 * 10, // 小于 10kb 的图片转为 base64
    },
});

自适应图片 srcset、sizes

srcset 属性可以根据屏幕的大小选择不同的图片，提高图片的加载速度。

sizes 属性可以根据屏幕的大小选择不同的图片大小。

参考文档：srcset

参考文档：sizes

sprite 雪碧图

雪碧图（Sprite）是一种CSS图像优化技术，它将许多小图片合并成一张大图，以减少网络请求的次数，加快页面的加载速度。使用雪碧图时，我们会通过CSS的background-image和background-position属性来显示合并后图片中的各个小图片。

假设我们有三个图标（icon1.png, icon2.png, icon3.png），我们将它们合并成一张雪碧图（sprites.png）。合并后，每个图标在雪碧图中的位置如下：

icon1: 坐标 (0px, 0px) icon2: 坐标 (0px, -50px) icon3: 坐标 (0px, -100px)

这里的坐标是相对于雪碧图左上角的位置。

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sprite Example</title>
<style>
  .icon {
    background-image: url('sprites.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px; /* 假设每个图标的宽度是50px */
    height: 50px; /* 假设每个图标的高度是50px */
  }

  .icon1 {
    background-position: 0px 0px;
  }

  .icon2 {
    background-position: 0px -50px;
  }

  .icon3 {
    background-position: 0px -100px;
  }
</style>
</head>
<body>
  <div class="icon icon1"></div>
  <div class="icon icon2"></div>
  <div class="icon icon3"></div>
</body>
</html>

在上述代码中，.icon类定义了所有图标共同的样式，例如背景图像、不重复以及图标的尺寸。.icon1、.icon2和.icon3类分别定义了每个图标的背景位置，使得每个div元素只显示雪碧图中相应的部分。

这样，尽管我们有三个图标，但浏览器只需要加载一次雪碧图，就可以显示所有图标，从而减少了HTTP请求的次数，提高了页面的加载速度。

CDN 加速

使用 CDN 加速可以提高图片的加载速度, 减少服务器的压力。

阿里云 OSS 阿里云 OSS
腾讯云 COS 腾讯云 COS
七牛云七牛云

开通OSS服务后，可以将图片上传到OSS，然后通过CDN加速OSS的图片资源。

Vite 打包图片优化

图片资源优化 ​

图片压缩 ​

图片懒加载 ​

图片格式选择 ​

base64 编码 ​

自适应图片 srcset、sizes ​

sprite 雪碧图 ​

CDN 加速 ​