切图时图片的选择:JPG、PNG、GIF的区别

摘要:
目前,有三种流行的网站图像,JPG、PNG和GIF。然而,许多人不知道他们应该选择谁。PNG、GIF和JPG引入GIF图片GIF是一种旧的图片格式。它具有最低的颜色效果。用gif保存明亮的图片会让你的网站看起来很糟糕。8位PNG可以完全取代GIF。各方面的尺寸比较:通常,PNG≈ JPG>GIF透明度:PNG>GIF>JPG色彩丰富度:JPG>PNG>GIF兼容性:GIF≈ JPG˃PNG注意,PNG透明度不能在IE6下显示,并且有相应的哈克方法。

目前网站图片的采用一共有流行三种,分别是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方法。

免责声明:文章转载自《切图时图片的选择:JPG、PNG、GIF的区别》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇JVM 详解JDK安装下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

H50073:div 循环添加点击事件,swiper循环添加点击事件

1,div 循环添加点击事件 <div class="video home_video"> <div class="videolist"vpath="4.mp4"ipath="4.mp4"><img src="../common/images/theme/default/video_icon.png"&...

cursor url 自定义鼠标样式

cursor可以自定义鼠标,写法是cursor:url(“图片路径”),pointer; url:需使用的自定义光标的 URL。图片类型需要是.cur或.ani和jpg,png等格式的(.cur或.ani的兼容性会更好一些,现在一般也不用考虑兼容性了)。 pointer: 默认的鼠标光标样式,当没有找到可用的定义光标时会使用此光标辞官表可自选一个鼠标样式...

【Matlab图像处理】学习笔记:读取16进制RGB文档转为彩色图片

在JPEG解码中对JPG图片进行了解码,解码的数据分为RGB三色,这三色数据(16进制)存放在3个文件中red.dat,green.dat,blue.dat;用matlab把这3色数据复原成图像。 这里仅对红色处理,其他两种颜色的处理方法类似。 这里解码的是一幅1080*1920的jpg图片。 red.dat文件中存放的是16进制的数据 格式如上图,这里...

记录yii2-imagine几个常用方法

记录yii2-imagine几个常用方法:      //压缩 Image::thumbnail('@webroot/img/test-image.jpg', 120, 120)->save(Yii::getAlias('@webroot/img/thumb-test-image.jpg'), ['quality' => 100...

css蜂窝样式

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     &l...

微信分享连接个别手机、ios转发不显示图片的,缩略图不出来

像上面这种,微信分享后,打开是这样的。显示不了缩略图 解决方法: 在我们的网站网页 html代码中的<body>之后(也就是网站的第一张图片)增加<img src="http://singrr.com/wm/img/logo.jpg" /> 在body下面加 后缀名为jpg的 <img src="https://www.sh...