前端开发中的图片优化技术有哪些？

有很多图像优化技术。前几篇文章写得很详细。我不想在这里细说。如何装载大量的图像也是图像优化的重要组成部分。现在将介绍几种不寻常的方式来加载大量图片。

要在页面上绘制画布/Web GL动画，必须确保所需的序列帧顺利加载。常见的方法是手动或用loader从CDN加载这些图片，或者将它们组装成sprite图片，然后在加载后手动分离序列帧。但是，单独加载会大大增加HTTP请求，而且一些api还需要相同的源策略，因此组装sprite图像的风险太大。利用这个机会，今天我想向大家介绍一些不寻常的方式加载大量的图片，我在我的项目经验。

利用pixijs或threejs制作具有华丽视觉效果的H5宣传页面正变得越来越流行。哈利波特20周年纪念活动、up2017年年会等案例都有很好的传播效果。精美的视觉效果意味着需要添加大量的图像资源，而大规模的图像加载一直是网页优化的重点。无论是制作web GL/Canvas动画还是直接CSS旋转图片，开发人员都需要将设计师给出的每一帧图片插入到页面中，以确保在加载完所有图片后播放动画。

为了保证所需的大量图像的顺利加载，传统的方法是从CDN中手动加载这些图像，或者组装sprite图像，加载后将其分离。但是，单独加载会产生大量的HTTP请求，需要CDN映像才能实现跨域支持，而对于组装的sprite映像来说，映像太大的风险将导致低端移动设备闪回。

利用这个机会，今天我想向大家介绍一些不同寻常的方法来加载我在项目中使用的大量图片。

由于现代浏览器的typedarray和blobull以及前人的努力，当前的浏览器环境可以轻松地下载二进制文件并在页面中提取单个图像。只需使用压缩软件将图像资源打包为ZIP格式。加载联机页时，请求zip文件，并在本地提取图像blob对象。

将图像打包到zip中的目的是减少HTTP请求、回调函数和代码复杂性，并确保资源可用于一个请求，而不必担心单个图像的加载错误。根据这个想法，您实际上可以将序列帧转换为Base64，并根据播放序列将其放入JSON文件中。在线请求JSON文件，并在图像的SRC中填充Base64以获取序列帧。这样地：

如果只加载大量的图像，方法2是简单的，但是会有各种跨域问题，所以有方法3。将图像传输到Base64以保存JS文件，并分配SRC以获取可用的图像。使用jsonp解决跨域问题。它变成以下内容：资源：

为了加载大量的网页动画图像资源，可以使用以下方法：

三种图像加载方法各有优缺点，需要根据应用情况进行选择。方法2在代码数量和逻辑上都非常简单。如果我们只是在画布上绘制序列帧图片，方法2是非常合适的。在项目中使用webgl时，图片不能跨域，而且还有其他资源需要打包。_推荐的方法是将它们打包成zip并在线解包。如果无法将zip文件放在域名下并添加CORS头，那么请使用方法3，因为方法3在实践中没有使用过，而且效果未知，所以我不能在这里保证。