zoukankan      html  css  js  c++  java
  • 切图时图片的选择:JPG、PNG、GIF的区别

    目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁。虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题。如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果。下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择。

    PNG、GIF、JPG 介绍

    GIF 图片

    Gif 算是比较老的图片格式了,它的色彩效果最低,用保存鲜艳的图片的话会让你的网站看上去非常可怕。但是有着不可忽视的特点:体积小,有着极好的压缩效果,支持动画,并且支持透明效果,虽然这个透明没有PNG的那样渐变透明的强大。动画选gif没错;如果你的图片只有很单调的色彩,没有渐变色,例如只有红蓝两色,那么选GIF最好不过了!例如百度的首页LOGO就是很好的例子,它的大小只有2KB,节省了资源。

    WEB前端设计高保真切图图片格式JPG、PNG、GIF的区别,该选择谁

    JPG / JPEG 图片

    JPG是数码相机最常用的格式,其特点是色彩还原好,可以在照片不明显失真的情况下,大幅降低体积,所以体积不很大,缺点是不支持透明。照片类的图片,例如网站上的Gallery,你想要张贴出来的自然风景之类,最好都用JPG。

    WEB前端设计高保真切图图片格式JPG、PNG、GIF的区别,该选择谁

    PNG 图片

    可谓是最适合网络的图片!PNG的优点是,清晰,无损压缩,压缩比率很高,可渐变透明,具备几乎所有GIF的优点;缺点是不如JPG的颜色丰富,同样的图片体积也比JPG略大。但是PNG应该在网站设计上被推广,它是公认的最适合网页使用的图片格式。Google就是一个很好的例子。Google所有站点几乎全部的图片资源都是PNG格式。8位的PNG完全可以替代掉GIF。

    PNG有着另一个优点,那就是逐次逼近显示(progressive display):传输图像文件的同时,可以先把整个轮廓显示出来,然后逐步显示图像的细节,即先显示低分辨率显示图像,从模糊到清晰,然后逐步提高它的分辨率。这是一个很好的用户体验。

    所以我们在android与IOS的中甚至web网页设计中,图片中主流通常使用的png格式,不仅仅是它有透明度,而且还有一定的矢量优势!

    各方面比较

      大小比较:通常地,PNG ≈ JPG > GIF

      透明性:PNG > GIF > JPG

      色彩丰富程度:JPG > PNG >GIF

      兼容程度:GIF ≈ JPG > PNG

    注意,IE6下PNG的透明是不能显示的,有其对应的Hack方法。

    深圳半价门票、半价美食,关注【深圳生活宝】公众号,各种福利资源,优惠活动
  • 相关阅读:
    perl 模拟curl 发送json数据
    perl put 发送数据
    8小时浓度均值即连续8个小时浓度的平均值
    awk 字段匹配
    rsyslog imfile配置
    EasyUI datetimebox 的onchange事件的问题
    5大领先的商业智能解决方案,国产上榜!
    5大领先的商业智能解决方案,国产上榜!
    perl post 带中文名字的文件
    Openstack 实现技术分解 (2) 虚拟机初始化工具 — Cloud-Init & metadata & userdata
  • 原文地址:https://www.cnblogs.com/yzhihao/p/6226380.html
Copyright © 2011-2022 走看看