【学习笔记】Web技术常用图片特点及使用

一、图片特性介绍

 

1. JPG

    JPG是Joint Photographic Experts Group(联合图像专家组)的缩写。有损压缩，会造成图像画面失真，不过压缩之后的体积很小，而且还比较清晰。所以比较适合在网页中应用。

    此格式适合用于摄影或者连续色调的高级格式，因为JPG文件可以包含数百万种颜色。随着JPG文件质量的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPG文件在图像质量和文件大小之间达到良好的平衡。制作软件有：Photoshop、HyperSnape等。

 

2. GIF网页中使用最广泛最普遍的图像格式。

    GIF是Graphics Interchange Format(图像交换格式)的缩写。无损压缩，支持256色，体积小，支持透明，支持帧动画(最打的特点)。制作软件有：Photoshop、GIF Construction Set等。

 

3. PNG

    PNG是Portable Network Graphic Format(流行网络图形格式)的缩写。位图，无损压缩，高保真，透明性，体积较小。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。

 

4. SWF

    SWF 是Shock Wave Flash的缩写，是多媒体图像动画，可用比较小的体积表现丰富的多媒体形式。可以边传输边观看，故特别适合网络传输，特别是在传输路率不佳的情况下，也能取得较好的效果。SWF格式是基于矢量技术制作的，无论即将画面放大多少倍，不会有任何失真。SWF的缺点是，制作起来非常耗时。制作软件有：Flash、SWFtext等。

 

5. BMP

    BMP是Bitmap(位图)的缩写。在Windows操作系统中用的比较多，可以用任何颜色深度（从黑白到24为）存储单个光栅图像，与其他Windows兼容。不支持文件压缩，占用磁盘大，不适用于Web。制作软件有：PhotoShop、Windows自带的“画图”软件等。

 

 

二、使用总结web应用中，最普片的三种图片格式分别是：GIF、JPG、PNG，其中PNG又分为PNG-8和PNG-24。

 

1、透明问题

实际情况：

1）支持透明的有GIF和PNG格式。

2）GIF只支持像素的全透明，对与半透明像素，会以相近颜色代替，这就得不到想要的透明效果了。因此，有时GIF图片在透明和不透明的边界上会出现丑陋的锯齿毛边。

3）PNG没有GIF毛边的问题，但是新的问题来了，IE6不支持PNG格式图片，其透明部分会全部以白色代替。

 

解决方案：

1)网上找一段JS代码，使得IE支持PNG图片。网上类似代码很多，这里贴出一段自己使用过的：

 

 

<script language="javascript">

    function correctPNG() 

    {

        for(var i=0; i<document.images.length; i++)

        {

            var img = document.images[i]

            var imgName = img.src.toUpperCase()

            if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

            {

                var imgID = (img.id) ? "id='" + img.id + "' " : ""

                var imgClass = (img.className) ? "class='" + img.className + "' " : ""

                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

                var imgStyle = "display:inline-block;" + img.style.cssText 

                if (img.align == "left") imgStyle = "float:left;" + imgStyle

                if (img.align == "right") imgStyle = "float:right;" + imgStyle

                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  

                var strNewHTML = "<span " + imgID + imgClass + imgTitle

                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 

                img.outerHTML = strNewHTML

                i = i-1

            }

        }

    }

    window.attachEvent("onload", correctPNG);

</script> 

 

 

 

2)有时受到开发平台和技术的限制，网上找的JS代码已经解决不了问题了，下面这个委屈求全的方法就有用了：

   同时制作一张GIF和PNG的图片，在写样式时，PNG作为常规使用，GIF用于针对IE6编写hike。这样在非IE下，效果是完美的，只在IE6下的小瑕疵就无视吧。注意，IE6的hike应当位于常规样式之下才能被正确解析。

   eg：假设有一个div，背景图片是一张透明图。样式为{background:url(#); _background:url(#);}

3)如果图片只是纯色，使用滤镜就OK了，滤镜的兼容性问题也要注意哦！~

 

2、图片质量和大小的取舍问题

     在切图时，一般优先选择保存为gif格式。因为在图片质量能保证的情况下，图片规格一定时，gif格式所占空间最小，加载较快。当然，由于gif格式只有256色，这就导致当图片色域较广时，图片质量差，失真严重。这时候就需要选择存为JPG格式了，可以通过调整图像的品质在80左右，来减小因为提高一点点质量而付出的高昂空间代价。个人不推荐使用png格式，因为png-8格式的大小和jpg格式差不多，但是质量却不如jpg格式，而png-24格式质量和jpg格式差不多，但会大出很多。

 

注：透明问题，没考虑IE6以下版本的浏览器，要是还有人用那些个版本，我也米办法了~

      归纳的不好或不完整的地方，后期学习中慢慢补充。