精华内容
下载资源
问答
  • 几种常见图片格式优缺点分析

    千次阅读 2017-11-17 14:04:22
    PNG是一比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8还支持透明度的调节,而GIF并不...

    有损vs无损

    图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种。

    有损压缩。指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不可逆的,我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段,是按照一定的算法将临近的像素点进行合并。

    无损压缩。只在压缩文件大小的过程中,图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

    索引色vs直接色

    计算机在表示颜色的时候,有两种形式,一种称作索引颜色(Index Color),一种称作直接颜色(Direct Color)。

    索引色。用一个数字来代表(索引)一种颜色,在存储图片的时候,存储一个数字的组合,同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色,通常是256种颜色,对应到计算机系统中,使用一个字节的数字来索引一种颜色。

    直接色。使用四个数字来代表一种颜色,这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化,所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种,为压缩空间使用,有可能只有表达红、绿、蓝的三个数字,每个数字也可能不支持256种变化之多。

    点阵图vs矢量图

    点阵图,也叫做位图,像素图。构成点阵图的最小单位是象素,位图就是由象素阵列的排列来实现其显示效果的,每个象素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个象素,我们可以改变图像的色相、饱和度、明度,从而改变图像的显示效果。点阵图缩放会失真,用最近非常流行的沙画来比喻最恰当不过,当你从远处看的时候,画面细腻多彩,但是当你靠的非常近的时候,你就能看到组成画面的每粒沙子以及每个沙粒的颜色。

    矢量图,也叫做向量图。矢量图并不纪录画面上每一点的信息,而是纪录了元素形状及颜色的算法,当你打开一付矢量图的时候,软件对图形象对应的函数进行运算,将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小,画面上的对象对应的算法是不变的,所以,即使对画面进行倍数相当大的缩放,其显示效果仍然相同(不失真)。

    BMP

    BitMap的缩写,是无损的、既支持索引色也支持直接色的、点阵图。

    这是一种比较老的图片格式。BMP是无损的,但同时这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常具有较大的文件大小。虽然同时支持索引色和直接色是一个优点,但是太大的文件格式格式导致它几乎没有用武之地,现在除了在Windows操作系统中还比较常见之外,我们几乎看不到它。从上图中可以看到,在同样的图片质量下,BMP格式的图片文件大小是GIF格式的很多倍。

    GIF

    全称Graphics Interchange Format,采用LZW压缩算法进行编码。

    是无损的、采用索引色的、点阵图。GIF是无损的,采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩,GIF格式的图片,其文件大小要远小于BMP格式的图片。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,即在整个图片中,只能存在256种不同的颜色。GIF格式适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。因其体积小的特点,现在GIF被广泛的应用在各类网站中。

    JPEG

    JPEG是有损的、采用直接色的、点阵图。

    JPEG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息,也即是进行了有损压缩。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,又会导致图片文件较GIF更大。

    PNG-8

    PNG全称Portable Network Graphics,PNG-8是PNG的索引色版本。PNG-8是无损的、使用索引色的、点阵图。

    PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8还支持透明度的调节,而GIF并不支持。 现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。当然了,PNG-8本身也是支持动画的,只是浏览器支持得不好,不像GIF那样受到广泛的支持。可以看到PNG-8具有更好的透明度支持。

    PNG-24

    PNG-24是PNG的直接色版本。

    PNG-24是无损的、使用直接色的、点阵图。无损的、使用直接色的点阵图,听起来非常像BMP,是的,从显示效果上来看,PNG-24跟BMP没有不同。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。虽然PNG-24的一个很大的目标,是替换JPEG的使用。但一般而言,PNG-24的文件大小是JPEG的五倍之多,而显示效果则通常只能获得一点点提升。所以,只有在你不在乎图片的文件体积,而想要最好的显示效果时,才应该使用PNG-24格式。另外,PNG-24跟PNG-8一样,是支持图片透明度的。

    SVG

    全称Scalable Vector Graphics,是无损的、矢量图。

    SVG跟上面这些图片格式最大的不同,是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企业Logo、Icon等。 SVG是很多种矢量图中的一种,它的特点是使用XML来描述图片。借助于前几年XML技术的流行,SVG也流行了很多。使用XML的优点是,任何时候你都可以把它当做一个文本文件来对待,也就是说,你可以非常方便的修改SVG图片,你所需要的只需要一个文本编辑器。SVG并非只能绘制简单的Logo类的图片,它可以绘制出精致的图片的,比如下面这涨,嗯。

    WebP

    WebP是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。

    从名字就可以看出来它是为Web而生的,什么叫为Web而生呢?就是说相同质量的图片,WebP具有更小的文件体积。现在网站上充满了大量的图片,如果能够降低每一个图片的文件大小,那么将大大减少浏览器和服务器之间的数据传输量,进而降低访问延迟,提升访问体验。在无损压缩的情况下,相同质量的WebP图片,文件大小要比PNG小26%;在有损压缩的情况下,具有相同图片精度的WebP图片,文件大小要比JPEG小25%~34%;WebP图片格式支持图片透明度,一个无损压缩的WebP图片,如果要支持透明度只需要22%的格外文件大小。想象Web上的图片之多,百分之几十的提升,是非常非常大的优化。只可惜,目前只有Chrome浏览器和Opera浏览器支持WebP格式,所以WebP的应用并不广泛。为了使用更先进的技术,比如WebP图片格式,来压缩互联网上传输的数据流量,谷歌甚至提供了Chrome Data Compression Proxy,设置了Chrome Data Compression Proxy作为Web代理之后,你访问的所有网站中的图片,在经过Proxy的时候,都会被转换成WebP格式,以降低图片文件的大小。

    referencePNG vs. GIF vs. JPEG vs. SVG - When best to use?https://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91%E9%87%8F%E5%9C%96%E5%BD%A2https://developers.google.com/speed/webp/ High Performance Browser Networking by Ilya Grigorik

    作者:赵鑫
    链接:https://www.zhihu.com/question/20028452/answer/142593276
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 常见图片格式预览

    2018-07-15 11:57:57
    1. 多达图片格式预览(不是打开,只是预览,打开文件夹就能看到) 2. 转为常用格式:jpg, png 支持的部分格式(太多只列出部分): tga, x11, xbm, xcf, yuv,tiff, tim, tim2, cr2 。。。 太多列不过来
  • 前端常见图片格式整理

    千次阅读 2016-06-26 22:30:32
    前端常见图片格式整理

    前端常见图片格式整理

    PNG (Portable Network Graphics,便携式网络图形,1996)

           PNG有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位PNG在24位基础上增加了8位透明通道,因此可展现256级透明程度。
          PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色,而24则代表2的24次方大概有1600多万色。

    格式最高支持色彩通道索引色编辑支持透明支持
    PNG8256索引色支持支持设定特定索引色为透明色(布尔透明)
    PNG24约1600万色不支持不支持
    PNG32约1600万色不支持支持8位透明度(256阶alpha透明)

    【优点】

    1、透明无损压缩;
    2、渐进显示和流式读写;
    3、保留图像名称、作者、版权、创作时间。

    【缺点】

    1、色彩支持少 (PNG8、PNG16、PNG32);
    2、ie6不支持png透明效果。


    APNG(Animated Portable Network Graphics,2004)

           PNG的位图动画扩展,但未获PNG组织官方认可。扩展方法类似主要用于网页的GIF 89a,仍对传统PNG保留向下兼容。第1帧是标准的单幅PNG图像,因此只支持原版PNG的软件能正常显示第1帧。剩余的动画帧和帧速数据储存在符合原版PNG标准的扩展数据块里。


    JPEG (1992)

           是一种针对照片视频而广泛使用的一种有损压缩标准方法。 JPEG本身只有描述如何将一个视频转换为字节的数据流(streaming),但并没有说明这些字节如何在任何特定的存储媒体上被封存起来。JPEG的压缩方式通常是破坏性数据压缩(lossy compression),意即在压缩过程中图像的质量会遭受到可见的破坏,有一种以JPEG为基础的标准Lossless JPEG是采用无损的压缩方式,但Lossless JPEG并没有受到广泛的支持。
           使用JPEG格式压缩的图片文件一般也被称为JPEG Files,最普遍被使用的扩展名格式为.jpg,其他常用的扩展名还包括.jpeg、.jpe、.jfif以及.jif。
           JPEG是万维网(World Wide Web)上最普遍的被用来存储和传输照片的格式。它并不适合于线条绘图(drawing)和其他文字或图标(iconic)的图形,因为它的压缩方法用在这些类型的图形上,得到的结果并不好(PNG和GIF格式通常是用来存储这类的图形;GIF每个像素只有8比特,并不很适合于存储彩色照片,PNG可以无损地存储照片,但是文件太大的缺点让它不太适合在网络上传输。


    JPEG 2000

           基于小波变换的图像压缩标准,压缩比更高,不会产生原先的基于离散余弦变换的JPEG标准产生的块状模糊瑕疵。
           JPEG 2000同时支持有损数据压缩和无损数据压缩;也支持更复杂的渐进式显示和下载。
           JPEG 2000的目标不仅仅是性能要超越JPEG,而且增加和增强了如可缩放性和可编辑性这样的特性。JPEG 2000最大的特色在于,与JPEG等技术在数据编码上采取了不一样的思维,同样的数据编码可以使用多种手段解码以应付不同需求。JPEG 2000的编码内容具有可缩放性(Scaling)。其编码内容可以在任意位置截断,从头至此的编码片段可被解码回一张较低分辨率的图片。编码片段越长,解码后的分辨率越高(或说放大到相同分辨率时,其峰值信噪比(PSNR)较佳)。这意味了当需要更高压缩率时,直接丢弃后方的编码数据即可达成;或者,可以视需求只解码头一部分而得到缩图。不过这样的特征也使得编码、解码单元必须更复杂。
           JPEG 2000是国际标准化组织(ISO)发布的标准,文档代码为ISO/IEC 15444-1:2000。虽然JPEG 2000在技术上有一定的优势,但是到目前为止(2006年),互联网上采用JPEG 2000技术制作的图像文件数量仍然很少,并且大多数的浏览器仍然不支持JPEG 2000图像文件的显示。但是,由于JPEG 2000在无损压缩下仍然能有比较好的压缩率,所以JPEG 2000在图像品质要求比较高的医学图像的分析和处理中已经有了一定程度的广泛应用。
    【优点】

    1、相对原JPEG较佳的压缩率及品质,在有损压缩下,没有JPEG压缩中的马赛克失真效果;
    2、在低压缩比情形下(比如压缩比小于10:1),传统的JPEG图像质量有可能要比JPEG 2000要好;JPEG 2000在压缩比比较高的情形下,优势才开始明显;
    3、失真与非失真压缩方法相同,JPEG 2000可以采用同一套编码方式产生失真或非失真的压缩结果。可以粗略想像为利用可缩放性直接把非失真的结果截断为失真的结果。而JPEG的失真压缩与非失真压缩作法差异较大。
    4、递进性与可缩放性;
    5、区域解码(Random Access),使用者只想解码取用图片中特定区域时,可以依特定规律找出该区域的编码数据,而不需预先解码整张图片;
    6、重点区块处理(Region of Interest),类似可适性与区域解码的综合结果,不同的区域可以挑选不同的压缩品质;
    7、错误容忍(Error Resilience),JPEG 2000与JPG同样有错误容忍的特性。若传输过程中出现些许位元错误,由于在编码过程会切分许多阶层结构,可以避免该错误影响范围的扩大。
    8、支援高动态范围成像、支援图片透明度。

    【缺点】

    虽然避免了8X8区块克服了块状模糊的问题,不过也同时失去了8X8区块对于运算效率帮助的部分,造成需要运算时间加长,此外8X8区块也可以帮助减少硬件的需求(需要将全影像暂存的位置),JPEG2000就不得不面对这个问题。


    GIF (Graphics Interchange Format,图像互换格式,1987)

           是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像。GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式,其压缩率一般在50%左右。
           GIF文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。
           GIF分为静态GIF和动画GIF两种,扩展名为.gif,是一种压缩位图格式,支持透明背景图像,适用于多种操作系统,“体型”很小。GIF主要分为两个版本,即GIF 89a和GIF 87a。
           GIF 87a,是在1987年制定的版本。
           GIF 89a,是1989年制定的版本。在这个版本中,为GIF文档扩充了图形控制区块、备注、说明、应用程序编程接口等四个区块,并提供了对透明色和多帧动画的支持
    【优点】

    1、优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小;
    2、可插入多帧,从而实现动画效果;
    3、可设置透明色以产生对象浮现于背景之上的效果。

    【缺点】

    1、由于采用了8位压缩,最多只能处理256种颜色,故不宜应用于真彩色图片;
    2、不能半透明(有阴影效果图片、渐变效果,会被处理掉),处理锯齿效果不好。


    SVG(Scalable Vector Graphics,可缩放矢量图形)

           基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。
          SVG允许3种图形对象类型:矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML命名空间之内,从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。
    【优点】

    1、图像文件可读,易于修改和编辑(理论上如此,但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件);
    2、与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格地说,应该是ECMAScript)脚本来控制SVG对象;
    3、SVG图形格式可以方便的创建文字索引,从而实现基于内容的图像搜索;
    4、SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果;
    5、SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户;
    6、矢量图形,文件比较小,同时也能提供高清晰的画面,适合于直接打印或输出。

    【缺点】

    1、SVG的本地运行环境下的厂家支持程度;
    2、由于原始的SVG档是遵从XML语法,导致数据采用未压缩的方式存放,因此相较于其他的矢量图形格式,同样的文件内容会比其他的文件格式稍大。Adobe因此使用gzip压缩开发出压缩的SVG档格式,附档名为
    .svgz, 但此种文件格式除了Adobe旗下的软件以外,未被广泛支持使用;
    3、旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。


    WebP (2010)

           是一种同时提供了有损压缩与无损压缩的图片文件格式,WebP支持无损压缩和透明色的功能,派生自视频编码格式VP8,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。
           目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的发送时间。
           根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。


    几种图片格式比较

    图片格式压缩方式动画适应浏览器
    PNG无损不支持所有
    JPEG有损/无损不支持所有
    JPEG 2000有损/无损不支持浏览器兼容一览表
    APNG无损支持浏览器兼容一览表
    GIF无损支持所有
    SVG无损支持浏览器兼容一览表(主要用于移动端font-face)
    WebP有损/无损支持浏览器兼容一览表

    扩展阅读

    1、W3C中关于PNG格式的内容
    2、Mozilla社区APNG文档
    3、SVG w3school教程

    展开全文
  • 常见图片格式详解

    千次阅读 2017-01-23 13:16:26
    做了年有关图形、图像的工作,对图片格式算是小经验,在此写成一文章总结下。虽然一开始并不想讲很理论的东西,但写完后发现几乎全是理论,细想一下关于图片格式的知识本身就是理论的东西,囧~~ 那就力求用最...

    做了几年有关图形、图像的工作,对图片格式算是小有经验,在此写成一文章总结下。虽然一开始并不想讲很理论的东西,但写完后发现几乎全是理论,细想一下关于图片格式的知识本身就是理论的东西,囧~~ 那就力求用最简单的方式将这些“理论”讲清楚吧。

    常见的图片格式有bmp, jpg(jpeg), png, gif, webp等。

    图像基本数据结构

     要讲图片格式还先得从图像的基本数据结构说起。在计算机中, 图像是由一个个像素点组成,像素点就是颜色点,而颜色最简单的方式就是用RGB或RGBA表示, 如图所示

     

    (图1)

    (图2)

    如果有A通道就表明这个图像可以有透明效果。

    R,G,B每个分量一般是用一个字节(8位)来表示,所以图(1)中每个像素大小就是3*8=24位图, 而图(2)中每个像素大小是4*8=32位。

    这里有三点需要说明:

    一、图像y方向正立或倒立

    图像是二维数据,数据在内存中只能一维存储,二维转一维有不同的对应方式。比较常见的只有两种方式: 按像素“行排列”从上往下或者从下往上。

    如图所示的图像有9个像素点,如果从上往下排列成一维数据是(123456789), 如果是从下往上排列则为(789456123)。
    只所以会有这种区别是因为,前一种是以计算机图形学的屏幕坐标系为参考(右上为原点,y轴向下 ),而另后一种是以标准的数学坐标系为参考(右下为原点,y轴向上)。这两个坐标系只是y值不一样,互相转换的公式为:

    y2 = height-1-y1

    y1,y2分别为像素在两个坐标系中的y坐标,height为图像的高度。

    不过好像只有bmp图片格式以及windows下的GDI,GDI+是从下往上排列,其它比如DirectX,OpenGL,Cocoa(NSImage, UIImage),OpenCV等都是从上往下排列。

    二、RGB排列顺序

    不同图形库中每个像素点中RGBA的排序顺序可能不一样。上面说过像素一般会有RGB,或RGBA四个分量,那么在内存中RGB的排列就有6种情况,如下:

    • RGB
    • RBG
    • GRB
    • GBR
    • BGR
    • BRG

    RGBA的排列有24种情况,这里就不全部列出来了。
    不过一般只会有RGB,BGR, RGBA, RGBA, BGRA这几种排列据。 绝大多数图形库或环境是BGR/BGRA排列,cocoa中的NSImage或UIImage是RGBA排列。

    三、像素32位对齐

    如果是RGB24位图,会存在一个32位对齐的问题——
    在x86体系下,cpu一次处理32整数倍的数据会更快,图像处理中经常会按行为单位来处理像素。24位图,宽度不是4的倍数时,其行字节数将不是32整数倍。这时可以采取在行尾添加冗余数据的方式,使其行字节数为32的倍数。
    比如,如果图像宽为5像素,不做32位对齐的话,其行位数为24*5=120,120不是32的倍数。是32整数倍并且刚好比120大的数是128,也就只需要在其行尾添加1字节(8位)的冗余数据即可。(一个以空间换时间的例子)
    有个公式可以轻松计算出32位对齐后每行应该占的字节数

    byteNum = ((width * 24 + 31) & ~31)>>3;

    注意结果是字节数,如果想知道位数,还得x8

    图片格式的必要性

    如果将图像原始格式直接存储到文件中将会非常大,比如一个5000*5000 24位图,所占文件大小为5000*5000*3字节=71.5MB, 其大小非常可观。
    如果用zip或rar之类的通用算法来压缩像素数据,得到的压缩比例通常不会太高,因为这些压缩算法没有针对图像数据结构进行特殊处理。
    于是就有了jpeg,png等格式,同样是图像压缩算法jpeg和png也有不同的适用场景,具体在下文再阐述。

    所以可以总结如下: jpeg,png文件之于图像,就相当于zip,rar格式之于普通文件(用zip,rar格式对普通文件进行压缩)

    BMP格式

    bmp格式没有压缩像素格式,存储在文件中时先有文件头、再图像头、后面就都是像素数据了,上下颠倒存储。
    用windows自带的mspaint工具保存bmp格式时,可以发现有四种bmp可供选择:
    单色: 一个像素只占一位,要么是0,要么是1,所以只能存储黑白信息
    16色位图: 一个像素4位,有16种颜色可选
    256色位图: 一个像素8位,有256种颜色可选
    24位位图: 就是图(1)所示的位图,颜色可有2^24种可选,对于人眼来说完全足够了。

    这里为了简单起见,只详细讨论最常见的24位图的bmp格式。

    现在来看其文件头和图片格式头的结构:

                           

    文件头信息
    字段大小(字节)描述
    bfType2一定为19778,其转化为十六进制为0x4d42,对应的字符串为BM
    bfSize4文件大小
     bfReserved1一般为0 
     bfReserved2一般为0 
     bfOffBits 4 从文件开始处到像素数据的偏移,也就是这两个结构体大小之和

     

    bmp图片结构头
     字段大小(字节) 描述 
     biSize 4此结构体的大小 
     biWidth 4 图像的宽
    biHeight  4图像的高 
    biPlanes  2图像的帧数,一般为1 
    biBitCount  2一像素所占的位数,一般是24
    biCompression  4一般为0 
    biSizeImage  4像素数据所占大小,即上面结构体中文件大小减去偏移(bfSize-bfOffBits) 
    biXPelsPerMeter  4 一般为0
    biXPelsPerMeter  4  一般为0
    biClrUsed  4  一般为0
    biClrImportant  4  一般为0

     

    本来在windows平台下wingdi.h文件中已经有这些结构的定义,不过为了不依赖与windows,实现为跨平台,本人将wingdi.h中的这两个结构“偷用”出来了。代码如下:

    Bmp结构体

    由于bmp格式比较简单,本人已实现了一份简单的c++代码,具有读取、保存bmp图片的功能,只支持24位的bmp格式。

    代码在 http://git.oschina.net/xiangism/blogData 的“常见图片格式详解/ImageDemo/BmpDemo”文件夹中。

    虽然这里只建立了vs2008项目,但代码在linux, mac平台下都可以编译通过。

    需要说明的是为了统一处理,将bmp读取到LBitmap::m_pixel中时就将其转化为32位从上往下排列的图像格式了。并且会有y坐标的转化。
    所以在读取的时候会有一个temp_line先存储文件中的24位数据,再转化为32位数据。在保存时也是先将32位数据转化到temp_line的24位数据上,然后再写入文件。(如果仅仅是处理bmp,那么这么多的一个A通道是冗余数据,但后面处理png图片时就会用到这个A通道)

    如果用上面的代码来读取如图所示的图片(放大8倍后的显示图):

     


    右上角像素为RGB(255, 128, 0)

    1 ln::LBitmap bmp;
    2 bmp.ReadBmp(L"one.bmp");
    3 unsigned char *p = bmp.Pixel(0, 0);
    4 printf("%d, %d, %d\n", p[0], p[1], p[2]); //显示左上角的像素值
    5 bmp.WriteBmp(L"out.bmp");                 //保存到文件,可以测试是否能正确读取和保存bmp

    运行的结果为: 0,128,255
    可以看出像素分布为BGR

    ps:

    • bmp格式也是可以压缩.
    • bmp格式也可以有颜色板。颜色板就是一个颜色的索引,上面说过bmp格式一个像素可以只有2个,16个或256个取值。就拿单色位图来说明,默认为0对应RGB(0,0,0) 1,对应RGB(255, 255, 255)
      如果颜色板这样定义: 
      0对应 RGB(255,0, 0)红
      1对应 RGB(0, 255, 0)绿
      这样黑白图就成了红绿图

    JPEG格式

    1. jpeg是有损压缩格式, 将像素信息用jpeg保存成文件再读取出来,其中某些像素值会有少许变化。在保存时有个质量参数可在[0,100]之间选择,参数越大图片就越保真,但图片的体积也就越大。一般情况下选择70或80就足够了。
    2. jpeg没有透明信息。
    3. jpeg比较适合用来存储相机拍出来的照片,这类图像用jpeg压缩后的体积比较小。其使用的具体算法核心是离散余弦变换、Huffman编码、算术编码等技术,有兴趣的同学可以在网上找一大堆资料,本文就不详细介绍了。

    接下来要介绍一个有关jpeg非常实用的技术——
    jpeg格式支持不完全读取整张图片,即可以选择读取原图、1/2、1/4、1/8大小的图片
    比如5000*5000的一张大图,可以只读取将其缩小成1/8后即625*625大小的图片。 这样比先完全读取5000*5000的图像,再用算法缩小成625*625大小不知快多少倍。
    如果应用需求只需要一张小图时,这种读取方式就可以大显身手了。

    在c代码中读取jpeg一般是使用libjpeg, 这个库提供了不完全读取图片的功能。

    给ln::LBitmap添加有关jpeg的接口,如下ReadJpeg()第三个参数fraction可取值为1,2,4,8,分别对应1/1,1/2,1/4,1/8

    JpegAPI

    具体的实现在JpegDemo
    用上面的函数进行jpeg的读取和保存的测试

    复制代码
    ```
    ln::LBitmap bmp;
    bmp.ReadBmp(L"one.bmp");
    unsigned char *p = bmp.Pixel(0, 0);
    printf("%d, %d, %d\n", p[0], p[1], p[2]);
    bmp.WriteJpeg(L"one.jpg", 90);
    ```
    复制代码

    读取one.bmp图片,然后保存成jpeg格式,one.jpg放大后显示如下

    发现左上角的颜色发生了变化,并且也影响到周围的像素,就算将上面WriteJpeg()第二个参数换成100,也还是这种效果,这是Jpeg格式无法避免的问题
    但如果读取一张风景照,再保存成Jpeg,就几乎看不出有什么差别了。

    android平台下实现jpeg预读

    复制代码
    BitmapFactory.Options opt = new BitmapFactory.Options();
    opt.inJustDecodeBounds = true;
    BitmapFactory.decodeFile(info.fullPath, opt); //这里仅仅只读取jpeg的大小
    opt.inJustDecodeBounds = false;
    if (opt.outWidth > opt.outHeight) {
        opt.inSampleSize = opt.outWidth / phSize;//hpSize是允许的图片宽高的最大值
    } else {
        opt.inSampleSize = opt.outHeight / phSize;
    }
    Bitmap b = BitmapFactory.decodeFile(info.fullPath, opt); 
    复制代码

     将BitmapFactory.Options的inJustDecodeBounds 设置为true后,就只会读取Jpeg的大小,而不会去解析像素数据。然后再设置inSampleSize后,就可以根据这个值来读取适当大小的图片,研究android的源码后可以发现底层也是调用的libjpeg库来实现。

    ios,mac

    本人还没有在ios/mac中发现如何预读jpeg的官方API。Apple对图形、图像、多媒体领域提供了丰富接口,如果这个功能真没实现就太令我惊讶了! 不过ObjectC完全兼容C,可以调用libjpeg库来实现这个功能。

    .NET下仅读取jpeg的大小

    下面是用c#仅仅读取jpeg宽高(没有解析像素数据), 直接用C#读取1/2,1/4,1/8还不知道如何实现

    FileStream stream = new FileStream(path, FileMode.Open);
    Image img = Image.FromStream(stream, false, false);  //关键是将第三个参数设置为false
    Console.WriteLine("size: {0},{1}", img.Width, img.Height);

     

    jpeg批量转化工具

    用相机拍出来的原始jpeg图片是高保真质量, 所占文件体积非常大,本人写了一个批量转化的工具,可以将jpeg的质量都转化成80, 图像的宽高不变, 这时人眼几乎看不出有什么差别, 但其体积只有原来的1/3. 如果有大量的照片需要保存时, 节约的空间就很客观了。实现原理很简单, 就是读取jpeg文件, 然后再保存.
    用c#实现的,代码量非常少,在此贴出全部源码

    JpegBatchConvert

     

    Exif信息

    另外jpeg文件一般有一个附属的exif信息,这个信息中有图像大小,拍摄时间,拍摄的相关参数,照片方向,图像缩略图等信息。

    用相机拍出来的jpeg都会有这个信息。如果照片方向不是正立的话,在读取到像素取后,还得按exif所指明的方向将图像旋转下。mspaint程序就没有做这个处理,有些图片用picasa查看和用mspaint查看方向就不一样。当然为了简单起见,上面的LBitmap中也自动忽略了exif信息及其图像拍摄时的方向。

    如果不用读取1/2,1/4,1/8的方法,也可以从exif中来读取缩略图,但这个缩略图一般很小。

    说到exif,不得不说一款用perl实现的命令行工具:exiftool。几乎所有的多媒体文件(图像、音乐、视频)都可以用这个工具来查看其有关信息,当然如果不是jpeg文件就是指广义上的"exif"。在git中有已经编译好可执行文件exiftool.exe。使用方法是将这个文件放到系统路径下,然后在想查看的文件路径下执行 exiftool filename

    在实现BatchJpeg工具时如果仅仅用上面实现的LBitmap来读取,保存, 将会失去exif信息, 而相片的拍摄时间等信息又很重要, 所以还得用另一个库exiv2来读取写入exif。如果用c#, 用上面的代码exif信息会自动保留下来。默默地向c#致敬。

    intelJpeg库

    如果在win32环境下对jpeg IO速度有很高的要求,可以使用interlJpeg库,不开源,但提供有*.h,*.lib文件。这个库可以大大提高jpg读取、保存速度。

    当时分别用c#和c实现了jpeg批量转化工具, 在处理大量图片时发现c#用时居然只有c的一半。太奇怪了,按理说,c的速度比c#应该快才对啊, 而实事是c慢了这么多。 最后发现问题就在libjpeg上,用了intetJpeg后速度就和c#差不多了(猜想.NET内部也是用intelJpeg来处理jpeg)。

    PNG格式

    1. png是一种无损压缩格式, 压缩大概是用行程编码算法。
    2. png可以有透明效果。
    3. png比较适合适量图,几何图。 比如本文中出现的这些图都是用png保存,比用joeg保存体积要小。

    再强调一下: jpeg比较适合存储色彩“杂乱”的拍摄图片,png比较适合存储几何特征强的图形类图片

    png可能有24位图和32位图之分。32位图就是带有alpha通道的图片。
    将图片a绘制到另一幅图片b上,如果图片a没有alpha通道,那么就会完全将b图片的像素给替换掉。而如果有alpha通道,那么最后覆盖的结果值将是c = a*alpha + b*(1-alpha)
    再对LBitmap添加png的支持。
    添加接口如下:

    static bool ReadPngSize(const wchar_t *path, int *width, int *height);
    static bool IsPngFile(const wchar_t *filename);
    bool ReadPng(const wchar_t *filename);
    bool WritePng(const wchar_t *filename);

    具体实现在PngDemo中。有调用libpng库,并且libpng库依赖zlib库(由此可以看出png算法有用到常规的压缩算法)。

    GIF格式

    上面提到的bmp,jpeg,png图片都只有一帧,而gif可以保存多帧图像,如图所示

    libgif库可以用来读取gif图片。gif中有个参数可以控制图片变化的快慢。在程序中可以使用这个参数,也可以自己定义一个参数,这就是为什么gif图片,在不同程序中查看时其变化速度不一样。

    webp

    google开发的一种有损、透明图片格式,相当于jpeg和png的合体,google声称其可以把图片大小减少40%。

     

    一个强大的格式库,CxImage

    CxImage几乎可以读取任何图片格式

    下面是其头文件中的宏定义:

    复制代码
    #define CXIMAGE_SUPPORT_WINDOWS 1
    #define CXIMAGE_SUPPORT_EXIF    1
    #define CXIMAGE_SUPPORT_BMP 1
    #define CXIMAGE_SUPPORT_GIF 1
    #define CXIMAGE_SUPPORT_JPG 1
    #define CXIMAGE_SUPPORT_PNG 1
    #define CXIMAGE_SUPPORT_ICO 1
    #define CXIMAGE_SUPPORT_TIF 1
    #define CXIMAGE_SUPPORT_TGA 1
    #define CXIMAGE_SUPPORT_PCX 1
    #define CXIMAGE_SUPPORT_WBMP 1
    #define CXIMAGE_SUPPORT_WMF 1
    
    #define CXIMAGE_SUPPORT_JP2 1
    #define CXIMAGE_SUPPORT_JPC 1
    #define CXIMAGE_SUPPORT_PGX 1
    #define CXIMAGE_SUPPORT_PNM 1
    #define CXIMAGE_SUPPORT_RAS 1
    
    #define CXIMAGE_SUPPORT_MNG 1
    #define CXIMAGE_SUPPORT_SKA 1
    #define CXIMAGE_SUPPORT_RAW 1
    #define CXIMAGE_SUPPORT_PSD 1
    复制代码

    CxImage在针对特定格式时,也是调用了其它图片库(比如libjpeg, libpng, libtiff)。由于CxImage太过庞大,如果不想使用其全部代码,可以自己从中“偷取”特定图片格式的读取、保存代码。

     

     

    展开全文
  • 几种常见图片文件格式的优缺点

    千次阅读 2017-11-15 19:40:51
    本文主要介绍和比较几种常见图片文件格式的优缺点。 1.有损vs无损 图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种。 有损压缩。指在压缩文件大小的过程中,损失...

    本文主要介绍和比较几种常见图片文件格式的优缺点。
    1.有损vs无损
    图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种。
    有损压缩。指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不可逆的,我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段,是按照一定的算法将临近的像素点进行合并。
    无损压缩。只在压缩文件大小的过程中,图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
    2.BMP
    BitMap的缩写,是无损的、既支持索引色也支持直接色的、点阵图。
    这是一种比较老的图片格式。BMP是无损的,但同时这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常具有较大的文件大小。虽然同时支持索引色和直接色是一个优点,但是太大的文件格式格式导致它几乎没有用武之地,现在除了在Windows操作系统中还比较常见之外,我们几乎看不到它。
    3.GIF
    全称Graphics Interchange Format,采用LZW压缩算法进行编码。是无损的、采用索引色的、点阵图。
    GIF是无损的,采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩,GIF格式的图片,其文件大小要远小于BMP格式的图片。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,即在整个图片中,只能存在256种不同的颜色。
    GIF格式适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。因其体积小的特点,现在GIF被广泛的应用在各类网站中。
    4.JPEG
    JPEG是有损的、采用直接色的、点阵图。
    JPEG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息,也即是进行了有损压缩。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。
    与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,又会导致图片文件较GIF更大。
    这里写图片描述

    总结:简单粗暴地说,小图标,用BMP储存最好。jpg适用于摄影图片,以及色彩丰富的图片。它采用压缩算法,会对图片上每8px*8px的像素进行处理,通过强制渐变的方法来减小文件尺寸,因此无论选择的储存质量多高,还是会多多少少失真一些,但对于摄影之类的图片来说,jpg格式就会比png小很多了。GIF一般用于类似小视频的图片。

    展开全文
  • 大家如果测试应用层软件的话,会涉及到各种图片格式的测试,现简单总结下,给大家介绍三种方法。 方法1、使用windows自带的画图工具直接转换,支持基本图片格式的转换;如下所示,支持PNG、JPEG、BMP、GIF格式的...
  • 常见图片格式

    千次阅读 2008-02-02 02:43:00
    一、BMP图像文件格式BMP是一与硬件设备无关的图像文件格式,使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BblP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8...
  • 制作网页常见图片格式及特性介绍

    千次阅读 2019-05-22 15:22:39
    图片是网页制作中很重要的素材,图片不同的格式,每格式都自己的特性,了解这些特性可以方便我们在制作网页时选取合适的图片格式常见图片格式及一些特性如下: 1. psd photoshop的专用格式,网页上一般...
  • 导读:GIF、JPEG 和 PNG 是三种常见图片格式分析。 GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 颜色(一般叫 8 bit 彩色),支持单一透明色; JPEG:1992 年出世,照片一般 GIF、JPEG 和 PNG ...
  • 常见图片格式大全

    千次阅读 2019-09-18 07:15:29
    什么状况下用哪种格式?本文我们就通过图形文件的特征后缀名(就是如图.bmp这样的)来逐一认识当前常见的图形文件格式。 1.BMP:BMP格式是微软公司制定的图形标准,最大的优点就是在PC上兼容度一流,几乎能被所有的...
  • .webp 图片格式 转为其他常见的格式

    千次阅读 2019-03-28 09:47:35
    昨日在控制台“盗取”某电商的图片素材时,发现下载下来的全是.webp 格式图片,而不是常见的.jpg , .png , .gif 等的格式,所以用电脑的看图软件没法打开,只有在浏览器中才可以打开,自己自行嵌入到页面中也会...
  • 常见图片格式优缺点总结

    千次阅读 2016-06-12 11:02:48
    今天项目中设计到很多的图片有常见的PNG,JPEG也其他一些格式图片,今天刚好没事,就总结一下各种格式图片的优缺点:BMP:优点(无损压缩,图质最好),缺点(文件太大,不利于网络传输) GIF:优点(动画...
  • unity三种图片格式

    千次阅读 2017-09-08 13:38:32
    ARGB 是一色彩模式,也就是RGB色彩模式附加上Alpha(透明度)通道,常见于32位位图的存储结构。RGB 色彩模式是工业界的一颜色标准,是通过对红(R)、绿(G)、蓝(B)个颜色通道的变化以及它们相互之间的叠加来...
  • 目前几种图片格式

    万次阅读 2017-04-05 21:12:03
    登录 | 注册 飞流直下三千尺 目录视图 ...程序员3月书讯 【面试秘籍】开发者应该如何谈薪资 Python数据分析与机器学习 博客搬家,有礼相送 ...几种图片格式的简介 2016-05-24
  • 几种图片格式的简介

    千次阅读 2016-05-24 14:06:42
    首先谈一下大家耳熟能详的几种老牌的图片格式吧: JPEG 是目前最常见图片格式,它诞生于 1992 年,是一个很古老的格式。它只支持有损压缩,其压缩算法可以精确控制压缩比,以图像质量换得存储空间。由于它太...
  • web开发常见图片格式-转

    千次阅读 2018-08-09 11:49:00
    web开发常见图片格式 如今互联网是一个五彩缤纷的世界,自然少不了图片的点缀,作为web系统主要素材之一,我们要熟知常见图片格式,而且需要处理部分会需要处理的图片格式常见的格式如下:.ico, .jpeg, ....
  • 关于几种图片格式的压缩

    千次阅读 2018-08-03 11:31:15
    种图片格式 ... 是一无损压缩的图片格式,他支持完整的透明通道,从图片处理的领域来讲,JEPG只有RGB个通道,而PNGARGB四个通道,因此PNG图片占用空间一般比较大,会无形的增加app的大小,在做app...
  • 用于识别部分图片的真实格式(几种主流的图片格式) .如若是比较罕见的图片格式,也会被认为是unknown: Const wiaFormatBMP = "{B96B3CAB-0728-11D3-9D7B-0000F81EF32E}" Const wiaFormatPNG = "{...
  • 对于做设计这一行的人来说,这图片格式是最常用的,也是最常见的,几乎每一天都要与他们打交道。  刚刚入门的新人通常不知道在什么地方如何使用他们或者说如何更有效的使用他们。  那他们到底是什么区别?...
  • 对于做设计这一行的人来说,这图片格式是最常用的,也是最常见的,几乎每一天都要与他们打交道。刚刚入门的新人通常不知道在什么地方如何使用他们或者说如何更有效的使用他们。那他们到底是什么区别?(一句话...
  • 最常用的三种图片格式

    千次阅读 2018-12-19 16:24:14
    HTML最常见的插入图片格式 gif 支持动图,支持的颜色较少,只支持简单的透明 ,颜色比较单一 jpg 图片格式支持的颜色较多,而且可以压缩,但不支持透明,所以我们用jpg来保存颜色比较丰富的图片,例如照片 png ...
  • 图片格式转换

    2013-12-07 09:38:26
    可以转换几种常见图片格式
  • 常见三种医学图像格式

    千次阅读 2019-03-10 14:00:05
    比较常见三种医学图像分别是:DICOM、Nrrd、Nifti 以下关于用python库读入类文件 DICOM pydicom import pydicom as dicom #将每一个DICOM文件读入到slices slices = [dicom.read_file(path+"\\"+s) ...
  • Java编程中 常见的异常有哪几种 ??

    千次阅读 2013-03-11 10:03:06
    这个异常大家肯定都经常遇到,异常的解释是"程序遇上了空指针",简单地说就是调用了未经初始化的对象或者是不存在的对象,这个错误经常出现在创建图片,调用数组这些操作中,比如图片未经初始化,或者图片创建时的...
  • 生活和项目中常见图片格式

    千次阅读 2013-05-02 00:20:15
    位图 常用的位图格式 文件扩展名 MIME 类型 固有名称 描述 .bmp image/bmp Windows位图 ...Windows 程序以及其本身使用的格式。...互换档案格式(Interchange fil
  • 常见图片文件格式简析

    千次阅读 2019-07-01 13:55:11
    常见”:此处指BMP JPEG GIF PNG 四。 软件: Windows 画图(除了Photoshop,我最喜欢的编辑器,简单粗暴) HxD BMP BMP文件分为4部分: bmp文件头(bmpfileheader):14Byte。提供文件的格式、大小...
  • 发现很多部分都是webp格式图片,在调用图片去重算法时,报错退出,经排查发现库中调用的php api 函数‘getimagesize ( string $filename )',由于php为5.6版本,比较低,不能处理webp格式,只能处理常见的png,...
  • 网页常见的图标图片格式的区别

    千次阅读 2018-11-21 14:38:41
    网页中几种格式图片图标的区别 一.unicode 1.简介 unicode是字体在网页端最原始的应用方式,可以用来绘制一些简单的图标。 2.功能: 兼容性最好,支持ie6+,及所有现代浏览器。支持按字体的方式去动态调整...
  • EPS 图片大小优化 减少图片请求,使用雪碧图 图片懒加载 图片预加载 常用的jpg和png等图片格式的区别

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 132,599
精华内容 53,039
关键字:

常见的图片格式有哪三种