仓库地址：bj-front: 前端性能与工程化 - Gitee.com

图像通常是网站负载的最大组成部分。互联网中的图像除了提供视觉体验，还需提供设备需要的合适的图像，选择合适的图像的格式，并针对图片做适当的优化，有利于提升页面的性能。

创建文件夹four，该章节实验放置到four中

（1）在four中创建文件夹changeimg，在该文件夹中初始化项目，将提供的图片素材复制到该文件夹下，安装npm i -g cwebp-cli，然后在当前目录下执行cwebp命令，观察执行后，当前目录文件格式变化。并新建一个网页，页面中插入图片，使用Lighthouse检验，页面中使用jpeg图片与webp图片时，优化建议的变化。

（2）在four中创建文件夹changesize，在该文件夹中初始化项目，将提供的图片素材复制到该文件夹下，安装 ImageMagic 工具，sudo yum install -y ImageMagick ，调整图片 flower_logo.png 的尺寸，convert flower_logo.png -resize 50x50 flower_logo_50x50.png，将页面中图片替换为生成的图片，使用Lighthouse检验，优化建议的变化。

（3）在four中创建文件夹setresponsive，在页面结构中使用媒体查询以及img srcset来实现响应式图片，用 Lighthouse 对网站 wd07 做桌面性能评测，查看优化前后，优化建议的变化。

（4）使用提供素材页面layload.html页面体验懒加载过程，给除了首屏以外的图片添加loading='lazy'，在页面下拉过程中，观察页面请求变化过程。

（5）现有给定文件素材，将img/icon-images的图标图片生成为sprite图，需要安装模块svg-sprite，然后执行对应指令svg-sprite --css --css-render-css --css-example --dest=out2 img/icon-images/*.svg，观察生成的文件目录，并正确使用。

（6）阅读懒加载案例代码，搞清楚懒加载的实现机制与实现过程。