如何处理网页图片优化？

未优化的图像是影响网站性能的主要因素之一，尤其是初始负载。根据图像的分辨率和质量，图像可占整个网站流量的70%。生产环境中存在未优化的图像会显着影响初始加载速度的情况并不少见。没有经验的开发人员往往意识不到这个潜在的问题，也不知道优化图像的各种工具和方法。本文的目的是介绍优化网络图像的主要工具和方法。计算JPG文件尺寸未压缩图像的尺寸很容易通过将图像的长度和宽度（px值）乘以3个字节来计算（因为RGB颜色系统使用24位）。将结果除以1,048,576(1024*1024)得到兆字节。image_size=(image_width*image_height*3)/1048576例如，计算一张分辨率为1366pxx768px的未压缩图片的大小：1366*768*3/1048576=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,每次上传一个文件svgomg,支持SVG,每次上传一个文件AutomationSolution然而，如果您正在处理多人协作并使用大量图像的复杂项目，则手动添加每个图像可能会很乏味。同时，存在因人为失误或其他因素导致部分图片无法优化的风险。复杂的项目通常使用同样复杂的构建系统，例如Gulp、Webpack、Parcel。配置此类构建系统和添加图像优化插件非常方便。这使得完全自动化图像优化过程成为可能，一旦图像包含在项目中就对其进行优化。据我所知，最著名的插件是imagemin，它既可以作为命令行工具，也可以作为构建工具的插件：imagemin-cligulp-imageminimagemin-webpackparcel-plugin-imageminimageloadingoptimization我们介绍过如何通过压缩图片来减小文件大小，但不要过多改变图片分辨率而影响图片质量。虽然图片优化后文件大小可以减少很多，但是一次加载大量优化后的图片（比如电商网站的商品列表页）还是会影响性能。懒加载懒加载也叫按需加载，意思是只加载当前视图（用户屏幕的显示范围）中的图片，其他图片不加载（直到出现在当前视图中）。只有较新的浏览器支持原生延迟加载，但有许多基于JavaScript的解决方案。原生延迟加载基于JavaScript的解决方案据我所知，最知名的解决方案是：verlok/lazyloadyall.jsBlazy（现已无人维护）progressive图片的延迟加载虽然在性能上表现不错，但是用户需要在滚动屏幕后盯着空白区域等待图片加载，这不是很好的用户体验。在网速慢的情况下，下载图片会很慢。所以我们也需要渐进式图像。渐进式图像意味着在高质量图像完成加载之前显示低质量版本。低质量版本由于质量低、压缩率高、体积小，所以加载速度很快。在两者之间，我们还可以根据需要显示不同质量的版本。与首先加载页面骨架类似，渐进式图像是一种让用户感觉图像加载速度更快的技术。用户不必盯着空白区域等待事情发生，而是可以看到图像变得越来越清晰。渐进图像有一个基于JavaScript的解决方案：progressive-image。响应式图片我们还需要注意使用合适大小的图片。例如，假设在桌面浏览器上显示的图片最大宽度为1920px，在平板上最大宽度为1024px，在手机上最大宽度为568px，那么最简单的方案就是使用1920px的图片，可以满足所有场景。然而，在这种情况下，网络缓慢且不稳定的智能手机用户将不得不等待很长时间才能加载图像，这又让我们回到了文章开头提到的问题。幸运的是，我们可以使用图片元素告诉浏览器根据媒体查询下载相应的图片。虽然现在93%的用户使用的浏览器都支持这个特性，但是在这个元素内部包含了一个img元素，以兼容不支持这个特性的浏览器。使用CDNCloudinary、Cloudflare等CDN服务可以优化服务器上??的图片，并将优化后的图片交付给用户。如果您的站点使用CDN，您可以查看静态资源优化选项。这样我们就不用担心图片优化了，CDN会在服务器端完成优化。我们只需要担心延迟加载和渐进式图片等前端加载解决方案。WebP图像格式WebP是谷歌开发的一种针对网络优化的图像格式。根据canIUse的说法，大多数用户使用支持WebP格式的浏览器。另外，使用picture元素也可以轻松兼容不支持WebP的浏览器。是许多在线文件格式转换工具可以将图片转换为WebP格式，但CDN服务可以在服务器端完成这种格式转换。高分辨率屏幕优化需要考虑高分辨率屏幕，但这更多的是用户体验优化。例如，假设我们在768px的屏幕上显示768pxx320px的图像。但是屏幕的密度是2x，这意味着屏幕宽度实际上是2x768=1536px。这意味着我们将768像素的图像放大到1536像素，这会导致图像在高分辨率屏幕上看起来很模糊。为了解决这个问题，我们需要提供针对高分辨率屏幕优化的图像。我们需要创建一个单独的图像，相当于普通屏幕分辨率的2倍或3倍，然后使用srcset属性上的2x标记来指示这是高分辨率屏幕的图像。示例支持高分屏的响应式WebP/PNG图片：结语——优化优先使用优化图片（使用自动构建工具，在线服务，CDN优化）使用延迟加载（在浏览器有更好的原生支持之前考虑使用JS解决方案）优化高分辨率屏幕的图像使用WebP格式使用渐进式图像可选：如果条件允许记得使用CDN加速图像（和其他静态资源）co经许可从NewFrontend网站转载。