从上面介绍的JPEG的特性来看,它更适合用来存储具有丰富色彩层次的摄影或写实照片。这是因为色彩层次丰富的图像一般会由于阴影、反光或透视等效果形成明暗、深浅不同的区域,如果我们选择使用PNG8来储存的话,可能一些颜色在调色板上找不到,导致图像上一些数据的丢失,如果使用PNG24的话,它确实可以查找到图像不同层次的颜色,但它会因数据较多增大图片的体积,严重拖慢加载速度,在网站上也容易显示不全。所以,JPEG是最好的选择,它能在尽量压缩文件大小的情况下较好的还原图片的品质(见下图)。为什么这里不使用SVG呢?SVG有自身的局限性,由于它是点和线精准计算的,一些位图如摄影元素SVG无法实现合适的缩放。
什么时候应该使用PNG? 对于一些相对简单的图像来说,使用PNG格式进行保存更加适合。以下图为例,我们可以清晰的看出使用JPG格式完全不压缩图像时文件的大小是使用PNG格式的5倍多,就算是以45%的程度进行压缩,文件仍是比PNG格式的大,而且图像还出现了失真的问题。相对而言,PNG格式能在保存很少色彩的情况高度还原这个图像。现在用户平均等待网页加载的时间只有1-3秒,加载速度(受文件大小影响)很大程度上决定了网站的流量,尤其是在移动设备上,使用PNG就可以解决这一问题。另外,在网站需要使用透明背景图片时,PNG格式也是比较好的选择。
什么时候使用SVG? SVG主要用来显示矢量图,例如一些形状、线和点的组合,所以目前很多主流的图标库都提供SVG格式的文件。在做网站时我们经常会遇到这样一个问题:是否使用的图片要为高分辨率的浏览器做一些特别的设置?其实,这个问题的答案取决于你的目标访客以及他们的浏览需求,毕竟用户为先嘛。如果希望自己的网站可以很好的适应不同的屏幕分辨率时,使用SVG格式会方便得多。前面小飞也介绍过,SVG是可以完美适用任何屏幕尺寸还不有损图片质量的矢量格式,占服务器的空间也很小。另外,如果你想要在网站中应用悬浮效果或微妙的动画,SVG也是比较好的选择,因为它可以作为代码输出,,使用CSS或Javascript进行编辑。其实SVG也可以包含位图(也就是GIT、PNG或者JPEG),还可以被用来做JS控制的动画。在HTML5的时代,SVG的用途将会越来越广泛。
总而言之,如果网站中需要使用位图(更易模仿照片的真实效果,表现力强),可以根据不同的情况选择,如不要求透明度使用JPEG,支持透明背景图像使用PNG;如果想要使用矢量图(适应任意分辨率而不失真),使用SVG格式!由于SVG这一特点,不少人认为SVG格式和响应式网站更配哦,但这并不意味着网站中不能使用位图。你怎么看?欢迎踊跃留言。快来起飞页自助建站平台(?t_wd=a5)做一个网站吧! (责任编辑:admin) |