最近有很多朋友在开发过程中有时候会遇到图片加载不清晰,透明度失真,或者对图片进行操作之后造成图片损耗的现象,在这里给大家简单介绍一下常用的几种图片格式之间的区别

Gif格式特点:
  1.透明性,Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha透明)。
  2.动画,Gif这种格式支持动画。
  3.无损耗性,Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
  4.水平扫描,Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小
  5.间隔渐进显示,Gif支持可选择性的间隔渐进显示
  由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择,我们会在后面中看到png是最优的选择。
  Jpeg格式特点:
  1.透明性,它并不支持透明。
  2.动画,它也不支持动画。
  3.损耗性,除了一些比如说旋转(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。
  4.隔行渐进显示,它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全到达的时候显示)。
  由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。
  Png格式特点:
  1.类型,Png这种图片格式包括了许多子类,但是在实践中大致可以分为256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpeg
  2.透明性,Png是完全支持alpha透明的(透明,半透明,不透明),尽管有两个怪异的现象在ie6(下面详细讨论)
  3.动画,它不支持动画
  PNG图片格式现在包含三种类型:
  1.PNG8256色PNG的别名
  2.PNG24全色PNG的别名
  3.PNG32全色PNG的别名
  基本上PNG32就是PNG24,但是附带了全alpha通道。就是说每个像素上不仅存储了24位真色彩信息还存储了8位的alpha通道信息,就如同GIF能存储透明和不透明信息一样。当我们把图片放到不太搭配的背景上的时候,透明PNG图片的边缘会显示得更加平滑。
  虽然Photoshop也能生成带透明通道的PNG图片,但是它只是表面上这么说是PNG24,让我也产生困惑了。
  我使用PNG32支持附带alpha通道的真色彩图片。不管怎样,如果你习惯使用Photoshop,你就应该知道,Photoshop在“存储为WEB格式”中只提供PNG8和PNG24两种PNG格式。
  
  对png8的误解
  Png8的在ie中的怪异表现:
  半透明的png8在ie6以下的浏览器显示为全透明。
  Alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)。
  由上面可以总结:
  (a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。
  (b)第二个bug没有什么好的方法解决,只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。
  因此得出结论就是:请使用PNG8。
  Png8的软件问题:
  Photoshop只能导出布尔透明的PNG8。
  Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.
 

简述.jpg .Gif .png-8 .png-24的区别的更多相关文章

  1. 简述jpg。Gif。png-8.png-24的区别,分别使用场景

    gif.jpg.png格式的图片在网站制作中的区别 一.Gif格式特点: 1.透明性,Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha透明). 2.动画,G ...

  2. php时间12小时和24小时区别

    date('Y-m-d H:i:s',$row1['time']) 大写H为24小时制 小写h为12小时制

  3. 简述C#中关键字var和dynamic的区别

    C#中关键字var和dynamic的区别如下: 1.var申明的变量必须初始化,dynamic申明的变量无需初始化. 2.var关键字只能在方法内部申明局部变量,dynamic关键字可用于局部变量,字 ...

  4. 简述sprintf、fprintf和printf函数的区别

    都是把格式好的字符串输出,只是输出的目标不一样:1 printf,是把格式字符串输出到标准输出(一般是屏幕,可以重定向).2 sprintf,是把格式字符串输出到指定字符串中,所以参数比printf多 ...

  5. [转] 简述js中 for in 与 for of 区别

    for in是ES5标准,遍历key. for of是ES6标准,遍历value. for (var key in arr){ console.log(arr[key]); } for (var va ...

  6. 简述var、let、const三者的区别

    前二者为定义变量,const一般用来定义常量. 1.var声明变量可以重复声明,而let不可以重复声明 var name = 'xiaohuang'; var name = 'xiaolan'; co ...

  7. 简述Python中的break和continue的区别

    众所周知在Python中,break是结束整个循环体,而continue则是结束本次循环再继续循环. 但是作为一个新手的你,还是不明白它们的区别,这里用一个生动的例子说明它们的区别,如下: 1.con ...

  8. Unity3D面试题汇总

    1.请描述游戏动画有哪几种,以及其原理. 2.alpha blend 工作原理 3.写光照计算中的diffuse的计算公式 4.lod是什么,优缺点是什么 5.两种阴影判断的方法工作原理 6.MipM ...

  9. 去蓝港在线面试Unity3D的笔试题。难吗?知道答案的在评论里写出来分享

    前一阵子去蓝港面试unity3d程序,在前台登记以后被领到一个吧台前面填2张个人信息表,之后有人送来笔试题,做了1个小时,感觉挺难的.之后被带到下面面试,面试的是一个年龄稍大的(可能是项目经理或者技术 ...

  10. 前端面试题总结:HTML5,JS,CSS3,兼容性。

    1. 请写出至少20个HTML5标签 <article><aside> <audio><video> <canvas><datalis ...

随机推荐

  1. BootStrap TreeView使用示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. github 创建新项目

    二.GitHub简介 GitHub 可以托管各种Git版本库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进 ...

  3. Android项目文件结构

    一.Project项目结构 app/build/ app模块build编译输出的目录 app/build.gradle app模块的gradle编译文件 app/app.iml app模块的配置文件 ...

  4. JAVA中用于处理字符串的“三兄弟”

    JAVA中用于处理字符串常用的有三个类:java.lang.String.java.lang.StringBuffer.java.lang.StringBuilder,这三者的共同之处都是final类 ...

  5. Java打印

    Java打印 import java.awt.Color; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Gra ...

  6. Raphael的transform用法

    Raphael的transform用法 <%@ page language="java" contentType="text/html; charset=UTF-8 ...

  7. 细说WPF数据绑定

    简单的事例:   <Slider Name="mySlider" Height="28" HorizontalAlignment="Left&q ...

  8. 《Linux多线程服务端编程》笔记——线程同步精要

    并发编程基本模型 message passing和shared memory. 线程同步的四项原则 尽量最低限度地共享对象,减少需要同步的场合.如果确实需要,优先考虑共享 immutable 对象. ...

  9. 二维动态规划——Interleaving String

    97. Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2 ...

  10. Canvas 图片灰度

    我们可以通过下面几种方法,将其转换为灰度: 1.浮点算法:Gray=R*0.3+G*0.59+B*0.11 2.整数方法:Gray=(R*30+G*59+B*11)/100 3.移位方法:Gray = ...