前端开发之初探五

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 选择回归「有即是无,无即是有」的理念,把大部分标签的默认marginpadding 均重置为 0。如果你需要对大面积文字或者文档快速美化,推荐单独引入专门针对汉字排版的type.css。

Neat.css 解决的问题

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

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

  向后兼容。

  考虑响应式。

  考虑移动设备。

猜你喜欢

转载自www.cnblogs.com/wmwPro/p/9093030.html
今日推荐