注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】png8 以及 png24/32 透明度支持程度对比  

2015-01-04 08:10:40|  分类: 相关技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
        对png图片的多种形式一直局限于IE6浏览器仅支持png8的透明显示,png24的图片质量高等十分有限的认知。在考虑到图片效果的情况下,还是大量的在使用png24格式图片,对于图片压缩方面并没有太多的研究,但事实上,每张图片的大小减小5k,对网页浏览都是做出了巨大的贡献。
        开始工作之后,才开始接触Fireworks,之前一直在使用PS处理图片,才发现虽然PhotoShop在其他方面是十分优秀的,但是利用FW能够更好的进行图片格式的压缩和保存。我们一直认为PS能够将图片保存成8位和24位的格式,但是它能够处理8位图片的能力实在有限,而所谓24位的图片其实是32位的图片,因此往往得不到我们想要的图片效果和大小,在一定程度上PS误导了我们。
        由于对FW的操作还不是很熟悉,现在的流程变成了用PS切图,之后用FW对图片进行处理,这才用到项目中。对于还没有接触过FW只用过PS的前端,我认为有必要了解一下,经过FW压缩过的图片有立竿见影的效果。

        一直以为png8代表的就是粗糙和毛边,现在认识到自己所知道的还是太少了,很多时候不需要png24那么高的图片质量的时候,用png8其实是可以完美解决的。
        png8/24/32指的是支持显示的颜色,2的8/24/32次幂,明显数字越大支持的颜色的种类越多。
        png8
        png8最多支持256种颜色,支持不透明、索引色透明及Alpha透明。索引色透明只可以简单的指定一个像素点是不是透明,而Alpha透明则可指定该像素点的透明的程度。所以其实,png8是支持半透明显示的,只是半透明在IE6浏览器下显示为全透明,在其他浏览器中能够正常显示,但即使如此,这个问题还是能够通过JS解决。
        常用PS处理图片会发现保存为png8格式时有一个很大的问题,那就是毛边的问题,如果放在底色为白色的背景上可能看不出来,但往往背景色不是白色的时候,就会看到一圈很毛躁的白边,非常影响网页的视觉效果。对于这个问题,有2个解决方法。
        第一个方法是当时在网上找到的一个很睿智的方法,原理很简单,就是将毛边的颜色处理成跟背景色一样的颜色,但是这个方法只适用于底色为纯色的情况下,比较局限。
png8 以及 png24/32 透明度支持程度对比 - 艾某人 - 艾某人
 
        第二个方法是利用FW进行处理,将图片存储为png8的Alpha透明的格式,可以很明显的发现毛边不见了,弊端就是IE6又不支持了。
        现在的工作主要是基于移动端的开发,对于图片的压缩要求比较高,常将有透明背景要求的图片保存为png8格式,采用Alpha通道,利用FW汇出之后图片的大小从几十k变成几k,大大减小了图片大小,又不影响图片的视觉。
        png24
        “支持2的24次方种颜色,表现为不透明。” png24相对于png8支持的颜色丰富,但是必须辟谣的是,png24并不支持半透明。
        经常用PS将图片保存为png24的图片很明显是支持半透明的,但那只是PS给我们的一个错误信息,其实我们最终的到的是png32图片。
        png32
        png32是在png24的基础上,增加了8位的透明信息,支持不同程度的半透明效果。但我们的经典浏览器IE6对png32的透明显示并不支持。

PS:本文主要推荐FireWorks和png8格式,有必要对png8加深了解,它的优势可能很多时候都是被忽略的。
--艾某人    
学习交流------梦幻雪冰
  评论这张
 
阅读(34)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017