优化1：使用webp格式的图片

webp介绍

WebP 是一种现代的图片格式，由 Google 开发，旨在提供更高的压缩率和更快的加载速度。以下是一些 WebP 格式能够优化图片加载速度的原因：

更高的压缩率：WebP 格式采用了先进的压缩算法，通常能够获得比 JPEG 和 PNG 更高的压缩率，从而减小了图片文件的大小。较小的文件大小意味着更快的下载速度，特别是对于移动设备和网络速度较慢的用户来说。
更快的加载速度：由于 WebP 图片文件更小，因此它们可以更快地从服务器下载到用户设备。这可以减少等待时间，提高页面加载速度，提升用户体验。
支持透明度和动画：WebP 格式不仅支持静态图片，还支持透明度和动画效果。这意味着开发人员可以在不牺牲性能的情况下使用更丰富的图片内容。
现代浏览器支持：大多数现代浏览器（如 Chrome、Firefox、Edge 等）都支持 WebP 格式，因此可以直接在这些浏览器上享受 WebP 带来的优势，而无需额外的兼容性处理。

实现

公司内的图片都是使用阿里云oss的，oss是直接支出图片格式转换的，只需要在图片url后面加一定的参数即可，我们可以给图片后面加上?x-oss-process=image/format,webp即可。

<template>
  <view>
	  
    <image :src="originalImageUrl" mode="aspectFit"></image>
    <image :src="webpImage" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      originalImageUrl: 'https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png', // 网络图片地址
      webpImage: 'https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp'
    };
  },
  methods: {
 
  }
};
</script>

查看微信开发者请求如下：

可以看到图片大小缩小了很多，加载时间减少了一半，并且没有改变图片的清晰度。

优化2:修改图片分辨率

阿里云oss直接在图片地址后面拼接参数来修改图片的分辨率，我们可以给图片url后面加上/resize,w_300即可，其中w_300表示图片宽度为300px。

<template>
  <view>
	  
    <image :src="originalImageUrl" mode="aspectFit"></image>
    <image :src="tinyImage" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      originalImageUrl: 'https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png', // 网络图片地址
      tinyImage: 'https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/resize,w_300'

    };
  },
  methods: {
 
  }
};
</script>

如上图，加载时间和图片大小都有一定的减少

优化3：图片懒加载

什么是图片懒加载

在前端开发中，图片懒加载是一种延迟加载图片的技术，即在页面初次加载时，并不加载所有图片资源，而是等用户滚动到图片可见区域时再进行加载。这样可以减少页面初次加载时需要下载的图片数量，从而提高页面加载速度和性能。

图片懒加载能优化速度的原因包括：

减少初始加载时间：页面初次加载时，如果所有图片都需要同时加载，会增加页面的加载时间。通过图片懒加载，只有用户滚动到图片可见区域时才加载图片，可以减少初始加载时间，提高页面加载速度。
节省带宽：不加载用户当前不可见的图片可以节省带宽，减少不必要的资源消耗。特别是对于包含大量图片的页面，图片懒加载可以显著减少网络请求，节省带宽成本。
提升用户体验：用户在浏览页面时不会因为长时间的加载延迟而感到不适，页面加载更快速，用户体验更好。
优化性能：减少不必要的资源加载可以降低页面的渲染成本，提升页面性能和响应速度。页面加载更快，交互更流畅。
延迟加载：图片懒加载采用延迟加载的策略，只有在需要时才加载资源，这有助于优化页面的整体加载顺序和过程，提高页面的整体性能。

这里有一个使用图片懒加载的uniapp组件，可以直接使用，感谢作者图片懒加载组件

微信小程序图片优化