通过优化网站上的图片来提升网站性能

网站设计中，会调用很多图片，像首页的轮播图片，这种图片由于像素很大占用很大的体积；有的图片是介绍产品的，如产品的详情页，如有的产品详情页可能有几十张图片。在这些图片的使用过中，如果不注意图片的优化与使用方式，可能导致这些图片在网站上打开显示很慢，造成用户体验很差。

首页的轮播图片由于像素很大，如1920*914px大小的图片, 可能每张图片的体积达到300KB以上，甚至有的达到1M左右，当用户打开首页时，下载首页轮播图片可能需要3-10秒左右，这样导致网站的体验很差，建议网站设计师对这些图片进行处理，前提是保证清晰度的条件下，可把图片处理成jpg的格式，如果处理完的jpg格式图片体积还超过300KB, 建议把图片处理成webp的格式，质量默认为85，一般像700KB的jpg图片，处理成webp图片可能不到200KB，webp图片是谷歌近年来推出的一种图片类型，特点是体积小还不失真，有利于网站上使用。转化webp图片网址：https://pixelied.com/convert/jpg-converter/jpg-to-webp

有时候可能传化不成功，建议换个时间来处理，可能是太多用户使用造成的服务器阻塞；注意的是webp图片在苹果老版手机上显示不了，建议在网页上做个判断，如果webp图片显示不了，可自动切换成jpg图片显示。目前，绝大多数网站服务器都支持webp图片显示，如果您的网站服务器显示不了webp图片，可换成新版服务器，IIS环境在MIME类型中添加，添加方法是：.webp ---> image/webp

或者使用自己写一个把图片转成webp方法到部署到PHP网站上，方法参考链接：https://github.com/echo129X/PHP-ImageToWebp 注意虚机上一般不支持此方法，自建的服务器上才支持此方法。如下图, 这张1920*960图片转化成webp才116KB，原图是846KB

当一个网页上图片很多的时候，特别是列表页面或详情页很长的页面，如果用户打开网页同时下载这些图片，会造成这些图片显示很慢，甚至等很长时间都显示不全。优化网页上很多的图片方法是：首先对每一张图片在不失真的前提下，把这些图片转成jpg格式或webp格式；其次对这些图片进行js懒加载操作，可做一个判断，当一个页面超过10张图片时，执行懒加载操作，比如有个页面有30张图片要展示，前面10张使用自然加载的方式，后面20张图片使用懒加载方式，当页面滑动到第21张图片时，才加载这张图片，以此类推，懒加载大大减轻了客户端对服务器的请求，同时，也提升了网站性能，让用户浏览器网站的体验更高。

总结，当一个网页上的图片很大时，特别是首页的轮播图，可转化成webp图片展示；当一个网页上图片很多时，可使用懒加载的方法，分批来加载图片，来提升网站性能。