图片类型
字数统计：1.3k字目录
转： 页面优化小总结 （图片类型）
图片有很多的格式，包括PNG、JPEG、JPG、BMP、GIF等，下面我们就详细的说一下这几张图片的格式，并进行详细的对比。
图片加载方法
src background url
图片的压缩方式（有损压缩和无损压缩）
常见的图片类型：
JPEG
有损压缩，不支持透明，不支持动画；
可以通过压缩控制图片的大小；
常用压缩比例60%~80%；
适用于存储摄影，写实图像；
不适用于有文字及线条的图片压缩；
GIF
最多支持 8 位 256 色，色阶过渡不好，图片具有颗粒感 不支持 Alpha 透明通道，边缘有杂边
无损压缩，支持全透明，支持动画；
8位图片格式，最多支持256色；
隔行扫描，加载较快；
适用于颜色不太复杂的图片，如Logo,icon图标；
PNG
PNG可分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。
关于透明：
PNG8支持索引透明和alpha透明，体积小，用的比较多
PNG24不支持透明;
而PNG32在24位的PNG基础上增加了8位的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。
PNG的特性：
无损压缩；
存储灰度图像时，深度可多到16位；
存储彩色图像时，深度可多到48位；
并且可以存储多到16位的α通道数据；
对于复杂的图像，png图片文件较大，不适用用web网页；
WebP
WebP是一种支持有损压缩和无损压缩的图片文件格式，支持动画和透明度，根据Google的测试，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积，大大减少了页面的加载时间。
SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比，使用 SVG 的优势在于：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
PSD
雪碧图
将许多的小图标合并到一张图片上，请求一张图片，通过截取获取图标； 减少HTTP请求次数，提高页面加载速度
优点：
减少图片的字节 减少了 http 请求，从而大大的提高了页面的性能
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
建议： 不建议大图片合并 建议类似图片合并
base64
以“data:image/png;base64”开头的字符串代理src的url
优点：减少网络请求；
缺点：生成的字符串的体积可能大于原来的图片，造成CSS体积增大，可读性变差，兼容性较差，IE8以下不兼容，IE8以上限制了URL的大小；
对于极小或者极简单的图片，例如只有几像素的图片不用考虑跨域问题不想页面的图片缓存，可以用base64编码
iconfont
Iconfont 指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。
优点：
加载文件体积小。 减少 http 请求。 可以直接通过 css 的 font-size，color 修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案。 支持一些 css3 对文字的效果，例如：阴影、旋转、透明度。 兼容低版本浏览器。
图片使用
说着这么多的图片类型，我们在项目开发中，如何基于性能和用户体验的权衡来选择合适的图片类型呢？ 如果是颜色丰富的图片，jpg 是通用的选择。 如果是较通用的动画，gif 是唯一可用的选择。 如果需要清晰的显示颜色丰富的图片，png 是比较好的选择。 如果是企业级应用（不考虑兼容性），可以选择 webp。
