GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理

阅读目录

GIF(Graphics Interchange Format)

PNG(Portable Network Graphics)

JPG(Joint Photographic Experts Group)

base64

APNG

  GIF/PNG/JPG/WEBP/APNG都是属于位图(位图 ,务必区别于矢量图);

  GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还不普及:

  GIF(Graphics Interchange Format)

  GIF图形交换格式是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像。它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。

优点

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

缺点

  由于采用了8位压缩,最多只能处理256种颜色(2的8次方),故不宜应用于真彩图像。

  PNG(Portable Network Graphics)

  便携式网络图片(Portable Network Graphics),简称PNG,是一种无损数据压缩位图图形文件格式。PNG格式是无损数据压缩的,PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同 的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道(32-24===8),因此可展现256级透明程度。

  PNG这种类型的图片就是为了取代GIF图片而生的, 除了GIF不支持动画的优势, 能用PNG的地方就用PNG, 原因是压缩比高,色彩好;

优点

  * 支持256色调色板技术以产生小体积文件   * 最高支持48位真彩色图像以及16位灰度图像。   * 支持Alpha通道的半透明特性。   * 支持图像亮度的gamma校正信息。   * 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。   * 使用无损压缩。   * 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。   * 使用CRC循环冗余编码防止文件出错。   * 最新的PNG标准允许在一个文件内存储多幅图像。

缺点

  但也有一些软件不能使用适合的预测,而造成过分臃肿的PNG文件。

让IE6透明的小技巧:

  如上图所示, IE6支持全透明,不支持半透明, 所以我们在PS到处透明图片的时候可以把图片设置为png8,在PS的生成图片是记得把png透明的选项勾选上,测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <style>
        body{
            background:#eee;
        }
        p{
            position:absolute;
        }
        p.p1{
            left:200px;
            top:140px;
        }
        p.p2{
            left:500px;
            top:140px;
        }
        img{
            position:relative;
        }
    </style>
    <p class="p1">
        text
    </p>
    <p class="p2">
        text
    </p>
    <img src="http://images.cnitblog.com/blog2015/497865/201505/022343328802481.png" />
</body>
</html>

效果图:

JPG(Joint Photographic Experts Group)

  JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。JPEG的压缩方式通常是破坏性资料压缩(lossy compression),意即在压缩过程中图像的品质会遭受到可见的破坏。

优点

  JPEG/JFIF是最普遍在万维网(World Wide Web)上被用来储存和传输照片的格式。JPEG在色调及颜色平滑变化的相片或是写实绘画(painting)上可以达到它最佳的效果。在这种情况下,它通常比完全无失真方法作得更好,仍然可以产生非常好看的影像(事实上它会比其他一般的方法像是GIF产生更高品质的影像,因为GIF对于线条绘画(drawing)和图示的图形是无失真,但针对全彩影像则需要极困难的量化)。

缺点

  它并不适合于线条绘图(drawing)和其他文字或图示(iconic)的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果;

  给个活生生的例子:一张照片在Instagram反复上传下载90次之后....(在博客园找了半小时,link), 在最后jpg图片完全变样了;

WEBP图片格式:

  2010年谷歌推迟的图片格式,专门用来在web中使用, 压缩率只有jpg的2/3或者更低; 第一个版本的webp图片格式是有损的, 新版本中webp图片是无损的。

  相对于png图片,webp比png小了45%,但是缺点是你压缩的时候需要的时间更久了;

优点:

  体积小巧;

缺点 :

  兼容性不太好, 只有opera,和chrome支持;

  但是有个插件可以让所有浏览器都支持webp格式, 利用了flash把webp图片转换为浏览器可以识别的图片格式;   WebP插件打包下载:http://www.etherdream.com/WebP/WebP.zip   WebP插件在线Demo:http://www.etherdream.com/WebP/   WebP插件源码下载:http://code.google.com/intl/zh-CN/speed/webp

额外的信息:

  前面如果有看清楚的有写png和gif是无损压缩,但是实际上通过作图工具导出的png或者gif图片明明很模糊的啊, 为什么呢?

    因为gif是8位的压缩,"8位"是指图片所能表现的颜色深度, 一个8位图像仅最多只能支持256种不同颜色(一个多余256种颜色的图片若用gif图片保存会出现失真, 相对于jpg图片来讲, gif有他所能表示色彩的极限, 如果原图中色彩太多了就悲剧了, 所以所谓的无损是相对于jpg格式会对图片进行压缩的一种说法);
    png的图片有8为有24为有32位, 当然实际上24位和32位的png图片颜色看起来更加鲜艳自然;

