图片格式与转换

图片格式繁多，不同的浏览器对图片支持也略有不同，概览表格可以参见MDN 图像文件类型与格式指南。为了最大限度的通用性，网站通常只考虑以下三种图片: png, jpg, gif（未来如果 webp 能大一统基本不做考虑了）。

• png: 优点：无损压缩，质量最好，支持透明背景。缺点：对于色彩丰富的图片容量压缩效果差。推荐场景：有透明背景、颜色简单、对细节质量要求较高的场景。如结构图（架构图、流程图、思维导图等等）、Logo、桌面截图、二维码、条码等等。这些场景绝大多数情况下用 png 会比 jpg 容量更小。

• jpg: 优点：采用有损压缩算法，压缩率较高，支持渐进式加载。缺点：图像细节损失，对于文字可能边缘模糊看不清，不支持透明背景。推荐场景：照片、背景图等总体分辨率较大，对细节要求不高，只关注总体风貌的图片。

• gif: 优点：采用伪色，容量最小，加载最快，这三种格式中唯一支持动图。缺点：色彩细节丢失严重。推荐场景：网站 Logo 图，动图等。

webp

利用阿里云 CDN 边缘脚本实现自适应转换 webp

理论上完全可以在浏览器端添加一个 js，自动判断浏览器是否支持 webp，决定访问 webp 图片或者原图。不过这样在本地的工作量就太大了，每次添加图片还得多转换一个 webp 图片，本地的工作量太大了。我们可以利用阿里云 OSS 的图片转换功能，以及 CDN 的边缘脚本实现浏览器自动使用 webp 图片的功能，本地不作任何处理，不影响原来的开发流程。

m1 = and($http_accept, match_re($http_accept, '.*image\/webp.*'))
m2 = match_re($uri, '.+(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png)$')
uri_is_posts = match_re($uri, '^/posts')

if and(m1, m2) {
    if uri_is_posts {
        rewrite(concat($uri, '!webp_watermark'), 'break')
    } else {
        rewrite(concat($uri, '!webp'), 'break')
    }
}