图片

png8/png24/png32之间区别

• png8   ----  256色   + 支持透明      较小

• png24 ----  2^24色 + 不支持透明  较大

• png32 ----  2^24色 + 支持透明      

使用时可根据 文件大小 、色彩丰富度去使用，每种图片都有特点，针对不同的业务场景选择不同的图片格式很重要

 

不同格式图片常用的业务场景

• jpg 有损压缩，压缩率，高不支持透明 --- 大部分不需要透明图片的业务场景

• png 支持透明，浏览器兼容好 --- 大部分需要透明图片的业务场景

• webp 压缩程度更好，在ios webview有兼容问题（2010年谷歌提出的，在安卓中可以很好的的应用）---  安卓全部

•  svg 矢量图，代码内嵌，相对较小，图片样式相对简单的场景 --- 图片样式相对简单的场景，logo、icon等

 

图片压缩

CSS雪碧图（很多场景已经不用，移动端用的很少）：将网站图片整合到一张单独的图片中，减少网站HTTP请求数量，缺点加载时此图片很大，加载慢，没加载出来时,很多图片空白。pc用的多些

image inline : 把图片内容内嵌到 HTML中（base64格式） ，减少网站HTTP请求数量 <img src="data:image/png;base64...." />

矢量图： 使用SVG绘制、使用iconfont 解决 icon 问题

安卓下使用webp: jpeg和png转化成webp很稳定、统一。 构建工具fis插件 、 http://zhitu.isux.us

 

 

 

在此做个笔记，如有侵权，请联系我，立刻删除