图片过大时前端如何优化加载

一、 采用不减分辨率的压缩方式进行压缩

用PS打开图片，点击点击“文件”——“存储为Web所用格式”

将图片存储为Web所用格式，点击“存储”。

或者寻找第三方压缩方式https://tinypng.com/

二、将图片改为jpeg渐进式图片

上图是标准型jpg格式的加载方式

上图是渐进式jpeg格式的加载方式。如果你希望将草图先呈现出来然后慢慢进一步清晰，可以采用这种形式。

想要将转化成渐进型jpeg格式，需要使用phtoshop

1、首先打开一个图片，选择“文件 -> 存储为”，选择“JPEG”格式，点击“保存”按钮。在“JPEG选项”界面的“格式选项”中选择“连续”，然后在“扫描”选项中设置为“5”

2、打开一张图片，选择“文件 -> 存储为Web和设备所用格式”，在弹出的界面右上角选择“JPEG”格式，勾选“连续”，点击“存储”按钮即可。

三、懒加载

当我们打开一个页面时，浏览器就会从上往下读取页面中的<img>标签src中的地址，并且开启线程来进行加载。

倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，试问谁会一直耐心的等待着页面的加载？另一方面，加载每个图片都要向服务器发送请求，这会增大服务器的压力。

针对这种情况，就需要运用懒加载技术：先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。1.这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。2.减少了同一时间发向服务器的请求数，服务器压力剧减。

四、用图片进行操作

如果是一个gif图片，那么可以利用一张大图，通过位置的移动，通过肉眼的视觉残留弄成一个gif图

链接：https://blog.csdn.net/qq_34633111/article/details/82985827

如果是需要很多icon，那么可以直接放一张有很多icon的大图片，利用位置移动选择不同的icon