秋刀鱼设计

团队专业网站建设、品牌产品推广服务

@helosh12年前

2011/05/15
18:36 星期日
代码猿

GIF图片与JPG的区别,PNG背景透明解决办法。

网页设计中,保证图片清晰的前提下,图片越小越好。因为这样可以减少带宽占用,加快网页打开速度。尤其对于门户网站和访问量很高的网站,如果图片 都能比原来小10K的话,那么节省的带宽相当明显。那么就要求设计师在制作或生成图像时,选择合适的格式和质量,尽量把图片体积压缩的更小。下面就网上常 用的两种格式gif和jpg该如何选择阐述下本人的看法。
何时选择gif格式?何时选择jpg格式?
对于gif和jpg格式的选择,没有固定的限制,但要把握好一点。图片色彩单一、由色块或文字组成,较少渐变色的尽量采用gif格式,这样可以 减少很大体积;当图片色彩丰富,过渡色较多时建议采用jpg,下面看看两个例子。

GIF与JPG图片的区别在哪里

JPG与GIF图片的不同之处


看看本站的logo,同样尺寸的图片,保存成gif格式要比jpg格式小多了,把图片放大时会发现jpg格式会产生噪点,质量还不如gif,那 当然要选择gif了,因为这个logo色彩非常单一。

看看上边这两张图片,从百度上搜索后截取了一部分,同时保存成两种格式,左边的是gif格式,右边的是jpg格式。从图片的属性看,gif格式 大小为63.1KB,jpg格式大小为46.4KB,如果质量要求不高的话还可以再压缩。但从目前就可以明显看出,jpg格式要比gif清晰多了,gif 格式自动把相似色彩改变成一种色彩,这也是上个例子中gif格式不产生噪点的原因。
通过这两个例子,相信你对网页设计中选择gif格式和jpg格式有所了解了吧,不过在实际应用当中,建议保存成两种格式,多对比,慢慢就会发现 什么时候该用gif,什么时候该用jpg了。
如果PNG图片中含有透明部分,那么透明部分的显示就不正常了。
解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。

方法一:

1
<div style="filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png);width:200px;height:50px"></div>

点评:这种方法虽然较好的解决了IE 5+的浏览器,但却得本来能正常显示透明PNG图片的FireFox无法正常显示!

方法二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
// PNG纠正控件 1.0 For IE 5.5或更高.
// 作者:舜子
function isIE(){
if (navigator.appName!="Microsoft Internet Explorer" {return false}
return true
}
function correctPNG() 
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
var LW=img.width
var LH=img.height
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "NG"
{ 
img.style.filter+="progidXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale);" 
img.src="/images/transparent.gif"//transparent.gif为1px*1px的透明gif图片
img.width=LW
img.height=LH
}
}
}
if (isIE()) {window.attachEvent("onload", correctPNG);}
</script>

点评:这种方法确实能解决这个问题,但是如果不是在本地调试,通常需要一段时间的转换!

方法三:

1
2
3
4
5
6
7
8
9
<div id="header"><!--此DIV为需要插入PNG图片的区域-->
<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer" {
document.write("<img src="/images/header.png" width="200" height="50" alt="helosh.com" />";
} else {
document.write("<img style="filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;" src="{$rootpath}/images/transparent.gif" width="200" height="50" alt="helosh.com" />";
}
</script>
<div>

点评:事实上网页中绝对需要使用透明PNG图片的地方并不多,所以如果你的网页中仅仅是一两处使用透明PNG图片,建议用这种方法。
如果浏览者禁用了js,方法二和三当然失去了作用。针对方法三,可以做一些完善:

1
2
3
4
5
6
7
8
9
10
<div id="header">
<div id="Index_header">图片简要说明,正常浏览本站请不要禁用js</div>
<div>
<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById('logo').innerHTML="<img src="/images/header.png" width="200" height="50" alt="helosh.com" />"
} else {
document.getElementById('logo').innerHTML="<img style="filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;" src="/images/transparent.gif" width="200" height="50" alt="helosh.com" />"
}
</script>

GIF图片与JPG的区别,PNG背景透明解决办法。