图片格式与转换
图片格式与转换
图片格式繁多,不同的浏览器对图片支持也略有不同,概览表格可以参见
-
png: 优点:无损压缩,质量最好,支持透明背景。缺点:对于色彩丰富的图片容量压缩效果差。推荐场景:有透明背景、颜色简单、对细节质量要求较高的场景。如结构图(架构图、流程图、思维导图等等) 、Logo、桌面截图、二维码、条码等等。这些场景绝大多数情况下用png 会比jpg 容量更小。 -
jpg: 优点:采用有损压缩算法,压缩率较高,支持渐进式加载。缺点:图像细节损失,对于文字可能边缘模糊看不清,不支持透明背景。推荐场景:照片、背景图等总体分辨率较大,对细节要求不高,只关注总体风貌的图片。 -
gif: 优点:采用伪色,容量最小,加载最快,这三种格式中唯一支持动图。缺点:色彩细节丢失严重。推荐场景:网站Logo 图,动图等。
webp
利用阿里云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')
}
}