企业网站打开速度慢的主要原因就是图片太多了，首页 banner 一张就有2.3MB，产品图直接从相机里拿出来就上传了，轮播图五张一起加载——这种情况在中小企业的网站上很常见。当网页大小超过3MB的时候，在手机上打开首屏需要4秒钟以上的时间，跳出率就会上升很多。百度对网页用户体验的要求早就写进了它的抓取和排名算法里面去了，网站的速度不仅影响到用户的停留时间，还关系到被收录的机会以及展示的可能性。
在开始之前要先看一下数据，在浏览器开发者工具中的Network面板里按文件大小排序之后，很快就能找出问题出在哪里了——很多PNG图片占用了大量的网络资源。
造成体积增大的原因有以下几种：原始数据比显示的数据大很多、格式选择不当、未采用缓存与压缩技术。
JPEG、PNG、WebP和AVIF等等各种格式都有其存在的意义
对企业的网站里图片做优化，首先就要把它们放在合适的位置上。
- 产品实拍、团队合照、场景图等等：选择使用WebP格式，在同样的画质下它的文件量要比JPEG少25%到35%，并且大多数主流的浏览器都支持它。
- 新的站点和WebP相比要小上20%左右，但是编码的时间更长一点，适合用已有的静态文件来制作。
- 对于Logo、图标等小尺寸且颜色不多的图形来说，推荐使用SVG格式，因为它是一种矢量图，可以进行无损缩放，并且体积很小；但是对于需要用到透明像素的情况则应该选用PNG格式。
- 老式浏览器兜底方案就是用
<picture>标签来展示WebP、JPEG这两种图片格式，并且让浏览器自己决定哪种格式可以被它识别出来，而不用写任何复杂的判断逻辑。
75到82可以当作一个实用的标准
图片压缩不是越小越好，当质量参数下降到60以下时，人脸上就会显现出像素化的效果，产品边缘也会变得模糊不清，从而损害了网站的专业性。
经验值范围是 质量75-82：照片类取78，文字截图类取85；在转换的时候顺便做了三件事：删除了EXIF拍摄信息、把图片转成渐进式JPEG格式（加载的时候先出现模糊效果然后慢慢变清晰）、统一sRGB色彩空间；批量处理可以用Node.js环境下的sharp库或者本地运行的Squoosh工具来实现，在处理几百张图的时候几分钟就能搞定，并且可以把它们集成到构建流程中去，之后每次上传都会自动进行优化。
尺寸、响应式，不能用手机下载大图
移动设备加载速度较慢的主要原因是因为用户把图片下载到了27英寸的显示器上。
正确的方法是给一张图片提供多种分辨率的副本（如480w、800w、1200w等），用srcset和sizes属性来让浏览器按照屏幕宽度或者DPR自动选取最合适的一张图。对于企业官网的商品列表页面来说，这种方法非常实用：把原来大小为1200像素的大图缩小至480像素左右，则单张图片所占空间会减小70%以上，而且视觉效果上几乎没有什么差别。
另外还要加上显式的width和height或者用CSS中的aspect-ratio属性来替代它们，这样就能避免布局抖动以及CLS指标受到抑制的问题，并且让百度对页面体验的相关测试更加美观。
懒加载可以节约首屏所消耗的带宽
懒加载就是把不在屏幕范围内的图片不立即加载，等用户滚动到该位置时才去请求。
原生实现只用了一个属性：
浏览器自带的方法已经很完善了，并且不用额外的JavaScript库也能实现同样的效果。在使用时请注意以下几点：
- 第一张图不可以懒加载，banner、头部图都加上
loading="eager",并且可以加fetchpriority="high",这样可以让资源下载的速度变快。 alt属性要写得很好。它可以使百度图片爬取到图片的信息，也可以使视障人士借助于屏幕阅读器去理解图片的内容，因此需要用自然语言来描述图片的内容，并且不能有和图像无关的文字。- 将重要的商品图片链接添加到图片站点地图里，并通过百度搜索资源平台来提交，这样就能提高被搜索引擎找到的速度。
上线前要进行的一系列检查工作
修改之后用Lighthouse或者PageSpeed Insights做一下移动端的测试，主要看三个方面：LCP小于2.5秒、CLS小于0.1、总传输量减少一半以上；再把URL提交到百度搜索资源平台上进行抓取诊断，保证爬虫能够顺利获取到压缩后的图片，并且不会受到懒加载的影响——懒加载只对滚动事件有效，在没有执行JavaScript的情况下会被阻止。
企业网站图片优化就是“取舍”的过程：在清晰度与文件大小之间作出选择，在首页和次页之间分配带宽，在自动化和人工审核之间找到合适的节奏。选好格式、固定好参数、加上懒加载之后做一次系统的调整就能使整个网站的加载速度有明显的提升，并且这样的效果还会影响到用户停留的时间和搜索表现。