image_size=(image_width*image_height*3)/1比如，计算分辨率为pxxpx的未压缩图片的大小：
**3/1=3Mb现在网站的尺寸平均在2Mb和3Mb之间，想象一下，一张未压缩的图片就占掉了80%的流量。在网速较慢的移动网络上，3Mb大小的图片要花很久才能加载完毕。如果等待网站加载的用户大部分时间花在等待单张图片加载，那网站会损失不少流量。想想就可怕，是吗？所以，在保证图片分辨率和画质可接受的前提下，我们可以做什么来优化下图片呢？在线图片优化如果你的项目是一个简单的静态网站，只有少量不经常变动（甚至从来不会变动）的图片，那么你可以直接使用在线工具。这些工具使用各种算法压缩图像，效果很不错，对简单项目而言完全够用。就我个人所知，比较著名的在线工具有：Compressor.io，支持JPG、PNG、SVG、GIF，每次上传1个文件Squoosh，支持JPG、PNG、SVG、GIF，每次上传1个文件Optimizilla，支持JPG、PNG，最多每次上传20个文件TinyPNG，支持JPG、PNG，最多每次上传20个文件SVGMinify，支持SVG，每次上传1个文件svgomg，支持SVG，每次上传1个文件自动化解决方案然而，如果你做的是多人协作的复杂项目，使用大量图片，在加入每张图片时都手动操作一下很乏味。同时，还存在由于人为错误或其他因素导致一些图片没有优化的风险。复杂项目常常使用同样复杂的构建系统，比如Gulp、Webpack、Parcel。配置一下这类构建系统，加入图片优化插件很方便。这样就可以完全自动化图片优化过程，在项目中加入图片后就可以优化它们。就我所知，最有名的插件是imagemin，可以作为命令行工具使用，也可以作为构建工具的插件使用：imagemin-cligulp-imageminimagemin-webpackparcel-plugin-imagemin图片加载优化我们前面介绍了如何通过压缩图片降低文件尺寸，但不过多改变图片分辨率和影响画质。尽管优化图片后文件尺寸能降低不少，但一次性加载大量优化过的图片（比如电商网站的商品列表页面）还是会影响性能。懒加载懒加载也叫按需加载，意思是仅加载当前视图（用户屏幕显示范围）内的图片，不加载其他图片（直到它们出现在当前视图内时才加载）。只有较新版本的浏览器才支持原生的懒加载特性，不过有许多基于JavaScript的方案。
原生懒加载
imgsrc="image.jpg"loading="lazy"alt="Sampleimage"/基于JavaScript的方案就我所知，最知名的方案有：
verlok/lazyload
yall.js
Blazy（现在没有维护）
渐进式图片尽管懒加载在性能方面表现出色，但是用户滚动屏幕后需要盯着空白区域等待图片加载，这样的用户体验不太好。网速慢的情况下，下载图片会非常慢。所以我们还需要渐进式图片。渐进式图片的意思是在高画质图像加载完之前会先显示低画质版本。低画质版本由于画质低、压缩率高，尺寸很小，加载很快。在两者之间我们也可以根据需要显示不同画质的版本。类似于先加载页面的骨架，渐进式图片这一技术让用户产生图片加载变快的印象。用户不再盯着一片空白区域等待事情发生，而能看到图像变得越来越清晰。渐进式图片有基于JavaScript实现的方案：progressive-image（