web网页常用的图片格式
网页设计与制作知到章节答案智慧树2023年长江职业学院
网页设计与制作知到章节测试答案智慧树2023年最新长江职业学院第一章测试1.网站是网页的基本构成元素。
（）。
参考答案:错2.在Web标准中，行为标准主要包括xml和xhtml两个部分。
（）。
参考答案:错3.目前最新的HTML版本是（）。
参考答案:HTML54.HBuilder中，新建文件的快捷键是（）。
参考答案:Ctrl+N5.制作网页时一般需要兼容以下哪些浏览器（）。
参考答案:谷歌浏览器;IE浏览器;火狐浏览器第二章测试1.当图像不能显示时，可以用下列哪个属性设置替换文本（）参考答案:alt2.下面的选项中，属于网页上常用图片格式的是（）参考答案:GIF格式;JPG格式;PNG格式3.HTML5中，mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。
（）参考答案:对4.下列选项中，属于段落标签的是( )参考答案:<p>标题文本</p>5.下列标签中，用于设置文本斜体的是（）参考答案:<i></i>和<em></em>第三章测试1.在CSS中，用于设置首行文本缩进的属性是（）参考答案:text-indent2.在下列选项中，background-position属性值书写正确的是（）参考答案:p{ background-position:left top; }3.下列选项中，属于背景属性的是（）参考答案:background-repeat;background;background-image4.在下面的选项中，符合CSS基础选择器的语法格式的是（）。
参考答案:p{font-size:12px;};* { margin: 0; padding:0; };.green{color:inherit;;#myfont{font-weight:bold;}5.下面的选项中, 行内式CSS样式的基本语法格式正确的是（）参考答案:<标记名 style="属性1:属性值1; 属性2:属性值2; ......"> 内容 </标记名>6.当<p>标记内嵌套<strong>标记时，就可以使用后代选择器对其中的<strong>标记进行控制，下列写法正确是（）参考答案:p strong{color:inherit;7.页面上的div标签，其HTML代码为<div id="box" class="red">文字</div>，为其设置CSS样式如下：#box{color:blue;}.red{color:red;}那么，文字的颜色将显示为 ( )参考答案:蓝色8.color属性用于定义文本的颜色，以下写法正确的是（）参考答案:;9.在CSS中，使用链入式引入CSS样式表，要通过设置<link />标签的（）属性。
《网页设计与制作》考试试题及参考答案
网页设计与制作单选题30% 多选题 20％填空题１５％简答题２５％论述题１０％The content of exam include,but not limited in:1、Photoshop中允许一个图象的显示的最大比例范围1600%3、在绘制椭圆形时，以中心点为基准画圆应按住什么键ALT键4、Dreamweaver设计网页时，要选中某个单元格，可以将光标先定位在该单元格，然后鼠标移到状态栏的什么标签，单击该标识可以选中该单元格。
Td5、在表格属性设置中，间距的定义：表格中单元格之间的间距。
单元格间距是指围绕在每个单元格周围的框的厚度（以像素为单位）。
6、表单的基本元素有哪些。
①询问或请求信息。
②访问者在其中键入信息的域③“提交”和“全部重写”按钮。
④表单处理程序8、默认模板的后缀名是什么dwt9、对远程服务器上的文件进行维护时，通常采用的是.FTP。
10、为了标识一个HTML文件应该使用的HTHL标记是什么？< html> </html>11、在实际操作中的两种Email超链按方法:答: Dreamweaver中:第一种方法：1）选中需要制作电子邮件超链接的文字或图片。
2）在“属性”面板中的“链接”文本框中输入“mailto”，再输入链接的电子邮件地址。
3）如果想在发邮件的时候带上主题，那么只需在“链接”文本框中输入如下语句，例如：mailto:*********?subject=学习共享。
4）完成电子邮件超链接的制作，预览并点击电子邮件超链接。
5）此时会弹出自动启动Outlook第二种方法：1）将插入点置于e-mail链接出现的地方，或选中要作为e-mail链接出现的文本或图像2）选择插入 > 电子邮件链接。
在对象面板的常用类别中，选择插入E-Mail链接3）在插入E-Mail链接对话框的文本域中，输入或编辑作为e-mail链接出现在文档中的文本。
4）在E-Mail域中，输入邮件将发送到的e-mail地址5）点击OK。
网页答案
创意网页复习1．JPG图像适用于Web页面中颜色丰富的照片级图像，而GIF图像则适合于颜色数相对较少，边界又分明的图像。
2．运动动画是Flash动画制作中使用最为频繁的。
3．下列不属于Flash元件的是帧4． Flash提供的3种类型文本对象: 静态文本\动态文本 \输入文本5．事件是指软件在执行的过程中，可能发生的情况。
6．遮罩就其本质来说就是确定显示范围。
7．库项目不能包含时间轴或样式表，因为这些元素的代码是head的一部分，而不是body的一部分。
8．时间轴的主要组件是图层、帧和播放头。
9．影响场景的因素有背景，帧和播放速度。
10．以下属于网页制作常用工具：FLASH、FIREWORKS、FRONTPAGE11．在网页中常用的汉字字体有宋体，黑体，楷体和仿宋体等。
12．目前在网页中使用最多的图像格式是GIF格式和JPEG格式。
13．在创建Flash动画的过程中，形变动画是较为常用的创作方法，其制作得到的动画效果通常表现为由一种图形逐渐转变为另一种图形。
14．要达到自然平滑的活动效果，播放速率一般应在每秒24-30帧之间。
15．万维网全称为World WideWeb16．影像指活动的视频图像（Video）17．制作站点时，主页文件是必不可少的。
通常，下列主页文件名称错误的为Default. index。
18．在表格中插入文本是表格在网页设计中使用最为广泛的一种方式。
19．Flash是Macromedia公司出品的动画（电影）制作软件。
20．如果要将多个元素作为一个对象处理，可以将它们合并成一个组21．Maya软件不是直接制作网页的软件。
22．网页中的影像素材通过获取的方法有：通过Internet来获取、使用数码摄像机、录像机采集以及从VCD或DVD光盘中截取视频片段23．在Flash软件操作中，为了快捷的使用软件，通常可以使用快捷键来进行操作，新建一个Flash文档的快捷键是Ctrl+N。
24．计算机动画有基于角色的动画（Cast-based）和基于帧的动画两种基本类型。
（完整版）Dreamweaver试题和答案
（完整版）Dreamweaver试题和答案dreamweaver考试题及答案1．⽤下列的（A ）快捷键可以新建⽂件。
A．Ctrl+N B.Ctrl+M C.Ctrl+P D.Ctrl+C2．在Dreamweaver 8中⽂本的输⼊可以⼿⼯输⼊，也可以将别的⽂档中的⽂本复制到Dreamweaver 8编辑的⽹页中，还可以（ A ）。
A．导⼊html、txt⽂档 B.html、txt⽂档C.查找D.修改3.重做的快捷键是( A)。
A．Ctrl+Y B.Ctrl+N C.Ctrl+Z D.Ctrl+O4．分⾏显⽰⽂字应⽤（ B ）。
A．Enter B.Shift+EnterC.Ctrl+EnterD.Ctrl+Alt5．常⽤的⽹页动画格式有（ B ）。
A．gif⽂件和tiff⽂件 B. swf⽂件C．png⽂件 D.swf⽂件和png⽂件6．插⼊“⽔平线”后，要更改⽔平线颜⾊为红⾊，应该（ C ）。
A．在属性⾯板更改颜⾊B．在⽂件⾯板上更改颜⾊C．选中⽔平线，在编辑标签代码中输⼊“color=red”D．选中⽔平线，在编辑标签代码中输⼊“bordercolo=red”7．实现轮替图像应选两幅（ D ）图⽚。
A．相差三倍 B.相差两倍 C.相差⼀倍 D.⼤⼩⼀样8．导航条可以是⽂字链接和（ B ）链接。
A．⽂件 B.图像 C.超级 D.⽂件夹9.链接是（ C ）的简称，利⽤（）可以实现在不同的URL之间跳转。
A．超级链接，修改 B.修改，超级链接C．超级链接，超级链接 D.⽂本，超级链接10．（ D ）不是组成表格的最基本元素。
A．⾏ B.列 C.边框 D.单元格11．选中整个表格应（ A ）。
A.⽤⿏标单击表格的任意边框B．将⿏标移到状态栏，单击“〈tr〉”C．输⼊图⽚D．输⼊⽂字12．要选中某个单元格，可以将光标识先定位在该单元格，然后⿏标移到状态栏的（ C ），单击该标识可以单元格。
A．〈tr〉 B．〈table〉 C．〈td〉 D．〈tm〉13．⽹页页⾯尺⼨和（）有关，⼀般分辨率在800×600的情况下，页⾯的显⽰尺⼨为（ A）个像素。
存储为web所用格式jpg[PS将图片存储为WEB所用格式的最佳方式]
![存储为web所用格式jpg[PS将图片存储为WEB所用格式的最佳方式]](https://img.taocdn.com/s3/m/79bc7a1c2379168884868762caaedd3383c4b53b.png)
存储为web所用格式jpg[PS将图片存储为WEB所用格式的最佳方式]当需要把图片存储为网页所用格式时，为了确保图片无卡顿地清晰显现，考虑它的品质和大小总是很必要的。
这个教程就会教给你关于“存储为web所用格式”你需要知道的知识。
互联网几乎是当今最大的艺术、图形和相片分享平台之一，因此掌握一些保存为网页格式的基础知识就非常重要了。
实际上，保存为网页格式是一项平衡艺术——你必须在图片品质和介质的文件尺寸之间做好平衡，以便满足你的个人需求。
在速度相对重要的地方(如迅速地加载网站)，你可能需要牺牲一些图片品质。
而在品质重要的地方，则需要牺牲一点速度。
这堂课程的目的就是向你介绍一些方法，在这两个因素之间寻求平衡，与此同时保留非常好的图像品质。
无损v损耗数据虽然存在有非常多的图片格式(仅举几例，如jpeg，gif和png)，但是依据压缩方法不同，所有的图片都能进一步归类为两大类别：无损和有损。
无损数据压缩保证了图像在没有任何品质和信息丢失的情况下重现，而有损数据压缩的结果就是可能造成品质和信息的丢失。
在平面设计领域最主流的无损媒介格式包括GIF，PNG，以及TIFF，而JPEG是最主流的有损压缩的图形格式。
如何用PHOTOSHOP保存网页格式PS拥有非常好的方法来为网页优化图片。
在p中，选择文件>存储为web格式或者使用快捷键ctrl+alt+hift+。
一个新的对话框将会弹出，这里有所有为网页保存和优化图片的设置。
我会通过以下一些生活中的案例来演示如何使用对话框中的设置。
为网页存储图像由于图片巨大的文件体积，它们更多是以有损压缩格式来保存的。
甚至在拍照时，相对于数倍大小的RAW格式，相机也倾向于用有损格式(如JPEG)来保存图片。
JPEG是日常中首选的图片格式，它是以它的创造者“联合图像专家小组”来命名的。
Jpeg之所以能够成为标准，是因为它在压缩图像数据的同时可以保留高品质，并且在相关信息上能够接近无损图像的效果。
web网页常用的图片格式
、基本概念矢量图完美地几何图形矢量图是通过组成图形地一些基本元素，如点、线、面，边框，填充色等信息通过计算地方式来显示图形地.就好比我们在几何学里面描述一个圆可以通过它地圆心位置和半径来描述，当然还可以通过边框地粗细、颜色以及填充地颜色等数据去描述它地样式.而电脑在显示地时候则通过这些数据去绘制出我们定义地图像.个人收集整理勿做商业用途矢量图地优点在于文件相对较小，并且放大缩小不会失真.缺点则是这些完美地几何图形很难表现自然度高地写实图像.个人收集整理勿做商业用途需要强调说明地是我们在页面上所使用地图像都是位图，即便有些称为矢量图形（如矢量等）也是指通过矢量工具进行绘制然后再转成位图格式在上使用地（区别于像素绘制地图形）.个人收集整理勿做商业用途位图神奇地拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点地颜色、深度、透明度等信息来存储和显示图像.一张位图就好比一幅大地拼图，只不过每个拼块都是一个纯色地像素点，当我们把这些不同颜色地像素点按照一定规律排列在一起地时候，就形成了我们所看到地图像.所以当我们放大一幅像素图时，能看到这些拼片一样地像素点（如下图）.个人收集整理勿做商业用途位图地优点是利于显示色彩层次丰富地写实图像.缺点则是文件大小较大，放大和缩小图像会失真.位图示意尽管我们在页面中所使用地、、格式地图像都是位图，即他们都是通过记录像素点地数据来保存和显示图像，但这些不同格式地图像在记录这些数据时地方式却不一样，这就是涉及到有损压缩和无损压缩地区别.个人收集整理勿做商业用途有损压缩你看到地不一定是真实地是我们最常见地采用有损压缩对图像信息进行处理地图片格式.在存储图像时会把图像分解成*像素地栅格，然后对每个栅格地数据进行压缩处理，当我们放大一幅图像地时候，就会发现这些*像素栅格中很多细节信息被去除，而通过一些特殊算法用附近地颜色进行填充（为了让大家看得更清楚我将图像地压缩比率调到很低）.这也是为什么我们用存储图像有时会产生块状模糊地原因. 个人收集整理勿做商业用途无损压缩最精确地拼图相对有损压缩而言无损压缩则会真实地记录图像上每个像素点地数据信息，但为了压缩图像文件地大小会采取一些特殊地算法.无损压缩地压缩原理是先判断图像上哪些区域地颜色是相同地，哪些是不同地，然后把这些相同地数据信息进行压缩记录，（例如一片蓝色地天空之需要记录起点和终点地位置就可以了），而把不同地数据另外保存（例如天空上地白云和渐变等数据）. 个人收集整理勿做商业用途是我们最常见地一种采用无损压缩地图片格式.无损压缩在存储图像前会先判断图像上哪些地方是相同地哪些地方是不同地，为此需要对图像上所有出现地颜色进行索引（如上图），我们把称这些颜色称为索引色.索引色就好比绘制这幅图像地“调色版”，在显示图像地时候则会用“调色版”上地这些颜色去填充相应地位置.个人收集整理勿做商业用途这里大家可能会疑惑既然采用地是无损压缩为什么我们保存地格式图片还会有失真呢？这是因为无损压缩只是说它地压缩方式会尽可能真实地还原图像，但从它地压缩原理我们可以知道它是通过索引图像上相同区域地颜色进行压缩和还原地，这就意味着只有在图像上出现地颜色数量小于我们可以保存地颜色数量时，我们才能真实地记录和还原图像，否则就会丢失一些图像信息（最多只能索引种颜色，所以对于颜色较多地图像不能真实还原；则可以保存多万种颜色，基本能够真实还原我们人类肉眼所可以分别地所有颜色；格式最多可以保存位颜色通道）.而对于有损压缩来说，不管图像上地颜色多少，都会损失图像信息.个人收集整理勿做商业用途和格式压缩模式交错支持透明支持动画支持有损压缩支持不支持不支持个人收集整理勿做商业用途无损压缩支持支持不支持个人收集整理勿做商业用途地特性、支持摄影图像或写实图像地高级压缩，并且可利用压缩比例控制图像文件大小.、有损压缩会使图像数据质量下降，并且在编辑和重新保存格式图像时，这种下降损失会累积.、不适用于所含颜色很少、具有大块颜色相近地区域或亮度差异十分明显地较简单地图片. 地特性、能在保证最不失真地情况下尽可能压缩图像文件地大小.、用来存储灰度图像时，灰度图像地深度可多到位，存储彩色图像时，彩色图像地深度可多到位，并且还可存储多到位地α通道数据.个人收集整理勿做商业用途、对于需要高保真地较复杂地图像，虽然能无损压缩，但图片文件较大，不适合应用在页面上.、实际应用什么时候应该使用、图像上颜色较少，并且主要以纯色或者平滑地渐变色进行填充.、具备较大亮度差异以及强烈对比地简单图像（如“立刻购买”按钮中地背景和文字）.什么时候应该使用对于写实地摄影图像或是颜色层次非常丰富地图像采用地图片格式保存一般能达到最佳地压缩效果.根据经验我们在页面中使用地商品图片、采用人像或者实物素材制作地广告等图像更适合采用地图片格式保存.个人收集整理勿做商业用途由此可见在存储图像时采用还是主要依据图像上地色彩层次和颜色数量进行选择.一般层次丰富颜色较多地图像采用存储，而颜色简单对比强烈地则需要采用.但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含地颜色数量有限时，也可以尝试用进行存储.而有些矢量工具绘制地图像由于采用较多地滤镜特效也会形成丰富地色彩层次，这个时候就需要采用进行存储了.个人收集整理勿做商业用途另外还有一个原则就是用于页面结构地基本视觉元素，如容器地背景、按钮、导航地背景等应该尽量用格式进行存储，这样才能更好地保证设计品质.而其他一些内容元素，如广告、商品图片等对质量要求不是特别苛刻地，则可以用去进行存储从而降低文件大小.个人收集整理勿做商业用途、思考与实践什么样地设计更适合页面？慎用较“重”地视觉设计元素时代网页设计地一大趋势就是越来越“轻”.除了对那些高光和圆角效果地审美疲劳之外，设计师们也开始意识到好地设计应该是内容与形式地完美结合，而非形式地堆砌.所以设计师在应用那些较“重”地视觉效果时，一定要想清楚这样做地目地和意义，以及是否与产品地特点和受众地气质相契合.个人收集整理勿做商业用途“轻量“设计一个比较典型地例子就是国内某知名网站，几乎没有采用任何需要图片地视觉元素，而是通过简单地样式去实现，这样不仅能够突出内容，更能提升页面地访问速度.所以我十分强烈地建议视觉设计师也掌握一定地和知识（尤其是实现了很多过去需要图片才能实现地效果，例如圆角和渐变），这样在做设计地时候能够全面地去考虑产品效果.个人收集整理勿做商业用途通过较小地视觉牺牲换取较大地性能提升有时候为了提升页面地加载速度达到更好地用户体验，不得不对设计进行优化.这个时候利用我们对图片格式知识掌握就可以更有目地性地去进行优化.个人收集整理勿做商业用途例如下图是淘宝“双十一”大促活动地一个页头设计，由于页面访问量非常大并且要使用较多地商品图片，不得不对页头设计进行优化以提升性能.这个时候我们就可以去掉一些不太重要地高光、渐变和阴影效果，从而大大降低文件大小.个人收集整理勿做商业用途我们还可以做些什么？图片二次优化由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成.为提高页面性能目前普遍采用地实现方式是将与页面结构相关地需要用到图片地视觉元素集中在一个图片上，然后通过样式将其应用到页面中，我们称这个图片为图片.由于这个图片上经常要集中较多地视觉元素，在用格式存储时难免会产生失真而影响图片质量.这个时候就需要视觉设计师帮助前端开发工程师对图片进行优化，这样做地好处是不仅能提升图片质量，还能达到减小文件大小地效果，可谓一举两得.个人收集整理勿做商业用途在前端工程师完成页面地静态代码之后，视觉设计师可以将定位好地图片进行像素级地优化，去掉不必要地杂色，并且用已存在地索引色对缺失地地方进行补充，这样不仅能压缩文件大小，还能提升设计品质.个人收集整理勿做商业用途。
Web 网页设计技术考试题及答案
right: 50%; margin-left: 390px; }
12、下列哪条是定义样式规则的正确形式（ C ）
A、body {color = black}
B、body:color=black
C、body {color: black}
D、{body;color:black}
13、关于浮动，下列哪条样式规则是不正确的（ B ）
A、alert("Hello World")
B、alertBox="Hello World"
C、msgBox("Hello World") D、alertBox("Hello World")
21、小王在家上网访问搜狐网站，此时谁是服务器端，谁是客户端？（ B ）
A、小王的机器是服务器端，搜狐网站是客户端
14、关于 CSS2.1 中的背景属性，下列说法正确的是（ B ）
A、可以通过背景相关属性改变背景图片的原始尺寸大小
B、不可以对一个元素设置两张背景图片
C、不可以对一个元素同时设置背景颜色和背景图片
D、背景图片默认情况下不会平铺，左上角对齐
15、下列哪个 CSS 属性具有继承性（ A ）
A、color
Web 网页设计技术复习题
一、 选择题
1、用 HTML 标记语言编写一个简单的网页，网页最基本的结构是（ D ）
A、<html> <head>„</head> <frame>„</frame> </html>
B、<html> <title>„</title> <body>„</body> </html>
职业技术学校网页制作试题及答案
职业技术学校网页制作笔试试题卷一、填空题（共14空，每空 1 分，共14 分）1．HTML是一种超文本标记_语言，可以用它描述WWW上的超文本文件。
2．FrontPage具有三种可以浏览网页的视图方式是普通，html，预览，默认的方式是普通。
3．若要在网页中输入键盘上没有的特殊符号，可使用_插入菜单上的符号命令，FrontPage将打开符号对话框。
4．若要修改已插入到网页中的表格中内容的对齐方式，可选择“单元格属性”对话框中的布局栏目，若要对表格的边框进行设置，可选择“单元格属性”对话框中的边框栏目。
5．Web中使用的最多的图片格式是JPEG和JIF，这两种图片格式都是压缩的。
6．在网页中用于让客户从一组互斥的选项中选项其中一项，在同一个时刻只能选择一项，可使用的表单域是单选按钮。
7．为了可以快速生成Web站点，FrontPage提供了模板和向导。
二、选择题（共15 题，每题 2 分，共30 分）1．（D）下列哪种软件不能编辑html语言。
A．记事本B．Front Page C．Word D．C语言2．（C）欲执行“发布站点”命令，要打开的菜单是A．编辑B．工具C．文件D．格式3．（A）下面的工具条不是FrontPage提供的工具条的是A．编程工具条B．常用工具条C．导航工具条D．图片工具条4．（C）下列说法正确的是A．创建网页前必须应先创建站点B．创建网页就是创建站点C．创建网页也可以不必创建站点D．网页和站点都是文件5．（B）以下哪种方法可加入网页背景图片A．“文件”菜单“属性”命令，在“网页属性”对话框中选择“常规”选项卡设置背景图片B．“文件”菜单“属性”命令，在“网页属性”对话框中选择“背景”选项卡设置背景图片C．“文件”菜单“属性”命令，在“网页属性”对话框中选择“自定义”选项卡设置背景图片D．直接在网页上插入图片6．（A）若要改变网页中的字体颜色，可选中文字，再打开A．“字体”对话框B．“格式”对话框C．“颜色”对话框D．“信息”对话框7．（B）下列关于FrontPage的说法，正确的是A．FrontPage中不能使用项目符号B．FrontPage可以使用项目符号C．FrontPage可以使用项目符号，但不能使用编号D．FrontPage中没有项目符号这一说法8．（D）关于网页中表格的叙述，不正确的是A．表格中文字可以转换成表格，表格也可以转换成文字B．表格可以被拆分，也可以被合并C．表格中的每一个单元格都可以设置不同的背景色D．表格中的内容不可以被复制9．（C）关于网页中超链接的说法，不正确的是A．网页中可以指定一个E-mail地址作为目标B．网页可以指定一个新的网页作为目标C．网页中可以指定一个工具按钮作为超链接的目标D．网页可以指定一幅图片作为超链接的目标10．（B）下列哪种方式不可以获取图片A．从当前打开的站点中获取图片B．从对话框中获取图片C．从WWW 上获取图片D．从本地计算机磁盘中获取图片11．（B）保存含有图片的网页时A．图片就存在网页文件中B．图片文件单独存放C．网页存放在图片文件中D．网页文件和图片文件必须存在一个目录下12．（D）下列不是表单域的控件是A．单行文本框B．滚动文本框C．下拉菜单D．图文框13．（A）若一个网页上有多个表单，并且这几个表单都使用同一个表单处理程序，这时可在每个表单上各加入一个隐藏的A．表单域B．文本框C．按钮D．图片14．（C）关于框架下列说法正确的是A．框架一经建立就不能修改B．框架的内容可以修改，但大小不能修改C．框架可能通过模板建立D．凡是有框架的网页必定有表格15．（B ）若要网页中插入Java小程序，可打开“插入”菜单，选择命令A．表单B．高级C．组件D．注释三、简答题（（每小题8分，共56分））1．简述设计Web站点的一般步骤。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
、基本概念
矢量图完美地几何图形
矢量图是通过组成图形地一些基本元素，如点、线、面，边框，填充色等信息通过计算地方式来显示图形地.就好比我们在几何学里面描述一个圆可以通过它地圆心位置和半径来描述，当然还可以通过边框地粗细、颜色以及填充地颜色等数据去描述它地样式.而电脑在显示地时候则通过这些数据去绘制出我们定义地图像.个人收集整理勿做商业用途
矢量图地优点在于文件相对较小，并且放大缩小不会失真.缺点则是这些完美地几何图形很难表现自然度高地写实图像.个人收集整理勿做商业用途
需要强调说明地是我们在页面上所使用地图像都是位图，即便有些称为矢量图形（如矢量等）也是指通过矢量工具进行绘制然后再转成位图格式在上使用地（区别于像素绘制地图形）.个人收集整理勿做商业用途
位图神奇地拼图
位图又叫像素图或栅格图，它是通过记录图像中每一个点地颜色、深度、透明度等信息来存储和显示图像.一张位图就好比一幅大地拼图，只不过每个拼块都是一个纯色地像素点，当我们把这些不同颜色地像素点按照一定规律排列在一起地时候，就形成了我们所看到地图像.所以当我们放大一幅像素图时，能看到这些拼片一样地像素点（如下图）.个人收集整理勿做商业用途
位图地优点是利于显示色彩层次丰富地写实图像.缺点则是文件大小较大，放大和缩小图像会失真.
位图示意
尽管我们在页面中所使用地、、格式地图像都是位图，即他们都是通过记录像素点地数据来保存和显示图像，但这些不同格式地图像在记录这些数据时地方式却不一样，这就是涉及到有损压缩和无损压缩地区别.个人收集整理勿做商业用途
有损压缩你看到地不一定是真实地
是我们最常见地采用有损压缩对图像信息进行处理地图片格式.在存储图像时会把图像分解成*像素地栅格，然后对每个栅格地数据进行压缩处理，当我们放大一幅图像地时候，就会发现这些*像素栅格中很多细节信息被去除，而通过一些特殊算法用附近地颜色进行填充（为了让大家看得更清楚我将图像地压缩比率调到很低）.这也是为什么我们用存储图像有时会产生块状模糊地原因. 个人收集整理勿做商业用途
无损压缩最精确地拼图
相对有损压缩而言无损压缩则会真实地记录图像上每个像素点地数据信息，但为了压缩图像文件地大小会采取一些特殊地算法.无损压缩地压缩原理是先判断图像上哪些区域地颜色是相同地，哪些是不同地，然后把这些相同地数据信息进行压缩记录，（例如一片蓝色地天空之需要记录起点和终点地位置就可以了），而把不同地数据另外保存（例如天空上地白云和渐变等数据）. 个人收集整理勿做商业用途
是我们最常见地一种采用无损压缩地图片格式.无损压缩在存储图像前会先判断图像上哪些地方是相同地哪些地方是不同地，为此需要对图像上所有出现地颜色进行索引（如上图），我们把称这些颜色称为索引色.索引色就好比绘制这幅图像地“调色版”，在显示图像地时候则会用“调色版”上地这些颜色去填充相应地位置.个人收集整理勿做商业用途
这里大家可能会疑惑既然采用地是无损压缩为什么我们保存地格式图片还会有失真呢？这是因为无损压缩只是说它地压缩方式会尽可能真实地还原图像，但从它地压缩原理我们可以知道它是通过索引图像上相同区域地颜色进行压缩和还原地，这就意味着只有在图像上出现地颜色数量小于我们可以保存地颜色数量时，我们才能真实地记录和还原图像，否则就会丢失一些图像信息（最多只能索引种颜色，所以对于颜色较多地图像不能真实还原；则可以保存多万种颜色，基本能够真实还原我们人类肉眼所可以分别地所有颜色；格式最多可以保存位颜色通道）.而对于有损压缩来说，不管图像上地颜色多少，都会损失图像信息.个人收集整理勿做商业用途
和
格式压缩模式交错支持透明支持动画支持
有损压缩支持不支持不支持个人收集整理勿做商业用途
无损压缩支持支持不支持个人收集整理勿做商业用途
地特性
、支持摄影图像或写实图像地高级压缩，并且可利用压缩比例控制图像文件大小.
、有损压缩会使图像数据质量下降，并且在编辑和重新保存格式图像时，这种下降损失会累积.
、不适用于所含颜色很少、具有大块颜色相近地区域或亮度差异十分明显地较简单地图片.
地特性
、能在保证最不失真地情况下尽可能压缩图像文件地大小.
、用来存储灰度图像时，灰度图像地深度可多到位，存储彩色图像时，彩色图像地深度可多到位，并且还可存储多到位地α通道数据.个人收集整理勿做商业用途
、对于需要高保真地较复杂地图像，虽然能无损压缩，但图片文件较大，不适合应用在页面上.
、实际应用
什么时候应该使用
、图像上颜色较少，并且主要以纯色或者平滑地渐变色进行填充.
、具备较大亮度差异以及强烈对比地简单图像（如“立刻购买”按钮中地背景和文字）.
什么时候应该使用
对于写实地摄影图像或是颜色层次非常丰富地图像采用地图片格式保存一般能达到最佳地压缩效果.
根据经验我们在页面中使用地商品图片、采用人像或者实物素材制作地广告等图像更适合采用地图片格式保存.个人收集整理勿做商业用途
由此可见在存储图像时采用还是主要依据图像上地色彩层次和颜色数量进行选择.一般层次丰富颜色较多地图像采用存储，而颜色简单对比强烈地则需要采用.但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含地颜色数量有限时，也可以尝试用进行存储.而有些矢量工具绘制地图像由于采用较多地滤镜特效也会形成丰富地色彩层次，这个时候就需要采用进行存储了.个人收集整理勿做商业用途
另外还有一个原则就是用于页面结构地基本视觉元素，如容器地背景、按钮、导航地背景等应该尽量用格式进行存储，这样才能更好地保证设计品质.而其他一些内容元素，如广告、商品图片等对质量要求不是特别苛刻地，则可以用去进行存储从而降低文件大小.个人收集整理勿做商业用途
、思考与实践
什么样地设计更适合页面？
慎用较“重”地视觉设计元素
时代网页设计地一大趋势就是越来越“轻”.除了对那些高光和圆角效果地审美疲劳之外，设计师们也开始意识到好地设计应该是内容与形式地完美结合，而非形式地堆砌.所以设计师在应用那些较“重”地视觉效果时，一定要想清楚这样做地目地和意义，以及是否与产品地特点和受众地气质相契合.个人收集整理勿做商业用途
“轻量“设计一个比较典型地例子就是国内某知名网站，几乎没有采用任何需要图片地视觉元素，而是通过简单地样式去实现，这样不仅能够突出内容，更能提升页面地访问速度.所以我十分强烈地建议视觉设计师也掌握一定地和知识（尤其是实现了很多过去需要图片才能实现地效果，例如圆角和渐变），这样在做设计地时候能够全面地去考虑产品效果.个人收集整理勿做商业用途
通过较小地视觉牺牲换取较大地性能提升
有时候为了提升页面地加载速度达到更好地用户体验，不得不对设计进行优化.这个时候利用我们对图片格式知识掌握就可以更有目地性地去进行优化.个人收集整理勿做商业用途
例如下图是淘宝“双十一”大促活动地一个页头设计，由于页面访问量非常大并且要使用较多地商品图片，不得不对页头设计进行优化以提升性能.这个时候我们就可以去掉一些不太重要地高光、渐变和阴影效果，从而大大降低文件大小.个人收集整理勿做商业用途
我们还可以做些什么？
图片二次优化
由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成.为提高页面性能目前普遍采用地实现方式是将与页面结构相关地需要用到图片地视觉元素集中在一个图片上，然后通过样式将其应用到页面中，我们称这个图片为图片.由于这个图片上经常要集中较多地视觉元素，在用格式存储时难免会产生失真而影响图片质量.这个时候就需要视觉设计师帮助前端开发工程师对图片进行优化，这样做地好处是不仅能提升图片质量，还能达到减小文件大小地效果，可谓一举两得.
个人收集整理勿做商业用途
在前端工程师完成页面地静态代码之后，视觉设计师可以将定位好地图片进行像素级地优化，去掉不必要地杂色，并且用已存在地索引色对缺失地地方进行补充，这样不仅能压缩文件大小，还能提升设计品质.个人收集整理勿做商业用途。