手机流量金贵，图片不优化就是在赶客。这个道理很多人懂，但真正做的人不多。
先算一笔账。一张没压缩的照片，可能有三四兆。用户的手机流量套餐就那么点，打开你的页面先扣掉几兆，他心里是不舒服的。而且大图加载慢，页面白屏时间长，用户可能没等图出来就走了。
那怎么优化。第一，压缩。上传之前先压一遍，把质量压到肉眼看不出差别、体积小一大半的程度。工具很多，在线就能做。第二，格式。现在有比 jpg 更高效的格式，比如 webp，体积通常能小两三成，而且主流浏览器都支持了。可以做成新格式优先、老格式兜底。第三，尺寸。别把一张三千像素宽的图用来显示在一张六百像素宽的容器里，那纯粹是浪费。按实际显示尺寸准备图片，需要高清的再用两倍图。第四，懒加载。首屏的图正常加载，非首屏的滚动到再加载。
还有个细节，就是图片的尺寸属性要写清楚。给 img 标签写上宽高的属性，这样浏览器在图片还没加载出来的时候就能预留好位置，避免页面跳动。页面跳动是会影响体验指标的。
替代文字也别忘。alt 属性既是给搜索引擎看的，也是给图片加载失败时显示的。有些站长嫌麻烦不写，其实写一行字的事，收益不小。
我做完图片优化之后，最直观的感受是页面打开变快了，用户停留时间长了。这个改动的性价比很高，动手也不难。
图片是页面里最占流量的东西。把它管好，你的移动端体验就成功了一半。
—— 来自 图趣网 - 优秀网站分类目录 的分享
