zoukankan      html  css  js  c++  java
  • 简述jpg、gif、png-8、png-24的区别,分别使用场景

    gif、jpg、png格式的图片在网站制作中的区别

    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图片的边缘会显示得更加平滑。

    对png8的误解

    Png8的在ie中的怪异表现

    半透明的png8在ie6以下的浏览器显示为全透明。

    alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)

    由上面可以总结:

    (a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其一下的浏览器下错误的显示成全透明,其它的浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只能显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。

    (b)第二个bug没有什么好的方法解决,只有通过影响性能的方法AlpaImageLoder与需要加特殊标签(VML)。

    因此得出结论就是:请使用PNG8。

    png8的软件问题:

    Photoshop只能导出布尔透明的PNG8。

    Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.

  • 相关阅读:
    使用 asp.net mvc和 jQuery UI 控件包
    ServiceStack.Redis 使用教程
    HTC T8878刷机手册
    Entity Framework CodeFirst 文章汇集
    2011年Mono发展历程
    日志管理实用程序LogExpert
    使用 NuGet 管理项目库
    WCF 4.0路由服务Routing Service
    精进不休 .NET 4.0 (1) asp.net 4.0 新特性之web.config的改进, ViewStateMode, ClientIDMode, EnablePersistedSelection, 控件的其它一些改进
    精进不休 .NET 4.0 (7) ADO.NET Entity Framework 4.0 新特性
  • 原文地址:https://www.cnblogs.com/suajiu9/p/6372110.html
Copyright © 2011-2022 走看看