[size=x-large]PNG8和PNG24的区别[/size]
[size=large]内容图片的大小的优化,告诉大家一个比较简单的方法,就是使用雅虎提供的一个工具。他就是[color=red]smushit:[/color][url]http://www.smushit.com/[/url][/size]
[size=medium]今天我做了一个图,因为需要透明,所以我存为了PNG8格式,结果发现图片变了,图片变得四周都
不光滑了,四周都变得有锯齿了,而且阴影也不见了,后来存为PNG24,这些问题就消失了。
我去百度搜索了关于PNG8和PNG24的区别,看到下面的文章,原来PNG8要么完全透明,要么完全不透
明,不支持半透明,所以才会出现上面的问题,但PNG24支持半透明的。
详细请看以下文章,希望能帮到您哦,呵呵
一直在png图片透明这块,模糊着,虽然XXX,就是因为懒没有认真测试测试。今天看到同事要做一个这样的效果时,发现得弄弄了,于是去新浪微博看下它logo的实现时,遇到这个问题(想知道它用的什么格式的png图)。
首先先做下比较,因为估计做前端的人和我一样知道最多的就是png是一种包含半透明格式的图片。其实我们还要知道:
1.png8和png24的根本区别,不是颜色位的区别,而是存储方式不同。
2.png8有1位的布尔透明通道(要么完全透明,要么完全不透明),png24则有8位(256阶)的布尔透明通道(所谓半透明)。
png-8 和 gif 有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。
我们通常说的“IE6 不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持 gif 的透明一样。
[color=red]这样我们在工作中就有了方向:[/color]
1.色彩丰富的、大的图片切成jpg的;
2.尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的;
3.半透明的切成png24。
[color=red]回到本文开头的问题,如何区别(最简单的2种办法):[/color]
1.在ps里看图像---模式,png8当然只有8位/通道了。
2.当打开png8的图片时,ps会默认给它的图片标题上加上“索引”两字,png24的则没有。
[color=red]最后说下png透明ie6下的解决问题:[/color]
因为懒原来只搜集了办法,没实践,发现看起来很不好,周末好好测试一番,总结一下。
新浪微博的logo(png24)采用了下面的方法来实现透明:
[color=green]_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='crop');[/color]但是测试发现当给background:red url(logo.png) no-repeat center;加了红色时,别的浏览器正常识别,ie6会出现依旧不识别的情况。
解决办法是在外面套的标签,或body加背景色,其他办法等周末细弄吧。(background-color:red;单独写就可以了)[/size]
[size=large]内容图片的大小的优化,告诉大家一个比较简单的方法,就是使用雅虎提供的一个工具。他就是[color=red]smushit:[/color][url]http://www.smushit.com/[/url][/size]
[size=medium]今天我做了一个图,因为需要透明,所以我存为了PNG8格式,结果发现图片变了,图片变得四周都
不光滑了,四周都变得有锯齿了,而且阴影也不见了,后来存为PNG24,这些问题就消失了。
我去百度搜索了关于PNG8和PNG24的区别,看到下面的文章,原来PNG8要么完全透明,要么完全不透
明,不支持半透明,所以才会出现上面的问题,但PNG24支持半透明的。
详细请看以下文章,希望能帮到您哦,呵呵
一直在png图片透明这块,模糊着,虽然XXX,就是因为懒没有认真测试测试。今天看到同事要做一个这样的效果时,发现得弄弄了,于是去新浪微博看下它logo的实现时,遇到这个问题(想知道它用的什么格式的png图)。
首先先做下比较,因为估计做前端的人和我一样知道最多的就是png是一种包含半透明格式的图片。其实我们还要知道:
1.png8和png24的根本区别,不是颜色位的区别,而是存储方式不同。
2.png8有1位的布尔透明通道(要么完全透明,要么完全不透明),png24则有8位(256阶)的布尔透明通道(所谓半透明)。
png-8 和 gif 有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。
我们通常说的“IE6 不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持 gif 的透明一样。
[color=red]这样我们在工作中就有了方向:[/color]
1.色彩丰富的、大的图片切成jpg的;
2.尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的;
3.半透明的切成png24。
[color=red]回到本文开头的问题,如何区别(最简单的2种办法):[/color]
1.在ps里看图像---模式,png8当然只有8位/通道了。
2.当打开png8的图片时,ps会默认给它的图片标题上加上“索引”两字,png24的则没有。
[color=red]最后说下png透明ie6下的解决问题:[/color]
因为懒原来只搜集了办法,没实践,发现看起来很不好,周末好好测试一番,总结一下。
新浪微博的logo(png24)采用了下面的方法来实现透明:
[color=green]_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='crop');[/color]但是测试发现当给background:red url(logo.png) no-repeat center;加了红色时,别的浏览器正常识别,ie6会出现依旧不识别的情况。
解决办法是在外面套的标签,或body加背景色,其他办法等周末细弄吧。(background-color:red;单独写就可以了)[/size]