浅谈网页设计中图片格式的选择

          阅读(67)

    浅谈网页设计中图片格式的选择

    在网页设计中,常用的图片格式有JPEG、PNG、GOF等。不同格式的图片有着不同的性质特点,在显示效果与用途方面也有着各自的区别。那么,在什么情况下,使用什么格式的图片才能达到最佳的显示效果呢?下面,我们围绕这个问题简单谈谈。

    要评测一种格式的好坏,不能只着眼于它的某个特性,而要从多方面考虑。因为每一种格式的图片都有他的优劣势,不然干嘛要衍生出那么多格式呢,只要一种不就好了嘛。

    这里我们主要从以下方面作评定:文件大小、色彩范围、各自特性

    JPEG

    JPEG,扩展名为.jpg或.jpeg。它是最常用的图像文件格式,被广泛地应用于网页设计。JPEG格式采用有损压缩方式来压缩图像文件,以牺牲部分图像信息来达到较大的压缩比。压缩比越大,生成后的图像文件越小,相应地质量也会越差。因此,就需要你在图片质量和文件大小间权衡了。一般来说,以损失较少的细节信息来换取较大程度的压缩还是非常值得的。此外,JPEG格式支持24位真彩色,对色彩信息的保留较好,普遍应用于带连续色调的图像。(比如:风景照)但是,美中不足的是,JPEG不支持alpha通道。(即不支持透明)

    PNG

    PNG,扩展名为.png。PNG采用无损压缩的方式来压缩图像文件,可以保留所有与图像品质有关信息,但是生成的文件比较大。PNG格式支持48位超强色彩范围,图像色彩信息较多。值得一提的是,PNG支持alpha通道,可以保留透明色。这样一来,可以让网页中的元素分层重叠,更好地贴合在一起。让博主最欣赏的一点是,它具备交错。什么是交错呢?就是当用户在浏览页面时,浏览器会先加载1/64的图像信息,显示 出低分辨率下的预览图,用户就可以猜出个大概了。而后,浏览器再会将余下的图像信息加载,显示出完整的高分辨率图片。网速不好的用户刷新页面时,背景图片并不会很快显示,取而代之的是一片空白,而后背景图片才由上而下一行行龟速显示。宝宝看着心累啊!而换用PNG格式呢,虽说一开始背景是模糊一片,但好歹有颜色啊,总比空白来的强。

    GIF

    GIF,扩展名为.gif。GIF采用的也是无损压缩。但是不要因为是无损压缩就觉得文件大,色彩质量很好。其实,GIF只支持8位色彩(256色),这就决定了它文件大不到哪儿去,色彩质量也好不到哪去。大梅沙对于那些大色块图像(准确地说,应该称为图形),GIF还是绰绰有余了。随便说下,GIF还支持透明,支持交错。好,谈到GIF的特性,各位应该不陌生。对,就是逐帧动画,俗称“动图”。可以用它制作动态表情包等……GIF文件中存储着动画的播放延迟时间、播放顺序等动画参数,因此可以通过浏览器直接播放,而不需要额外的插件支持(swf需要)。所以,如果你想给页面一个动态效果,GIF是最好的选择。

    综上所述,做了如下总结:

    JPEG:适合文章配图,质量要求不高的图片作品

    PNG:适合背景、头部banner图片、透明元素、质量要求高的图片

    GIF:适合动画、大色块图像

    表格对比:

    文件大小 ? ? ? ? ? 色彩范围 ? ? ? ? ? ?是否支持透明 ? ? ? ?是否支持交错 ? ? ? ?是否支持动画

    JPEG ? ? ? ? ? 小 ? ? ? ? ? ? ? ? ? ? ?24位 ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

    PNG ? ? ? ? ? ? 大 ? ? ? ? ? ? ? ? ? ? ?48位 ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ???? ? ? ? ? ? ? ? ? ? ? ? ? ?

    GIF ? ? ? ? ? ? ? 中 ? ? ? ? ? ? ? ? ? ? ?8位 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???? ? ? ? ? ? ? ? ? ? ? ? ???? ? ? ? ? ? ? ? ? ? ? ? ???

    2016.12.13 9:00 ? ? ? 作于澄中G307号狱室

    2016-12-18 00:16:17 ? ? 码于温暖的家,with coffee


    喜欢 0



还没有人抢沙发呢~

加载中……