东莞的站长朋友们，上一期我们讲了基础的图片压缩，这次来聊点进阶的图片优化技巧。如果你的网站图片特别多或者特别大，这些方法能帮你更进一步地提升速度。
WebP格式
WebP是Google推出的一种图片格式，同样画质下比JPEG小25%-35%，比PNG小26%。也就是说你什么都不用做只是把图片格式换成WebP，页面就能瘦一圈。
兼容性方面，现代浏览器都支持WebP了，只有一些老旧的IE和早期Safari不支持。解决方法是准备JPEG作为fallback，用``标签让浏览器自动选择支持的格式。
南城有家做家居电商的网站，把所有产品图都转成了WebP格式后，首页加载大小从4.2MB降到了2.8MB，加载速度快了将近40%。
响应式图片
同一个产品图，在手机上显示只需要300px宽，但在电脑上可能需要1200px。如果你对所有设备都发送1200px的图片，手机用户就白白浪费了大量的带宽。
HTML5提供了`srcset`和`sizes`属性来解决这个問題。你准备同一张图片的不同尺寸版本，浏览器根据屏幕宽度自动选择最合适的。这对图片多的网站效果尤其明显。
图片懒加载
懒加载的意思是图片只有滚动到可视区域的时候才开始加载。如果一个页面有二十张图片，用户可能只看前五张就走了，那后面十五张就没必要加载。
实现懒加载很简单，有很多现成的JavaScript库可以用，比如lazysizes、lozad.js。只需要把`src`换成`data-src`，引入库就行了。
大朗有家做服装的网站，产品列表页每个分类有四五十个商品图。做了懒加载之后首屏加载时间从4秒降到了1.5秒，用户体验提升非常大。
总结
总结： 图片优化是个可以持续深挖的话题。东莞的站长们，先把基础的压缩做了，然后再考虑这些进阶技巧。每一步都能让你的网站更快一点。