1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 用户体验 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

图片格式与设计那点事儿--九分科技

时间:2020-06-04   分类:用户体验    作者:网络   来源:网络整理   点击:189

图片格式与设计那点事儿--九分科技

内容采集来自9fen.net

第一次写技术博客,有不尽如人意的地方,还请见谅和指正。 copyright 9fen.net

为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法。 内容采集来自9fen.net

除此之外,我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果,什么样的设计才更适合Web页面;页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。 www.9fen.net

有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。

内容采集来自9fen.net

本文主要包括以下几方面内容:

本文来自九分网络

1、基本概念

矢量图与位图 copyright 9fen.net

有损压缩与无损压缩 本文来自九分网络

www.9fen.net

2、实际应用

什么时候应该使用PNG

内容采集来自9fen.net

什么时候应该使用JPG 九分网络

总结 内容采集来自9fen.net

九分网络

3、思考与实践

什么样的设计更适合Web页面?

本文来自九分网络

我们还可以做些什么?

www.9fen.net

www.9fen.net

4、附录-Photoshop中各种参数的含义及设置技巧 内容采集来自9fen.net

1、基本概念

要了解图片格式的特性,首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥,但如果你耐着性子读完它,相信会获益匪浅。 www.9fen.net

矢量图与位图 矢量图-完美的几何图形

矢量图是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述,当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。 内容采集来自9fen.net

矢量图的优点在于文件相对较小,并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。

copyright 9fen.net

需要强调说明的是我们在web页面上所使用的图像都是位图,即便有些称为矢量图形(如矢量icon等)也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的(区别于像素绘制的图形)。 内容采集来自9fen.net

位图-神奇的拼图

位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点,当我们把这些不同颜色的像素点按照一定规律排列在一起的时候,就形成了我们所看到的图像。所以当我们放大一幅像素图时,能看到这些拼片一样的像素点(如下图)。

内容采集来自9fen.net

位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大,放大和缩小图像会失真。 copyright 9fen.net

尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图,即他们都是通过记录像素点的数据来保存和显示图像,但这些不同格式的图像在记录这些数据时的方式却不一样,这就是涉及到有损压缩无损压缩的区别。

www.9fen.net

有损压缩与无损压缩 有损压缩-你看到的不一定是真实的

按照我的理解有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息,它会根据人眼观察现实世界的特性(人眼对光线的敏感度比对颜色的敏感度要高,生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色)对图像数据进行处理,去掉那些图像上会被人眼忽略的细节,然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量,又不会影响图像的还原效果。 内容采集来自9fen.net

JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成8*8像素的栅格(如上图),然后对每个栅格的数据进行压缩处理,当我们放大一幅图像的时候,就会发现这些8*8像素栅格中很多细节信息被去除,而通过一些特殊算法用附近的颜色进行填充(为了让大家看得更清楚我将图像的压缩比率调到很低)。这也是为什么我们用JPG存储图像有时会产生块状模糊的原因。

copyright 9fen.net

无损压缩-最精确的拼图

相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息,但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的,哪些是不同的,然后把这些相同的数据信息进行压缩记录,(例如一片蓝色的天空之需要记录起点和终点的位置就可以了),而把不同的数据另外保存(例如天空上的白云和渐变等数据)。 九分网络

标签: 用户体验

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----