网页加载慢，很多时候问题出在图片上。一张没处理过的高清大图，体积可能比整页文字加起来还大，而页面体积又是影响加载速度的主要因素。既然图片占了大头，格式的选择就不只是技术细节，它直接关系到用户体验。
几种传统格式各自的短板
网页上长期使用三种图片格式，各有存在多年的局限：一种色彩数量有限，透明边缘也比较粗糙，文件却不见得小；一种擅长照片类的有损压缩，但不支持透明，在纯色区域容易留下压缩痕迹；还有一种能实现干净的透明，但采用无损压缩，体积往往偏大。于是常见的情况是，为同一个页面准备三种格式——照片用一种，带透明的标志用一种，小动画再用一种。
WebP 的不同之处
WebP 的出发点是把这几件事合到一个格式里：它既可以做有损压缩，也可以做无损压缩；支持平滑的透明通道；还能做成动图，色彩比早先的动图格式丰富得多。在画质接近的情况下，它的体积通常明显小于同类的传统格式。
对设计来说，这意味着不必再为了控制体积而牺牲画面：更大尺寸的背景图、多图轮播、高质量产品图集，都可以更从容地使用。
它在响应式设计里的价值
同一个页面在不同屏幕、不同分辨率下，往往需要不同尺寸的图片版本。多个版本叠加起来，体积差距会被进一步放大。体积更小的格式在这里的作用更明显——尤其是对移动端用户，能省下可观的流量与时间。
兼容性怎么处理
格式有了，旧环境怎么办？常见做法有两类。
在页面上提供回退。利用标记语言的支持，让浏览器在支持时加载新格式、不支持时自动改用传统格式，访客对此无感。
在服务端自动转换。由服务器或图片服务根据来访设备的支持情况，实时给出合适的格式。对内容维护者来说几乎是透明的，不必为每种格式单独准备。
采用时的几点建议
- 新站点或改版时，把这类格式设为图片的默认输出，传统格式作为回退保留。
- 照片类内容用有损压缩；图标、标志这类需要锐利边缘和透明的图形，用无损或高质量输出。
- 上传前按实际展示宽度控制尺寸，不要直接把原图丢上去。
- 保留原有传统格式的副本，以应对个别不支持的环境和必要的存档。
一句提醒
格式只是优化的一环。尺寸是否合适、替代文字写得对不对、是否做了延迟加载，同样影响最终效果。换一个更高效的格式，不会自动解决其他问题。