详细讨论如何优化迷你​​程序中的图像（在迷你程序中优化图像加载）

在本文中，我们将共享一个实用的迷你程序，以查看如何使用迷你程序来优化图像。我希望它对每个人都有帮助！

前端性能优化，图像优化是必不可少的链接，大多数网站页面结构对于照片渲染至关重要。 特别是，电子商务项目有许多照片，包括横幅广告照片，菜单导航照片和产品列表照片。加载许多图像和大尺寸图像会影响页面加载速度，通常导致用户体验差。 [相关学习建议：迷你计划开发教程]

基于上述问题的主要问题是照片的数量和照片的大小。因此，这是提高图像加载速度并改善用户体验的一种方法。 实际上，有许多出色的图像优化解决方案，您可以了解它。最后，在不同方向上优化图像。

使用正确的图像格式

使用最广泛的Web图像格式包括JPEG/JPG，PNG，GIF，GIF，WebP，Base64，SVG等。这些形式有自己的特征。这是一个简短的摘要：

使用正确的图像格式通常会降低图像字节大小。合理的压缩速度使您可以减小图像大小而不会影响图像质量。

减少网络传输

Mini程序使用Tencent Cloud Picture Server，并提供许多图像处理功能，包括图像缩放，图像降解，格式转换，图像裁剪，图像圆形和其他功能。 这些功能可以通过将指定参数添加到图像URL来实现。图像服务器根据参数设置预先完成图像处理，并将其存储在CDN服务器上，从而大大降低了图像传输大小。

后端接口发送的所有当前图像URL均已预处理，而无需设置图像参数。例如，大约800x800的高分辨率产品图像约为300K。这可以减慢图像加载和渲染，消耗更多的用户流量，并对用户体验产生严重影响。 因此，它结合了Tencent Cloud的图像处理功能。在加载网络图像之前，首先检查它是否是腾讯云域名的图像URL。如果域名匹配，请预处理图像URL。预处理包括添加缩放参数，添加分解参数以及减少添加WebP参数的方式。图像网络传输大小

让我们首先通过图像服务器来查看图像处理功能。通过设置图像缩放/分解/WebP，设置大小为800x800图像和246KB的体积，最终输出产生25.6KB，导致图像量减少80％，从而产生显着效果。

当前，业务后端由原始图像上传。原始图像大小可能大于客户端实际显示的大小。一方面，图像缓慢加载，另一方面，它会导致浪费用户流量。如果您要大规模加载图像，它也会影响渲染性能，并且用户会感到卡住并影响用户体验。 通过添加缩放参数，您可以指定图像大小，这将使图像服务器的实际显示大小较小且更匹配。

图像服务器以0 - 100的值范围支持图像质量，默认值是原始图像质量。降低图像质量可以降低图像大小，但是如果质量太大，它将影响图像显示效果。网络的默认图像质量降低参数设置为85。同时，通过WX.GEGNETWORKTYPE，WX.ONNETWORKSTATUSCHANGE和OFFNETWORKSTATUSCHANGE的网络类型的网络类型进行监视，并通过网络statuschange进行了网络类型网络类型网络类型网络Type网络Type -network型网络的访问。 当前，通过添加图像质量，添加图像质量可以将图像尺寸降低至少40％40％。

/****设置网络状态constnetwork =（res：record string）= {const {isConnected = true，networkType ='wifi'} = res;  this.globaldata.isconnected = issonnected;  this.globaldata.networktype = networkType.tolowercase（）; this.events.emit（eventsenum.update_network，networkType）; wx.getNetworkType（{success ：（ res）= setNetwork（res）}）; wx.offnetworkstatuschange（（RES）= setNetwork（res））; wx.onnetworkstatuschange（res）= setNetwork（res）; /string /***根据网络环境const Image const映像const：record string = {wifi：85，'5g'：85，'4G'：80，'3G'：60，'2G'：60，*获得图像质量'wi-fi']; /webp

strings

上一篇文章的简要介绍，不同的图像格式具有自己的优势，缺点和用法方案。 根据官方的Google数据，与PNG相比，WebP损失图像的字节少26％，WebP损失图像的字节比类似的JPG图像少25％。 目前，使用了TAOBAO，JD.com和MEITUAN等主要互联网公司的产品。

请在此处使用WebP示例链接（从GIF，PNG，JPG到WebP）。

大多数用户已经支持移动终端中的WebP兼容性。我可以使用它吗...支持表，例如HTML5，CSS3

在PNG/JPG图像格式的情况下，它将自动为添加WebP参数并将其转换为WebP图像格式。 尽管与PNG/JPG相比，WebP可能需要更长的时间来解码图像解码，但是相对网络传输速度仍得到显着提高。 当前，iOS 13系统版本正在考虑大量用户。 微型程序终端将获取当前系统版本，并且在降级时不会添加任何WebP参数。

// webp格式为const checksupportwebp =（）= {const {system} = wx.getSystemInfosync（）;  const [platform，版本] = system.split（''）;  if（platform.tolocaleuppercase（）=== platformenum.ios）{return number（version.split（'。'。'）[0]）ios_version_13;   返回真实。 //默认支持WebP格式};提示：当前的图像服务器不支持WebP的SVG和GIF，因此未对其进行处理。

Mini Program主页列表中的测试图像加载接口，以比较优化之前和之后的效果

这几篇文章你可能也喜欢：

• 深度谈如何在小程序中优化图片（微信小程序图片处理）

本文由主机参考刊发，转载请注明：详细讨论如何优化迷你​​程序中的图像（在迷你程序中优化图像加载） https://zhujicankao.com/146029.html