选取恰当的图片格式压缩项目大小,增强性能。特别是移动端项目,尽量小,加载速度快,需要流量少。
1.一般背景使用jpg图,jpg为最小图片格式,如果要保持图片背景为透明色,那么使用格式为png格式。
2.能不使用图片的时候尽量不使用图片,使用渐变,阴影,圆角,字体集等模拟不常见的字体(一张普通的图片比一般的库都大许多)。辅助技术CSS动画,CSS效果,网络字体。
3.选取恰当的图片格式
图片格式 |
压缩方式 |
透明度 |
动画 |
浏览器兼容性 |
适用场景 |
JPEG |
有损压缩 |
不支持 |
不支持 |
所有 |
复杂颜色及形状,尤其照片 |
GIF |
无损压缩 |
支持 |
支持 |
所有 |
简单颜色,动画 |
PNG |
无损压缩 |
支持 |
不支持 |
所有 |
需要透明时 |
APNG |
无损压缩 |
支持 |
支持 |
Firefox,Safari, |
需要半透明效果的动画 |
WEBP |
有损压缩 |
支持 |
支持 |
Chrome,opera |
复杂颜色及形状,浏览器平台可预知 |
SVG |
无损压缩 |
支持 |
支持 |
IE8以上所有 |
简单图形需要良好的放缩体验,需要动态控制图片特效 |