base64

  Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64编码可用于在HTTP环境下传递较长的标识信息, 直接把base64当成是字符串方式数据就好了

  利用Base64的不可读性,可以加密字符串,标准浏览器的window下有两个方法,分别是window.btoa和window.atob,(IE67下虽然不支持,但是可以用vbscript模拟,参考司徒正美大牛(简称司牛)的地址,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <script>
        var str = "nono::::";
        var result = "";
        console.log( result = window.btoa(str) );    //bm9ubzo6Ojo=
        console.warn( window.atob( result ) ); //nono::::
    </script>
</body>
</html>

优点:

  1:减少了http请求;

  2:数据就是图片;

缺点:

  1:如果图片稍微有点大,这个字符串会很长很长;

  2:IE6,7 你懂得;

  如何获取图片对应的base64字符串呢?

    1:使用代码获取:

var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
    htmlImage = '<img src="'+ e.target.result +'" />';    // 这里e.target.result就是base64编码}
reader.readAsDataURL(file);

 2:在webkit内核浏览器有个挺方便的技巧, 你打开发者工具, 选中图片, 那么右侧就会出现对应图片的base64 ,你把这个字符串复制一下,在字符串前面加上data:images/gif;base64,然后直接复制到浏览器的地址栏, 打开就会显示这副图片;

APNG

  这东西是mozilla搞出来的, 它是24位的,而且也是动图,可以容纳1680万种颜色,也是为了取代GIF,但是....也就火狐支持,IE10和chrome,safari全部不行, 如果说gif图片是卡片机的话, APNG就是单反(直接忽略

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-09-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法+

双边滤波算法的简易实现bilateralFilter

没怎么看过双边滤波的具体思路,动手写一写,看看能不能突破一下。 最后,感觉算法还是要分开 水平 与 垂直 方向进行分别处理,才能把速度提上去。 没耐性写下去了,...

5776
来自专栏逍遥剑客的游戏开发

有向无环图的自动布局算法

3535
来自专栏iOSDevLog

Turi Create 机器学习模型实战:你也能轻松做出Prisma 风格的图片!

如果你一直有关注Apple去年所发布的消息,就会知道他们在机器学习上投入了大量心力。自他们去年在WWDC 2017上推出Core ML以来,已经有大量结合机器学...

3672
来自专栏木子昭的博客

机器学习三剑客之Matplotlab绘制条形图直方图饼图

? Matplotlib 是Python 2D绘图领域的基础套件,它让使用者将数据图形化,并提供多样化的输出格式。这里将会以四个小案例探索Matplotli...

4886
来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

自己编码使用去色、曲线、色阶算法实现照片怀旧特效。

  天下文章一大抄,看你会抄不会抄,这个算法的初步雏形其实很简单,很多傻瓜级的软件业提供了相应的一键功能,比如美图秀秀。其实这就是个简单的调色功能,实现的方式五...

4085
来自专栏安富莱嵌入式技术分享

emWin表盘界面设计,含uCOS-III和FreeRTOS两个版本

配套例子: V6-906_STemWin提高篇实验_简易表盘界面设计(uCOS-III) V6-907_STemWin提高篇实验_简易表盘界面设计(FreeRT...

2492
来自专栏落影的专栏

GPUImage详细解析(十一)美颜+人脸识别

前言 一个群友用琨君的美颜录制和讯飞离线人脸识别SDK做了一个demo,功能是录制视频,要求有美颜,并且能识别人脸并放置贴图。但是遇到一个问题: 录制过程能过...

4925
来自专栏数据小魔方

R预设配色系统及自定义色板

关于配色的话题,已经聊过很多次了,但是就像是之前说过的,对于图形可视化而言,配色决定着作品的“颜值”,谈再多次都不嫌多。 今天是R语言配色系统综合篇的上篇(当然...

5169
来自专栏机器之心

资源 | Facebook开源DrQA的PyTorch实现:基于维基百科的问答系统

选自GitHub 机器之心编译 参与:Panda 今年 4 月,斯坦福大学和 Facebook 人工智能研究所在 arXiv 发布了一个基于维基百科的开放域问题...

4565
来自专栏数据小魔方

R语言数据地图——全球填色地图

今天这篇是昨天美国地图的续篇,同样的方法技巧,不同的对象。 整个过程以及代码并没有太大差别,只要拿到世界地图素材,根据之前的代码,自己修改参数和指标名称以及引用...

1.2K7

扫码关注云+社区

领取腾讯云代金券