前端开发之初探五

1、图片格式

1）jpg：有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

3）png：有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;

4）webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，webp格式图像的体积要比JPEG格式图像小40%

5）apng：是一个基于PNG（Portable Network Graphics）的位图动画格式,Ios8已经支持，效果要比 gif 好。

6）svg：矢量图形，SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。

7）bmp：无损压缩，图质好，文件太大，不利于网络传输

8）bpg：相比JPEG，它采用更高的压缩算法，在相同图像质量下，BPG文件大小只有JPEG的一半，或者说在相同体积文件下，BPG拥有更好的素质表现。另外BPG还原生支持8位和16位通道等等。

 

图片整合的优势：

1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。

2）通过整合图片来减小图片的体积。

 

2、iconfont 

线上工具：fontello、fontawesome、icomoon.io、iconfont.cn

3、css 重置

neat.css

normalize.css

Neat.css 是基于normalize的全新的 CSS Reset，兼容 IE 6+ 以及其他现代浏览器。

normalize的核心理念是不盲目重置为0，让元素拥有统一的默认间距，大小等表现。但针对国内大部分网站不是纯文字排版，Neat.css 选择回归「有即是无，无即是有」的理念，把大部分标签的默认margin，padding 均重置为 0。如果你需要对大面积文字或者文档快速美化，推荐单独引入专门针对汉字排版的type.css。

Neat.css 解决的问题

　　解决Bug，特别是低级浏览器的常见Bug。

　　统一效果，但不盲目追求重置为0。

　　向后兼容。

　　考虑响应式。

　　考虑移动设备。