-
图形 Images
11.1 网络用图策略 WEB IMAGING STRATEGIES
p.325
N,郑婷婷好的图表和有趣的插图在视觉上引人注目，并创造出独特而令人难忘的文档。插图可以快速传达复杂的数量或空间信息，超越语言障碍，可以与文本结合，以补充多种形式的信息收集和学习。新工具增加了我们创建信息图形的能力，而web提供了一个全彩色多媒体论坛，不受出版和分发纸张的成本的限制。
界面和品牌 INTERFACE AND BRANDING
N,郑婷婷跨越网页集合的一致接口和身份图形定义了网站“网站”的边界。虽然网站设计者可以在没有图像的情况下构建网站，但大多数用户不会轻易地将裸页面集合视为一个连贯的“网站”，而这样的网站看起来很奇怪，远远超出了设计规范和用户期望。网站定义身份图形不需要详细说明，但它们确实需要在网站中的各种页面之间保持一致，这样用户才能确定您的页面是一个独立的区域——如果您在一家大型企业工作，则可能与一个更大的整体相关，但在某些方面与“位置”不同。
内容图像 CONTENT IMAGES
N,蔡仰芝图 11.1,在网上，图像创造场所。页面标题和其他身份图像使我们能够轻松地将网页集合识别为“网站”。N,蔡仰芝图像内容服务于多种目的，可以作为文本的补充：N,邓一珍五點 •插图:图形可以显示你的东西，把世界的碎片带到你的文档中。 •图:定量图形和流程图可以直观地解释概念。 •定量数据:可以直观地解释概念的定量图形和流程图。 •分析和因果关系:可以帮助分解一个主题，或者显示出它的原因的圖形。 •集成:图形可以综合解释单词、数字和图像。N,刘诗颖图表或图表的使用是向用户做出的会使复杂的世界更容易理解的含蓄承诺。我们对图形沟通的建议与书面沟通相同：N,张培博•相信读者的智慧。不要贬低你的材料 假设网络用户在某种程度上是根本不同的 来自印刷读者的人，对复杂性没有兴趣。普通读者 的网站可能曾经与其他发布区别开来 观众，但现在每个人都读网络。 •尊重媒体。读者和印刷媒体一样，但是网络 有不同的优点和缺点。利用网络的优势 巨大的能力沟通复杂的彩色视觉效果没有 印刷和物流费用。 •按照您的理解说实话。歪曲量化数据不仅仅是一个 沟通失败;这是对读者信任的背叛。 •不要挑选你的数据。如果你用视觉证据做案子， 不要严格处理和编辑你的视觉效果，观众别无选择 但接受你的观点。相信你的观众足够给他们 数据：让他们看着相同的更高分辨率的图像或模棱两可的结果 你看到并自己决定这个问题。 •勇于大胆。对视觉沟通的重视不是 要求你只使用苍白的颜色的小，穆斯林图形。视觉证据 如果没有人注意到它，就不会变得有说服力。只是不要试图哇 用鲜明的图形观众来弥补瘦身内容。
11.2 关于网页图像 ABOUT WEB IMAGES
p.327
- 图 11.2 即使在 72－96 ppi的状况下，网络上的照片在全彩屏幕上总是看起来很棒，原因是照片在屏幕上比打印时有更广的动态范围。在屏幕上，照片确实照耀着我们的眼，屏幕产生的灯光和深色比彩色印刷页反射的光线有着更丰富的色彩范围。
了解图像类型 UNDERSTANDING IMAGE TYPES
位图／点阵图或 光栅图 Bitmap or raster images
- 位图/点阵图 (bitmap) 或称光栅图 (raster) 图像是由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格。每个像素都有其特定的颜色，因此由於像素很小丶又可以是数百万种颜色中的任何一色，所以光栅图像格式通常用于照片和复杂的图稿。
矢量图像 Vector images
- 矢量图使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像。矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）；矢量图很少有光栅图（如照片）有深度或复杂度。但是矢量图，和光栅图相比具有一些重要的优势：
- 三點
- 因为矢量图像文件只是形状的简略描述，所以文档小，下载快。
- 矢量图像可以缩放到任何大小，而不减损其质量。
- 虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。
可伸缩矢量图形 Scalable vector graphics—SVG
p.327
[x] svg 图像是以矢量图，以开放格式的 xml 文件类型保存，而不是像 Adobe Illustrator (.ai) 文件那样的產權专有的矢量图像格式。大多数 .ai 图形可以保存在 svg 格式，进而直接用于网页上。作为矢量图， svg 图形可以缩放到任何大小，而没有质量损失；由於其文档大小是紧凑的，因此在移动应用和响应网站创建图形方面， svg 越来越流行，至少对于相对简单的图像和形状来说。
CSS 图形 CSS-based graphics
p.328
- 图 11.3 当你投资于插图时，矢量图作品是特别有吸引力的，因为你可以在众多不同的媒体上使用它：网络丶APP应用丶电子书丶和印刷。反讽刺的是，像这图展示的复杂的矢量插图有可能因其复杂程度，储存为 SVG 图形时，不会节省任何带宽。在此情境下，通常将复杂矢量图作品转换为 jpeg 文档，以适应 1倍和2倍 (1× and 2×) 及各种分辨率的显示屏幕，是更好的方法。
- 层叠样式表 (css) 的视觉样式功能长期以来拿来创建简单或复杂的图形效果，单靠 css 代码在网页上的使用。可能最常见的 css 图形是图形按钮，纯 css 的技术拿來把简单的 html spans, divs, 及链接 转换成任何颜色或形状的图形按钮，可加配有阴影丶边缘丶阴影丶悬停和点击状态等等效果。css 技术能在网页上创建复杂的图形效果，而实际上没有內嵌 jpeg, gif, or png 图形：单靠 html 元素使用 css样式。
图标字体 Icon fonts
- 图标字体 (icon fonts) 图标字体提供了一种简便方法，把数十甚至数百个矢量符号和图标，一次以非常紧凑的形式加载至网站中。不同於一般计算机字体提供的是文字字母和数字字符 (alphanumeric characters) ，图标字体存的是各式图标，这样只需一次 http 请求，网页就能有数以百计的矢量符号可用。图标字体允许您轻松地使用 css 来更改图标的大小丶颜色丶阴影效果或其他图标的图形特点。
- 图 11.4 SVG格式的简单图表。如果你在Adobe插画中这样做，最好在所有的浏览器中显示所有的字体，以避免出现字体问题。
p.329
了解图像文件格式 UNDERSTANDING IMAGE FILE FORMATS
G,陈伟珊主要的Web文件格式为GIF图像（英文发音为“jiff”）， JPEG (英文发音为“jaypeg”), and PNG(英文发音为“ping”) 文件。所有三种常见的Web图形格式都是所谓的位图图形，由一个由数千个微小的彩色正方形图片元素或像素组成的棋盘格组成。位图文件是手机和数码相机所熟悉的文件类型，很容易创建，编辑，调整大小。优化的Web使用Adobe的PS图象处理软件或元素等广泛使用的工具，Corel的油漆店专业画家，或其他图片编辑程序。G,陈伟珊为了有效地通过Internet传输，几乎所有的web图形都被压缩了， 保持文件大小越小越好。大多数网站都使用GIF和JPEG图像。在这些文件类型之间进行选择在很大程度上取决于评估：
G,李虹霓图像的性质(是形象的平滑色调过渡或硬边和线条图形图像摄影集)- 各种文件压缩对图像质量的影响
- 压缩技术产生最小文件，其效率 看起来不错
GIF
G,许嘉淳图 11.5 图标字体中的基于向量的图形，如字体真棒，可以扩展到任何分辨率，是一个伟大的解决方案，提供了大量的图标图形只有一个HTTP请求。
G,许嘉淳CompuServe信息服务推广了图形交换格式 (gif)在20世纪80年代，作为一种有效的手段，通过数据网络传输图像。 上世纪90年代初，万维网最初的设计者们采用了GIF。它的效率和广泛的熟悉程度。很多图片都是gif格式， 而且几乎所有支持图形的浏览器都可以显示gif文件。gif文件 包含一个“无损”压缩方案，以保证文件大小不受限制 牺牲质量。然而，gif文件是8位图形，因此可以容纳 只有256的颜色。
G,黄家丽图 11.6 在GIF文件格式中，Lempel Zev Welch(LZW)图像压缩技术特别有效地压缩了简单的颜色和硬边图形(右侧)。图片(左侧)在JPEG或PNG文件格式上看起来要好得多。
G,黄家丽GIF文件格式使用一种相对基本的文件压缩格式(Lempel Zev) 韦尔奇(简称lzw)，它在不丢失数据的情况下压缩了数据存储的效率 或扭曲的形象。lzw压缩方案最适合压缩图像 具有相同颜色的大字段，如徽标和图。它是更少的 高效的压缩复杂的“摄影”图片，有多种颜色 复杂的纹理(图11.6)。
G,叶琛你可以利用LZW压缩的特性来提高其效率，从而减少你的GIF图像的大小。 这种策略是把你的GIF图像中的颜色数量减少到最小，并去掉不需要表示的图像的颜色。 一个GIF图像不能超过256种颜色，但可以少一些。 在LZW压缩下，具有较少颜色的图像将更有效地压缩。 例如，在Photoshop中创建GIF图形时，不要使用256色自动保存每个文件。 一个简单的GIF图像在8、16或32种颜色下看起来还不错，文件大小的节省也很可观。 为了在GIF图像中获得最大的效率，请使用最少的颜色数量，以获得最佳效果。
G,叶琛传统的（逐行扫描的）GIF图像一次从上到下下载一行像素，然后浏览器在屏幕上逐行显示图像。 在隔行扫描的GIF文件中，图像数据被存储在一种格式中，这允许支持此功能的浏览器在下载文件时，在屏幕上构建一个全尺寸GIF图片的低分辨率版本。 有些人发现隔行扫描的“模糊到清晰”的动画效果具有视觉吸引力，但是隔行扫描最重要的好处是当图片下载到浏览器中时，可以让用户预览整个图片。
G,蔡俊钦图 11.7 透明的背景GIF图形仅可以处理256的颜色，但是透明的GIF仍然被坚持使用因为它们在和透明的PNG-24图形比较时，显得非常小。不幸的是，在GIF图形中只有唯一一个颜色可以被指定透明，这往往导致可见的颜色边缘当GIF与其他背景颜色对比时。G,蔡俊钦对较大的GIF图形来说，交错是最好的。例如像素为200X100或更大的插图。交错是个糟糕的选择对小的GIF图形来说，例如导航条、按钮和图标。如果你保持传统的GIF格式（非交错），这些小图形会更快地加载到屏幕上。一般来说，交错不会显著影响平均GIF的文件的大小。G,李虹霓GIF格式允许你从颜色板查找选择透明的颜色来表现gif。你可以使用像Photoshop这样的图像编辑软件来选择一个颜色单一的调色板，让gif图形变得透明。通常的颜色 选择透明度是图中的背景色。不幸的是，透明的属性不是选择性的;如果你使一个颜色透明，在图形中的每个像素中，颜色也会变得透明，这可能会导致意想不到的结果。
JPEG
Q,冯卓然这是其他的图形文件格式，常用的网页最小化图形文件尺寸是联合摄影专家组的（JPEG）压缩方案。不同于GIF图像，JPEG图像是全色图像，它为每个像素贡献至少24位的内存，从而产生包含1680万种颜色的图像。 JPEG图像广泛应用于摄影师、艺术家、平面设计师、医学影像专家、艺术历史学家和其他团体，他们的形象。质量和颜色是重要的。一种被称为“渐进式JPEG文件”形式赋予了peg图形在交错的gif中看到的逐渐建立的显示。像隔行的GIF一样，渐进的JPEG图像通常需要更长的时间才能加载到页面上，但他们确实为用户提供了更快的预览。
p.332
Q,冯卓然JPEG压缩的设计是为了处理平滑、相对柔和的边缘。色调过渡出现在照片里面。JPEG是更有效的图形和字体的人工硬边，其压缩算法产生的“噪声”在杂散像素附近的硬云形式过渡线(图11.8)Q,冯卓然实际尺寸的插图 未压缩的插图，放大500% 大量JPEG压缩，放大500%Q,林佳墅JPEG压缩使用了一种复杂的数学技术，称为离散余弦变换，以产生图形压缩的滑动比例。您可以选择以JPEG格式应用于图像的压缩程度，但这样做也决定了图像的质量。你用JPEG压缩图片压缩的越多，你的质量就越差。JPEG可以达到令人难以置信的压缩比，压缩图形直至原始文件差不多的一百分之一的大小。这是可能的，因为JPEG算法在压缩图像时丢弃“不必要的”数据，因此称之为“有损”压缩技术。注意，在图11.8中，JPEG压缩的增加如何逐渐降低图像的细节。格子图案和暗噪声压缩图像中的像素是经典的JPEG压缩失真。注意图像右边的广泛压缩噪声和失真，特别是在类型标签周围。Q,林佳墅保存原始的未压缩图像！一旦使用JPEG压缩对图像进行压缩，数据就会丢失，且无法从该图像文件中恢复数据。
p.333
Q,覃沛聪GIF图片，428Kb文件大小，抖动造成的图像质量差Q,覃沛聪PNG图片，968Kb文件大小，卓越的质量，无损压缩Q,覃沛聪JPEG图片，280Kb文件大小，非常好的质量和文件大小
Q,覃沛聪始终保存您的图形或照片未压缩原始文件作为备份。如果你的数码相机产生JPEG图像，在你编辑网络使用的文件时，预留“相机原始”JPEG文件，并使用拷贝。每次保存或重新保存JPEG格式的图像时，图像被进一步压缩，图像中的伪影和噪声增加。
Q,覃沛聪GIF、JPEG和PNG图形和压缩效率的比较。PNG图形可以很好的视觉质量，但总是比同等的JPEG图形大得多。GIF是照片的一个糟糕选择。PNG
Q,邹启缘便携式网络图形(png)是专门为在网页上使用而设计的。他们提供一系列吸引人的功能，包括全方位的色彩深度，支持对于复杂的图像透明度，更好的交错，和自动修正显示器伽马。png图像也可以包含一个简短的文本描述图像的内容，允许互联网搜索引擎搜索基于的图像这些嵌入的文本描述。Q,邹启缘png支持全彩图像，可用于摄影图像。然而，由于它使用无损压缩，结果文件要比有损jpeg压缩大得多。和gif一样，png最擅长表现线条艺术、文本和标识图像中包含大面积的均匀色，并在其间发生剧烈的变化颜色。这种类型保存在png格式的图像看起来不错，有类似或甚至比gif更小的文件大小。然而，广泛采用了png格式很慢。由于部分浏览器特别是IE浏览器并没有完全支持png的所有特性。所以，虽然大多数图像都适合png压缩，但gif格式有更多的浏览器使用。Q,邹启缘GIF图，图标，以及带有简单颜色字段的插图，没有任何微妙的阴影是GIF文件格式的理想选择。Q,邹启缘JPEG或PNG图像，复杂的图标，和现实的插图是JPEG或PNG文件格式的理想选择。
11.3 使用网页图像 USING WEB IMAGES p.334
选择正确的文件格式 CHOOSING THE RIGHT FILE FORMAT
p.334
使用网页图像 USING WEB IMAGES
O,何彩红对各种图形格式的优缺点有一个很好的理解，可以节省您整个web页面下载大小的“重量”在您的整个web页面下载大小，如当你精心制作的图形看起来不太对头，或者证明你的页面性能预算来说太大了，这时你会感到十分心痛。并没有什么神奇的公式说“总是用jpeg做这个;总是用png来做这个。“做出最好的计算是关于什么样的格式可以很好地工作，然后通过导出不同格式的图形并检查文件大小来测试您的假设。在较大的图像大小(比如说,大于15×150像素)的文件格式选择是很简单的,但是小的图形会欺骗你。一个小而硬的图标作为gif动图时应该很好用，有时jpeg或png实际上看起来更好，它的大小也不太大。界面元素 Interface elements
[x]
O,何彩红小页面导航图形、按钮和图形设计元素，如徽标和图标通常被处理为非交错的gif或png图形。在用Photoshop查看你的网页的时候，你应该总是在寻找机会来处理元素如背景色域、帧、规则和带有css3图形的按钮效果，而不是图形。通常情况下，最低成本的图形根本就不是图形。p.335
O,江冰茜图 11.11 （1）插画（Illustrator） EPS图解表示在插画（Illustrator）。（2）从插画（Illustrator）导出SVG，如在谷歌（Chrome）中看到的：191Kb。（3）从插画（Illustrator） 中导出EPS，设置品质为70：98Kb 684x698px。 图标字体的组合，CSS sprites（CSS代码引用的图形），和CSS的图形效果可以给你很多视觉的灵活性，在极低的下载成本下。O,陈梓君特别是如果您投入于创建自定义图标字体，只包含您可能使用的图标。免费图标字体，例如Font Awesome（最初开发的Twitter Bootstrap）是一个很棒的资源，但是，当你可能只在你的网站上使用10或15个图标时，下载数百个图标就没什么意义了。图标字体工具如IcoMoon（icomoon.io）允许您创建自定义图标的字体，还可以将SVG图标和符号转换为字体字符。O,符浩在制作简单的图形形状、图标和图标式的小插图（不含许多复杂效果例如渐变的填充或者透明度）时，SVG可以很有用。顾名思义，可缩放矢量图形是建立在数学描述的曲线、点、行以及其他的形状的基础之上的，而且它可以在没有损失质量的情况下按比例缩放成任何尺寸大小的形状。对于电脑显示的过渡时期来说，它是一种强大的功能，“传统的”72-96-ppi或者“1X”显示屏幕即将被“视网膜”或者拥有每英寸200以上像素（请参阅下面的视网膜显示器）的“2X”显示。因为一个可缩放矢量图形可以伸缩尺寸而不依赖于屏幕分辨率，一个可缩放矢量图形在任意两个显示器中都表现的很好。O,陈铮SVG图形一直被先进的浏览器所支持，但是SVG作为更复杂的矢量图形（如插图）的格式仍有缺点。为了在Web页面上显示矢量SVG图形，浏览器必须将SVG渲染成像素，这是一个耗时的过程，对于矢量绘图程序如Adobe Illustrator (fig. 11.11)中非常复杂的插图、数据图形和地图来说是不可预测的。直到浏览器对复杂的矢量图形的支持变得更加精确和可靠，最好是在像Adobe Illustrator 这样的工具中创建插图，然后在PNG或JPEG图形——从而能够可靠地捕捉明暗和透明度的细微差别中提供最终结果。
p.336
- [F]
F,郑文浩虽然将复杂的矢量图形转换成svg格式存在问题，但矢量图形是一项优秀的投资，因为:
1.svg支持在浏览器中继续改进。
2.矢量图可以按比例分解成多个分辨率的PNGs的位图JEPGS，每一个尺寸都有很好的质量。这在提供基于屏幕分辨率的页面图形的方案中很有用，在这里，您可以为每种类型的显示屏幕创建1 x和2x版本的插图。
3.项目矢量图形也可以用于打印。照片与图示
- [F]
F,郑文浩JEPG是最广泛用于复杂彩色插图和照片的文件格式。一般来说，JEPG图形在压缩和现代显示屏幕打印使用方面都有很好的效果。在新视网膜或2x显示屏上，屏幕尺寸合适的jpeg照片或插图可以轻易地与最佳打印相媲美使图像和照片的再现。- [F]
F,郑志豪如果你在你的网站上使用大量的JEPG，你需要特别小心，在完整的分辨率下保存相机原始照片(JEPG或相机RAW)或原始的Photoshop艺术作品，即使是在网页上的完整分辨率下也很少使用这样的图像。JEPG使用了一个“有损的”图像压缩系统，它降低了图像压缩的质量，而对于普通的web阅读器来说，图像质量是不明显的，但是如果你需要重新缩放或者使用你的JEPG图像，有损压缩具有重要的含义。因此，在JEPG格式工作时，最好只在原始文件的副本上工作，以避免压缩JEPG照片的质量损失
为图像提供替代文字 PROVIDING ALTERNATIVES FOR IMAGES
p.336
- [F]
F,郑志豪html有内置的回调功能，可以让网页在不同的环境条件下工作 。其中一个是< img >标记的alt属性。alt属性 允许你提供一个替代的文本描述任何你放置在你的图片 页面。无法看到你的图片的用户将会看到或听到你使用的文本 alt属性:- [F]
F,李钧星在上面的示例中，使用屏幕读取器软件访问站点的人将会听到“网络风格指南”一词。谷歌图像将使用备用 文本，或alt - text，以编录图像 p.337F- [F]
F,李钧星写好文章是一门艺术，挑战你的描述能力 一幅图像的内容和功能只是几句话。重点不在于使用 用文字表达图像的细节和细节，而是要在页面的上下文中描述图像。这一区别在于决定一个图像的多少，或说多少至关重要的。- [F]
F,陈荣成对于功能图像，例如按钮、徽标和图标，文本应该输入相对应的名称。标识的横幅图形 公司也应该这样做:“Acme地毯清洁器”（Acme carpet cleaner）。 接口图标应该描述图标所代表的功能:“开始，” “暂停”、“倒带”、“快进”。- [F]
F,陈荣成有时，alt - text不太有用——例如，在“打印”旁边的打印图标 这个页面”链接。在图像仅用于视觉目的的情况下，而且是这样做的 不提供额外的信息，您应该包含一个空的alt属性 (alt = “ “)。一个空的alt属性隐藏了来自辅助技术的图形 屏幕阅读器软件。- [F]
F,罗昶熙复杂的内容图像，如插图，图表，和图表，需要 比可以包含在alt属性中更长的描述。在许多情况下, 最好的方法是在图像中添加标题，使所有用户都受益 理解图像中包含的信息。例如，对于图表 这显示了随时间增加的寿命，包括可访问表中的数据 图像。这样，屏幕阅读器用户就可以访问相同的信息 理解数字比可视化更好的人也从中受益。html5 提供< figure >和< figcaption >元素，以进行编程连接 图片和标题之间。- [F]
F,罗昶熙w3c的文档html5:提供有用文本替代的技术 在描述时，最好的理解方法是什么 不同上下文中的图像(www.w3.org/tr/htm -alt- techniques/)。
為屏幕优化屏幕图像 OPTIMIZING IMAGES FOR THE SCREEN
p.337
- [F]
F,陈乐怡计算机和网络世界目前处于一种尴尬的跨界中，旧的72 - 96- ppi(像素/线性英寸)或1x显示标准和更新“视网膜”或2x高分辨率显示屏。回想起来，令人惊讶的是，这是多么漫长的 72 - 96- ppi显示分辨率持续。几乎所有其他的计算都有 在互联网存在的25年里发生了巨大的变化，但有几个因素 结合起来让我们坚持了72 - 96- ppi标准。- [F]
F,陈乐怡我们已经从旧的大阴极技术中进行了重大的展示技术的转变 射线管监视器到能够显示非常高分辨率的新平面屏幕。 但当平板电视首次出现在市场上时，价格非常昂贵 老72 - 96- ppi标准继续保持新屏幕的成本合理。 即使在移动设备上，成熟的平板屏幕技术和不断增加的计算能力的结合，已经大大提高了屏幕分辨率 可能，在接下来的几年里，200个ppi或更多的屏幕将成为新的 各种计算显示器的标准。(含p.340前三行)
框：颜色术语 BOX: COLOR TERMINOLOGY
p.338
N,张培博颜色是我们的眼睛和大脑对各种波长的光的反应。读者 视力正常的人可以感知400纳米（近紫外线） 到700纳米（近红外）。N,刘诗颖计算机屏幕使用了结合了红色，绿色和蓝色原色的荧光粉添加剂的颜色系统，当以各种比例加在一起时，会在RGB屏幕上产生超过1600万种颜色。三个RGB原色的最大亮度会在屏幕上产生白光。N,陈哲在计算机图形学中，你将会看到许多常用术语用来描述颜色的特征。像被人所熟知的HSB色彩体系（用于色相，饱和度和亮度），在Adobe phhotoshop等图形程序中普遍的使用。N,陈哲•色相是可见光波段的波长。一种简单的方法来考虑色相的概念就是一个颜色的名称:比如说“黄色”，“橙色”或“红色”。 •饱和度用于描述颜色的强度，从纯色向近灰色的色系排列。饱和度在凸显颜色深度方面十分有用。在日常生活中，我们认为遥远的物体看起来的颜色是不饱和偏灰色的，这是由于大气的影响(大气的角度)和前景物体的颜色十分强烈所导致的。因此，在设计中，我们经常使用不饱和的颜色作为背景，填充饱和的颜色来吸引注意(保守的说法!) •亮度是一个颜色的明暗程度，或着可以理解为给予你的颜色与黑色或白色的距离。[x] 称为 “彩色和谐” 四种颜色组合的经典规则，在各类设计形式都适用。
p.340
D,朱凤图 11.12 源集属性（srcset）的HTML图像元素（<图片>）是一个伟大的方式自动发送最有效的缩放图像到屏幕大小不等，从智能手机到大型台式显示器。 ...D,朱凤移动计算的兴起和显示分辨率的改变给web开发人员处理图形带来了两大挑战：
- 效率：如何向广大范围内提供最优大小的图像计算设备和屏幕尺寸
- 分辨率：如何区分老的1x屏幕和更新的视网膜屏幕，并为那些更新的显示器提供高质量的图形。
D,朱凤好消息是html5和css3标准已经给了我们很多。我们需要在web上向更好的图形过渡的工具。然而,这项技术还处于转型期，可能还要等上几年才能实现。浏览器制造商完全实现了我们需要快速识别的新工具，我们的页面已经登陆，最有效的方法是提供图表在移动和桌面环境下的ics。
效率 Efficiency
D,姚宣伊响应网页设计（RWD）给了我们很多的概念框架用于生成适合所有屏幕大小的Web内容的工具。对于CSS中指定的背景和核心页面框架图形，解决各种屏幕分辨率的解决方案是简单明了的：在各种小、中、大屏幕的CSS“断点”解决方案中，您可以指定适合于每个屏幕宽度范围的位图图形的小、中、大版本。网页设计者也可以使用基于矢量的图形，如图标字体和SVG图形，它们在任何分辨率下都能很好地工作，或者使用基于CSS的图形效果，根本不需要任何额外的图形文件。[x]
D,朱凤图 11.13 设备像素是构成显示屏的物理像素。p.341
D,姚宣伊这给我们留下的问题，如何优化基于HTML的内容放置在页面内图形的反应，与图像标签规定。幸运的是，HTML5规范已经提出了一个有用的解决这个问题的方法：一种方法，在新的<图片>元素中指定各种图像大小的替代品，键控屏幕宽度（图11.12）。源属性允许我们根据屏幕的最小宽度（CSS像素）有条件地指定一组可能服务的图像。<图片>元素也必须包括传统的图像元素
。内置
标签提供了浏览器不支持<图片>元素优雅的回退。如果<图片>元素是不支持的，浏览器只使用内置
元素，这样每个人至少可以看到中等分辨率的图像。
分辨率和像素密度 Resolution and pixel density
D,盘嘉静我们过渡到高分辨率屏幕媒体的第二个主要挑战是将正确的图像发送到右屏幕: 服务中等分辨率的图像到1x 设备 (无论屏幕大小) 和高分辨率图像到2x 或视网膜屏幕，除了在移动设备中可能会影响页面性能的大图像之外。D,盘嘉静web 开发人员面临和处理的一个直接挑战是, 当物理或设备像素的数量与新的视网膜屏幕增加一倍以上时, 如何描述大小和距离。在 72–96-ppi 屏幕的旧1x 世界中, 答案是显而易见的: 图像中的一个像素直接等同于显示屏上的一个物理像素。如果您突然将显示像素的密度增加了一倍, 并且没有进行其他更改, 则每个图像都将具有相同的像素数, 但在2xscreen 时, 它看起来会有一半的大小, 而文本在视网膜屏幕上也同样是小型化的。 p.342D,张广彬图 11.14 位图像素是最小的单位这构成了一个栅格图像(jpg,png,gif)D,盘嘉静这个谜题的答案是虚拟测量，其中由html和css指定的像素数不再与物理或设备像素有1:1的关系。这些“css像素”或多或少等同于旧1x 屏幕的测量。而一个css像素到屏幕像素的一对一关系, 一个“css 像素”实际上描述2x屏幕上四设备像素覆盖的区域 (图 11.13)。为新的高分辨率屏幕上的排版, 无论屏幕分辨率如何，响应性的网页设计已经使用em单位的相对测量, 其中1em 大致相当于16点类型。D,张广彬类似地，在html或css像素中指定的位图图像大小现在使用虚拟像素:在传统的1x上，一个图像像素相当于一个屏幕像素。在视网膜或2x屏幕上，每个虚拟的“css像素”相当于四个设备像素(图 11.14)。D,张广彬网络世界的过渡,可用的方法确定视网膜或2 x屏幕和提供高分辨率图像屏幕目前是相当廉价的,与一些JavaScript或服务器大小技术竞争算法之间的 差距,我们需要什么,当前的web浏览器可以可靠地交付。D,张广彬幸运的是，较长期的解决方案是显而易见的，已经是html5和css3代码标准的一部分。许多响应式web设计所基于的@ media查询标签可以做的不仅仅是决定屏幕宽度:媒体查询还可以决定显示的分辨率，以及分辨率与显示的物理大小之间的区别——至少在理论上是这样。html5 srcset属性和< picture>元素可以自动地将适当大小的图像发送到给定的屏幕大小——至少在理论上是这样。这在很大程度上取决于web浏览器制造商如何快速地采用这些重要的图像质量工具，以及它们到底是如何实现的。