图片格式与设计那点事儿
作者:平四 来源:taobaoUED 发布时间:2011-01-06 12:17:00
第一次写技术博客,有不尽如人意的地方,还请见谅和指正。
为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法。
除此之外,我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果,什么样的设计才更适合Web页面;页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。
有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。
本文主要包括以下几方面内容:
1、基本概念
矢量图与位图
有损压缩与无损压缩
2、实际应用
什么时候应该使用PNG
什么时候应该使用JPG
总结
3、思考与实践
什么样的设计更适合Web页面?
我们还可以做些什么?
4、附录-Photoshop中各种参数的含义及设置技巧
1、基本概念
要了解图片格式的特性,首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥,但如果你耐着性子读完它,相信会获益匪浅。
矢量图与位图
矢量图-完美的几何图形
矢量图是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述,当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。
矢量图的优点在于文件相对较小,并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。
需要强调说明的是我们在web页面上所使用的图像都是位图,即便有些称为矢量图形(如矢量icon等)也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的(区别于像素绘制的图形)。
位图-神奇的拼图
位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点,当我们把这些不同颜色的像素点按照一定规律排列在一起的时候,就形成了我们所看到的图像。所以当我们放大一幅像素图时,能看到这些拼片一样的像素点(如下图)。
位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大,放大和缩小图像会失真。
尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图,即他们都是通过记录像素点的数据来保存和显示图像,但这些不同格式的图像在记录这些数据时的方式却不一样,这就是涉及到有损压缩和无损压缩的区别。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 多线程-共享全局变量#coding=utf-8from threading import Threadimport timeg_num =
- 1从SQLServer导出数据 执行BCP: bcp "..." queryout "F:\test.txt&
- 表结构如下面代码创建 CREATE TABLE test_tb ( TestId int not null identity(1,1) pr
- js给span标签赋值的方法?一般有两种方法:第一种方法:输出html<body onload="s()">
- 环境win10, python3.7,pyinstaller3.6一 下载pyinstaller(1)cmd中pip install pyi
- 使用cpu和gpu的区别在Tensorflow中使用gpu和cpu是有很大的差别的。在小数据集的情况下,cpu和gpu的性能差别不大。不过在
- 一个站点成功与否,不是在于所用的程序语言是PHP还是ASP,也不在于用BLOG建站或是CMS建站,内容和专业很重要。博客很好起步,CMS体系
- 1、场景描述通常来说,前端要拿到excel数据,都是先上传存储数据库,然后再请求后端接口,获取数据。但有100个产品经理,就会有101个不同
- 概述函数是基本的代码块,用于执行一个任务语法函数定义func 函数名称( 参数列表] ) (返回值列表]){ 执行语句}一.函数
- 当Python执行import语句时,它会在一些路径中搜索Python模块和扩展模块。可以通过sys.path查看这些路径,比如:>&
- 利用问题的普遍性和特殊性来求解,代码如下:import unittestfrom datetime import datetimeclass
- 1.用管理员打开cmd2.首先通过pip命令安装wheelpip install wheel如果提示'pip'不是内部或外部
- JS无法进行精确计算的bug在做CRM,二代审核需求审核详情页面时。需要按比例(后端传类似0.8的小数)把用户输入的数字显示在不同的地方。
- 1 修改默认目录最近刚刚开始学习Python,比较好的一个IDE就是jupyter Notebook。可以一个cell一个cell的显示结果
- 题目:反转一个单链表。示例:输入: 1->2->3->4->5->NULL输出: 5->4->3-
- 一、聚合函数聚合函数:又叫组函数,用来对表中的数据进行统计和计算,结合group by分组使用,用于统计和计算分组数据常用聚合函数count
- 一.问题:太久没用mysql ,忘记了原先的root密码二:解决1.关闭mysql服务2.使用cd指令切换到mysql的bin目录使用mys
- vue在做大型项目时,会用到多状态管理,vuex允许我们将store分割成多个模块,每个模块内都有自己的state、mutation、act
- 本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下用到的apiwx.chooseMedia(); 用于拍摄或从手
- 最近在做深度学习时需要用到图像处理相关的操作,在度娘上找到的图片旋转方法千篇一律,旋转完成的图片都不是原始大小,很苦恼,于是google到歪