最受欢迎的几种图片格式及其常见用法

简介:

  从某种程度上说,判断一个网页设计师是否优秀,可以从其在WEB开发(或网页设计)中是否合理的采用各种图片格式得出结论。事实上,或许所有人都知道图片存在GIF,JPG和PNG等格式,但并非所有人都知道它们之间的具体区别和使用技巧。
  接下来,将给大家介绍:WEB开发中几种最受欢迎图片格式的前世今生以及如何正确的使用它们。

JPEG

  JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲,就是:高的压缩比=低的图片质量=小的文件大小。反之,低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100 %的原始图像的像素数据,所以它不被认为是一种无损图像格式。


用途:
  由于这种极其敏感的平衡特性,JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片(照片)场合。反之,JPEG格式图片并不适合做简单色彩(色调少)的图片,比如LOGO,各种小图标(ICONS)。

 

GIF

  GIF格式,是为使图片能够应用在在线(online)应用程序上所特别开发的图片格式。Gif,有时也被成为“Giff”,是一种无损,8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指,所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色(一个多余256种颜色的图片若用gif图片保存会出现失真)。


用途:
  由于8位颜色深度的限制,Gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合:

  • Logo
  • 小图标(Icon)
  • 用于布局的图片(例如某个布局角落,边框等等)
  • 仅包含不超过256种色彩的简单,小型图片场合


透明特性:
  GIF支持基本的透明特性,这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时,我们就可以看到通过这些不可见区域看到此图片后面的背景颜色(图片)。此特性非常有用:如果你需要将某个gif图片的内容置于所有图片的上层,你可以将其设置为透明。


压缩特性:
  GIF格式采用LZW算法进行压缩,此算法是Unisys申请的一项专利。在很久很久之前,如果你想使用GIF格式,那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是,此项专利技术已于2003年6月20日过期,我们现在可以免费的使用GIF了!


隔行扫描:
  GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。


动画GIF:
  一个动态的GIF文件,是由若干帧图片所联结而成的动态图片。在显示时,这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。合理的运用GIF动画能够为网页增添动静结合的效果,而过度的使用则会使网页杂乱无章。

 

PNG

  PNG,读“ping”,初始时被作为GIF的免费替代格式所开发,采用公共专利压缩算法。PNG格式也是一种无损压缩,但与GIF格式不同的是,PNG同时支持8位和24位的图像。


8位PNG图像:
  一个8位PNG图片,支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外,此8位PNG格式与GIF格式极其相似;


用途:
  8位PNG图片的用途与GIF格式基本相同,

  • Logo
  • 小图标(Icon)
  • 用于布局的图片(例如某个布局角落,边框等等)
  • 仅包含不超过256种色彩的简单,小型图片场合

 

24位PNG图像:
  24位PNG,支持160万种不同的像素颜色且支持Alpha透明效果,这就意味着,无论透明度设置为多少,PNG图片均能够与背景很好的融合在一起。


对PNG的支持:
  由于PNG格式的广泛使用和开发者更加重视网页的WEB标准,不同浏览器对PNG的支持就显得相当重要了。不过,幸运的是,目前市场上主流的浏览器对PNG格式都有很好的支持,这包括:IE*, Firefox, Safari, Opera, and Konqueror。
  但不幸的是,IE6及IE6以下的浏览器对PNG透明背景的支持并不好。不过我们仍可以通过其他方法来解决这个问题,详情请查看如何在IE6中正常显示透明PNG。






本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/archive/2013/04/22/category-of-picture.html,如需转载请自行联系原作者

目录
相关文章
|
12天前
|
数据采集 存储 Go
使用Go语言和chromedp库下载Instagram图片:简易指南
Go语言爬虫示例使用chromedp库下载Instagram图片,关键步骤包括设置代理IP、创建带代理的浏览器上下文及执行任务,如导航至用户页面、截图并存储图片。代码中新增`analyzeAndStoreImage`函数对图片进行分析和分类后存储。注意Instagram的反爬策略可能需要代码适时调整。
使用Go语言和chromedp库下载Instagram图片:简易指南
|
9月前
|
存储 XML 编解码
探索现代图片格式:从GIF到HEIF,优势与适用场景一览-2
使用场景: JPEG适用于各种需要高度压缩、广泛兼容性以及不需要透明背景的场景。它特别适用于摄影、照片、艺术品等复杂图像的存储和展示。
247 0
|
9月前
|
存储 编解码 算法
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
引言 最近在掘金看到很多动图头像,但都失真了,好奇就研究了下前端各种图片格式
162 0
|
运维 Python
|
缓存 iOS开发 MacOS
万能动态滤镜GIF框架想不想要的?
Wintersweet是一款快速让控件播放GIF和添加过滤器的框架。
万能动态滤镜GIF框架想不想要的?
|
Web App开发 编解码 前端开发
石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)
我们知道,在前端界有一个共识:速度就是生命,带宽就是金钱。怎样将页面加载速度有效提升是无数前端工程师无时不刻在思考的课题,目前的网络环境中,除了视频,图片仍旧是占用流量较大的一部分,对于app端尤其如此,因此,如何在保证图片视觉不失真的前提下缩小图片体积,对于节省带宽和电池电量都十分重要,因此Google在十年前提出了一种新的图片压缩格式 :WebP,给图片的优化提供了新的方向。
石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)
|
API 语音技术 vr&ar
基于Python3(Autosub)以及Ffmpeg配合GoogleTranslation(谷歌翻译)为你的影片实现双语版字幕(逐字稿)
为影片加字幕其实是一件非常耗费时间的事情,尤其是对于打字慢的朋友来说。当然不光为影片加字幕,在其他领域,类似的逐字稿也是工作中避免不了的内容。比如写论文,如果内容中有访谈,就必须要附上逐字稿,又或者是会议的记录等等。本次使用基于Python3的AutoSub库对实时语音进行识别,然后再通过GoogleTranslation的在线API接口对语音识别后的内容进行翻译,这样就可以得到一份双语字幕(逐字稿),这里的双语不只针对国语+英语组合,也可以包含其他国家,包括小语种地区,非常方便。
基于Python3(Autosub)以及Ffmpeg配合GoogleTranslation(谷歌翻译)为你的影片实现双语版字幕(逐字稿)
|
计算机视觉
【方便的Opencv】实现图片合成视频+附带图片生成gif
【方便的Opencv】实现图片合成视频+附带图片生成gif
【方便的Opencv】实现图片合成视频+附带图片生成gif
|
数据安全/隐私保护 Python
Python黑科技系列17-关于视频、PDF文件、图片水印如何去除 详解
不论在何时开始,重要的是开始之后就不要停止;不管结果怎样,经历过,总会有结果的 ! 俗话说的好;人生能有几回搏 ? 现在不搏更待何时 ? 对吧。
Python黑科技系列17-关于视频、PDF文件、图片水印如何去除 详解
|
Web App开发 XML 人工智能
如何利用Chrome浏览器将 SVG 转成 PNG
怎么把 SVG 转成 PNG ?用 Chrome 吧,非常好用,还能设定自己想要的尺寸。
359 0
如何利用Chrome浏览器将 SVG 转成 PNG