zoukankan      html  css  js  c++  java
  • 图片格式知多少

      相信png、jpg、gif这些格式大家都能大概的了解和清楚一些使用,这里就不再细说,这里说一些使用中注意的事项或是大家不够深入了解的东西。

      png:png有多个不同的位数的格式:png8、png24、png32。前端的新同学们常常遇到的就是png在IE6中不透明,其实IE6是支持PNG透明的,不过只支持png8的透明而已,具体可以看我的页面中图标,就是用了png8的透明,但是png8下不支持半透明,所以顶部的这个有背景色的时候用了png32配合JS处理了一下透明效果,不然有白白的边在IE6里太难看了。png8和gif都支持全透明和256色,所以在正常情况下两者是可以互换的,两者输出的大小也差不多,甚至png8比gif更有优势,但png8不能像gif那样做成动画。

      而png24和png32也有一些不同。png24在png8的基础上增加了颜色的支持数,但是没有透明信息,png32在png24的基础上增加了透明的信息。Firework和Photoshop虽然同为Adobe公司的产品,但是输出的时候也是有些不太一致的。Firework能够正常的输出各种规格的png,但Photoshop不支持8位png+alpha透明的格式,而且Photoshop中也没有32位png选项,其中的png24+透明实际上就是 png32(不信你可以尝试用Photoshop输出一个png24+透明的png再到Firework中看看就知道了),如果要IE6支持png32的透明,就只能用别的方法了,而我采用了js的方法,用法可见《IE6下PNG图像透明完美解决方案》(其实标题应该改成“IE6下PNG32图像透明完美解决方案”)。

      gif:gif和png8一样,都是只支持256色,模式都是索引颜色,但gif比png一个较大的优势是可以将图片做成动画,而png8不能(现在最新版的png标准是支持一个文件内存放多个图像的,也就是说同样可以做动画的)。

      现在还有一些更非常规的图片的用法,大家可以看到google的404页面(点击打开Google的404页面),将图片进行base64编码再放到css中(当然IE6、7是无法正常解析的,嘿嘿)。

      这种data: URI的格式能把base64(或其他数据)内嵌在image标签的属性当中(或者CSS中或JavaScript中),通过对图片进行base64编码,可以实现将图片直接嵌入代码中的目的,如此一来,可以减少HTTP请求,这对于提升Web性能很有好处。对于较小的图片,采用这样处理是非常实用的,但是IE6/7不能支持这种方法,因此可以在IE6/7中采用传统的方法,而在其他浏览器中使用这样的方法来进行全面的兼容。

      这种做法有利有弊,好处是可以减少HTTP请求,不好的地方是图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形、小图标等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片等则不应该使用base64编码了,以免影响图像下载的时间。

      但这种图像的处理也需要另外的软件,所以不熟悉的情况下操作起来也有一定的困难,这里有一个在线版的转换工具,有兴趣的大家可以试试,尝尝鲜:点击打开

      当然这些都是更深一点的应用了,我也在学习当中,无法再作更深入的论述了,大家可以自行进行扩展。当然,我也乐于分享你们的观点。

  • 相关阅读:
    xtu summer individual 6 B
    Docker和宿主机操作系统文件目录互相隔离的实现原理
    SAP成都研究院飞机哥: SAP C4C中国本地化之微信聊天机器人的集成
    C4C销售订单行项目价格维护方法
    Jerry Wang诚邀广大SAP同仁免费加入我的知识星球,共同探讨SAP技术问题
    为什么CRM Opportunity的删除会触发一个通向BW系统的RFC
    如何用代码填充S/4HANA销售订单行项目的数量字段
    SAP成都研究院大卫哥:SAP C4C中国本地化之微信小程序集成
    如何获得C4C里某个code字段对应的描述信息
    如何用代码的方式取出SAP C4C销售订单创建后所有业务伙伴的数据
  • 原文地址:https://www.cnblogs.com/happy1992/p/7063778.html
Copyright © 2011-2022 走看看