网页设计常用的图片格局和用法
海南中立科技 | 2011-12-02 00:04:21 | 阅读:15864
网页设计中常用图片的三种格局:GIF,JPEG,PNG。GIFGIF是一种调色板型(palettetype)(或者说是索引型)的图片。它含有多达256种的色彩。每一个象素点都有一个对应的色彩值。由于这种格局不再存在专利权的标题GIF是一种无损压缩的格局,这意味着当你修正并且保留了图片的时候,它的质量不会有任何损耗。GIF格局也支撑动画.在黑暗的web1.0时代,它导致了大批过剩的昙花一现的“新”图片(blinking“new”images),循环的@符号(rotating@signs),birdsdropping,aemail以及其他一些让人厌烦的东西的呈现。在更加文明的web2.0时代,在等候一个更新页面的ajax恳求的时候,我们仍然会看到“loading”动画,但是也有一些比拟讨人爱好的东西,人们爱好把它们放在自己的网络上。不管怎么说,假如你有需要,就可以应用动画支撑。GIF也支撑透明度,透明度的值是一种布尔类型数据。GIF图片里的一个象素要么完整透明,要么完整不透明。JPEGJPEG图片不象GIF图片那样只能有256种色彩,它可以包含数百万种色彩,而且有极高的压缩率。这使得JPEG图片比拟适实用来保留相片。事实上,大多数的相机以jpeg格局保留照片。JPEG是一种有损压缩的格局,这意味着你每次进行编纂的时候都会有质量损耗,所以假如你打算进行多次编纂,那么最好把中间天生的图片换一种格局存储。但是,还有一些不会损耗图片质量的把持,比如说裁剪图片,旋转图片或者修正元信息。元信息包含,比如说,存储在图片文件中的注释。JPEG不支撑透明度。PNGPNG是一种无损压缩的格局,而且它有很多种类。单考虑实际的用处,我们可以把它分为两种:1.PNG82.真彩色PNGPNG8是一种调色板型(palette)图象格局,就象GIF。8代表8位,28,或者256。PNG8,调色板型PNG以及索引型PNG,这些术语都可以互换应用。那么,PNG8比起GIF有哪些优毛病呢?长处:通常文件体积比拟小支撑alpha(可变)透明度不好之处:不支撑动画第二种类型的PNG格局是真彩色PNG。这类图片可以包含百万种色彩,就象JPEG。你有时候会碰见它们以PNG24或PNG32命名。对于PNG8和真彩色PNG,IE7都供给了alpha透明度准确的原生的支撑。对于早期版本的IE浏览器你需要应用css和AlphaImageLoader滤镜来修复全彩色PNG中的透明度标题。在网页设计中,大众最认可的的图片情势是GIF与JPEG格局。但这会使你感到困惑:那我在网站建设中到底应当用GIF格局还是JPEG格局?方便记忆的简易准则:1.在你的电脑上制作的程度情势的条例、按钮以及动画图片,这些图片应当用GIF格局。2.假如图片是扫描的图画或照片时就用JPEG格局。而什么时候用PNG比拟合适呢?固然PNG8应当作为PNG类型文件的首选,由于它的文件体积更小而且在早期版本的IE浏览器中不需要应用特别的css滤镜就能很好地降级,但是在应用的时候仍然有需要留心的处所:1.当PNG8的256种色彩不够用的时候,你可能需要应用全彩色PNG。这种情况应当尽量避免。一方面,假如你想应用成千上万的色彩,那么这种情况下JPEG将会比拟合适,而且能够有更好的压缩率。另一方面,假如色彩数在一千左右,你应当尽量把这种图片转换为PNG8格局,然后看看它是不是看起来还能够接收。很多情况下,当色彩数达到200到1000的时候,人的肉眼就分辨不出来了。当然,这也得看是哪种图片了;通常你可以非常安全地删掉1000种色彩,但是有些时候只是删掉2种色彩,图片的后果就不能让人接收了。不管怎么样,尽可能地把真彩色PNG转换为PNG8和JPEG格局,看看你能不能接收它们的质量和体积。2.图片的大部分象素是半透明的情况。如果图片种只有一小部分是不完整透明的,象缭绕在圆角四周的象素点,那么PNG8的类GIF(GIF-like)降级通常都没有标题。但是假如图片的大部分是半透明的(象视频播放器上的播放按钮),那么你除了应用AlphaImageLoaderhack你可能别无选择。最后,让我们总结一下:1.JPEG格局比拟适实用来存储照片2.GIF格局可以用来做动画3.PNG8可以用来做小图标(icons),按钮,背景等等。