各种烦人图片资料的整理整合，也帮助自己进行一下梳理，有新的内容页会随时更新，大家看着图片烦恼的也可以看下，希望对和我一样的菜鸟有帮助哈！
当然对于高手来说，您的回复是我勃起的动力
首先还是要喊下口号————前端什么的简单爆了
1PNG图片
1.1PNG图片的定义
PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。
1.2我们常用的PNG8与PNG24的区别
PNG文件格式分为PNG-24和PNG-8，其最大的区别不是颜色位的区别，而是存储方式不同;
PNG-8 色盘索引、调色板中一位透明值、不支持阿尔法通道的半透明，存储格式中每个像素无透明度的数据块定义;PNG-8是用8位索引值来在调色盘中索引一个颜 色，因为一个索引值的最大上限为2的8次方既128，故调色盘中颜色数最多为128种，所以该文件格式又被叫做PNG-8128仿色。
PNG-24 无调色板、支持阿尔法通道的半透明、每个点阵都有透明度的定义，最低32位真彩色;是PNG-24是用24位来保存一个像素值，是真彩色。
PNG-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。我们通常说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明（将透明区域显示为灰色）。但是 IE6 支持 PNG-8 的透明，就像支持 gif 的透明一样。
简单爆了的定义：以上所说都可以不看，总之1、PNG8支持全透明，并且各个浏览器都非常支持它，PNG8的半透明在IE6下会显示成全透明（这是PNG8优于GIF的其中 一点，半透明显示成全透明对用户的影响并不大）。2、PNG24支持半透明，IE6看他不爽，不支持他。所以就会衍生出了各种各样的解决办法。
那么介绍下网寻找的3种PNG图片透明的解决办法
NO.1我最喜欢的方案——DD_belated
支持background-repeat，支持background-position,支持<img>。支持IE1,2,3,4,5,6,7,8,9,10，支持到你有高潮
看Demo: http://www.ediyang.com/demo/DD_Png/
使用方法：
1.在这里下载DD_belatedPNG.js文件.
http://dillerdesign.com/experiment/DD_belatedPNG/#download
2.在网页中引用,如下:
<!--[if IE 6]> <script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script> <script type="text/javascript"> /* EXAMPLE */ DD_belatedPNG.fix(\'.png_bg\'); /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的\'.trans\'*/ </script> <![endif]-->
3.如果你要使用a:hover就要注意你使用的选择器
<!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG.js" ></script> <script type="text/javascript"> DD_belatedPNG.fix(\'.trans,.box a:hover\'); </script> <![endif]-->
简单爆了的定义：喜欢吗？您的回复就是我勃起的动力。
NO.2Microsoft 的专有滤镜
当把PNG半透明图片作为背景使用时可以使用专用滤镜
.class{ width:100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/bg.png"); background:none; }
但要解决背景上浮文字链接时还需要再次处理：
#menu{filter:progid:dximagetransform.microsoft.alphaimageloader(src=\'index.files/menu_bg.png\', sizingmethod=\'scale\');} <div id="menu"> <div id="menu_link" style="position: relative;"><a href="#">链接</a></div> </div>
NO.3让块透明
.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}
测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。
简单爆了的定义：非常不好的方法，可以不看，恩，没看错，就当只做了解吧
2JPEG图片
2.1JPEG图片的特点
1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
简单爆了的定义：比PNG更适合用来对付像照片等各种颜色比较复杂层次较多的图片
3GIF图片
3.1GIF图片的特点
他支持全透明，也支持全不透明，但他真的不支持半透明的。非常重要的是:他是今天介绍的格式里唯一支持动画效果的。
简单爆了的定义：除了你需要支持动画，或者图片非常非常小以外，你都应该选择PNG8.