　

日志

关于我

yifeng

文章分类

分析三种常用图片格式的运用

2009-03-20 15:38:27| 分类：图形图像 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

转载来源：中国教程网

原始发布时间：2008-08-11

　　我们最理想的图片是容量小质量高清晰的，这得根据不同图片的性质选择不同的输出格式。网上现今常用的图片格式有jpg、gif、png，至于bmp、svg、tif等格式由于文件大或浏览器不支持等原因不建议使用。

常用图片格式的特点：

jpg 有损、文件小
　　是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。

gif 无损、≤256色、动画、支持背景透明
　　是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。

png 无损、支持背景半透明(IE6下得用滤镜)
　　是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30％的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。

做些试验…

图像
格式	jpg	gif	png
大小	994字节	2.55kb	2.01kb
质量	不清楚	清楚	清楚

　　类似这种规则渐变色彩比较丰富的输出为png。比如body里大背景渐变、水晶风格按钮等。

图像
格式	jpg	gif	png
大小	1.29kb	273字节	438字节
质量	不清楚	清楚	清楚

　　色彩比较单纯的小图输出成gif。常常应用在一些小按钮和icon小图标上。

图像
格式	jpg	gif	png
大小	7.42kb	15.1kb	35.1kb
质量	还行	清楚	清楚

　　人像风景类色彩非常复杂的图输出为jpg。这里gif图看上去也不错，但是如果图片尺寸稍大一点你就会发现它们的容量大小和图片质量会有明显的差距。

　　另外，gif动画的局限性很大，但它在网上使用得非常频繁，它只适用于色彩比较简单的小图，而对于人像风景类大图是不建议做成gif动画的，因为那样的图片大小和质量都是很吓人的。gif和png都可以背景透明，png还支持半透明，但IE6以下不支持，需要使用滤镜。

评论这张

转发至微博

阅读(109)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085074093083081075084082095095085094082066083094080075',
              blogTitle:'分析三种常用图片格式的运用',
              blogAbstract:'我们最理想的图片是容量小质量高清晰的，这得根据不同图片的性质选择不同的输出格式。网上现今常用的图片格式有jpg、gif、png，至于bmp、svg、tif等格式由于文件大或浏览器不支持等原因不建议使用。',
              blogTag:'图片',
              blogUrl:'blog/static/18317868200922033827216',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:1317427131408,
              publishTime:1237534707216,
              permalink:'blog/static/18317868200922033827216',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/18317868200922033827216">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

导航

日志

分析三种常用图片格式的运用

历史上的今天

最近读者

热度

评论

页脚