图片格式与设计那点事儿
作者：平四 来源：taobaoUED 发布时间：2011-01-06 12:17:00
第一次写技术博客，有不尽如人意的地方，还请见谅和指正。
为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。
除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。
有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。
本文主要包括以下几方面内容：
1、基本概念
矢量图与位图
有损压缩与无损压缩
2、实际应用
什么时候应该使用PNG
什么时候应该使用JPG
总结
3、思考与实践
什么样的设计更适合Web页面？
我们还可以做些什么？
4、附录-Photoshop中各种参数的含义及设置技巧
1、基本概念
要了解图片格式的特性，首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。
矢量图与位图
矢量图-完美的几何图形
矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。
矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。
需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。
位图-神奇的拼图
位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图）。
位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。
尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。
0
投稿猜你喜欢
- 3. 品味“决定”艺术作品的好坏，设计的好坏则来自主观意见我们在鉴赏艺术作品时，用看法来表达当时的感觉，而你的品味则会左右你的看法。以一个有
- 1069错误（由于登录失败而无法启动服务）解决方法在本版面出现这个问题的频率也算是很高的了，新手通常会比较多遇到这个问题原因很简单，安装SQ
- [sql] -- ===================【创建存储过程】===================== USE [Message
一个朋友给她的朋友买礼物。撕心裂肺、绞尽脑汁。最后蹦出来一个主意：“送打火机”我不知道小妞们通过哪的投票，就这么断定男人都喜欢打火机。导致一- 两列布局的定宽自适应已经详解了，三列浮动中有两列定宽一列自适应的也详解了，那么该说说三列浮动中两列自适应一列定宽的布局了。中间定宽，左右两侧
- 呃，看到这个标题，我们可以首先将IE系浏览器无视了。我承认，我是有极简主义倾向的，我希望能够使用最少的代码和图片做更多的事情。虽然CSS3仅
- 由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同的类型,数组的元素设置可
- 在 Web 编辑器领域，CKEditor – 七年的专注，赢取的是王者风范。TinyMCE – 五年前的小家碧玉，如今已成长为大家闺秀。Go
- 这里其实并不需要其它的什么函数来支持，只需要使用MYSQL提供的一些SQL语句就可以了。这里为了简单起见，以MYSQL的系统表USER为例，
- 一、逻辑数据库和表的设计数据库的逻辑设计、包括表与表之间的关系是优化关系型数据库性能的核心。一个好的逻辑数据库设计可以为优化数据库和应用程序
- 数据库安全性问题一直是围绕着数据库管理员的恶梦，数据库数据的丢失以及数据库被非法用户的侵入使得数据库管理员身心疲惫不堪。围绕数据库的安全性问
- 用两个文件.GLOBAL.ASA和online.asp下面分别给出两个文件的源代码.呵呵,我也是菜鸟,大家加油哟!<SCR
- 当我们建好数据库及表后,首先想到的就是向数据库的表中输入数据.下面我们就来探讨一下如何向数据库增加数据:1.常用的方法是insert语句in
- 您是否记得关闭所有的XHTML元素，在HTML中一些元素没有必要被关闭。当下一个元素开始的时候，上一个元素就自动被关闭。XHTML中是不允许
- Access 操作很简单，具体不步骤如下：打开你mdb数据库，工具－－＞数据库实用工具－－＞压缩和修复数据库（c）... SQL SERVE
- 北京邮电大学 张剑XML的局限性目前，许多Web网站的内容数据都存放在数据库或数据文件中。对于Web程序开发人员来说，如果要想把有用的信息从
- 摘要：随着应用领域的不断拓展和多媒体技术, 人们发现关系数据库的许多限制和不足，因而数据库技术进入了“后关系数据库时代”。文件数据库由此应运
- 操作系统：Windows2000，IIS5出现症状：使用ASPJPEG时执行Server.CreateObject("Persit
- 最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工
- 网页广告 Banner 设计图文手册：采用以下要点来改善你的BANNER。广告并不便宜。 确信你的广告被第一时间读到。使用像这样的Sans
