图形
1、Web图形的作用
图形作为内容
图形作为内容的元素有许多目的 - 与文本内容一起并补充：
插图：图形可以显示你的东西，把世界的碎片带入你的文档
图：定量图形和流程图可以直观地解释概念
定量数据：数字图表可以帮助解释财务，科学或其他数据
分析和因果关系：图形可以帮助分解一个主题或显示造成它的原因
整合：图形可以将文字，数字和图像进行全面的说明
插图
图和定量数据
集成可视化演示文稿
多面信息图形通常将自由形式布局中的定量图表，三维插图和大量字幕集成在一起，成为可以解释复杂概念和自然现象的视觉叙述
我们对图形通信的建议与书面沟通相同：
相信读者的智慧。不要贬低你的材料，因为假设网络用户与印刷读者有某些根本不同的人，并且对复杂性没有兴趣。网站的普通读者可能曾经与其他出版读者区分开来，但现在每个人都读网页。
尊重媒体。读者与平面媒体中的读者一样，但网络具有不同的长处和短处。利用网络的巨大能力来交流复杂的彩色视觉效果，而不需要打印和物理分配。
按照你的理解说实话。歪曲量化数据不仅仅是沟通失败; 这是对读者信任的背叛。
不要挑选你的数据。如果您正在制作视觉证据的案例，请不要过度和编辑您的视觉效果，以免观众别无选择，只能接受您的观点。请相信您的观众足以向他们提供数据：让他们看到相同的更高分辨率的图像或您看到的模糊结果，并自行决定问题。
要大胆和实质。对视觉传播的严肃关注并不要求您只使用苍白色的小而粗糙的图形。如果没有人注意到，视觉证据就不会成为有说服力的。只是永远不要试图用明亮的图形来吸引观众来弥补精简的内容。
2、# Web图形的 11种图形特征
影响Web图形显示的参数是用户的显示器显示器和网络带宽容量。
彩色显示：由于显示器透射光，显示器使用红 - 绿 - 蓝（rgb）添加剂颜色模型。该RGB模式被称为“添加剂”，因为三种色彩纯正，红，绿，蓝光和的组合“增加了”白光。
。计算机的操作系统将显示屏幕组织为x和y坐标的网格，如棋盘。屏幕上的每个小框称为“像素”（“像素”的缩写），每个像素有专用的24或32位显示存储器。
屏幕分辨率：屏幕分辨率是指屏幕在给定区域内可以显示的像素数量。屏幕分辨率通常以每英寸屏幕的像素表示。
伽玛：伽玛指的是图像的中间灰度值之间的对比度。大多数网页设计师选择了一种中间立场的解决方案，如果他们在Macintosh上工作，会略微增加照片的亮度; 如果它们在Windows中工作，则稍微变暗图像并添加一点对比度。使用Adobe Photoshop的“Save for Web”选项处理的网络图像会自动将伽玛调整为适合Mac和Windows显示器的中间级别。
当显示灰度很长的图像（如精细的黑白照片）或准确的颜色值很关键的图像（如艺术品）时，伽马考虑尤为重要。如果您正在处理关键图像，请使用Adobe Photoshop的颜色校对选项来查找太亮和太暗图像之间的中间地点，并在具有代表性的Mac和Windows计算机上查看您的作品。
图形和带宽
3、图形文件格式
主要的web文件格式是gif（发音为“jiff”），jpeg（“jay-peg”），在很小程度上，是png（“ping”）文件。所有这三种常见的网页图形格式都是所谓的位图图形，由棋盘格组成，数千个小方形图像元素或像素。位图文件是熟悉的类型的手机和数码相机生成的文件中，并且很容易创建，编辑，调整大小，以及网络使用进行了优化，
为了通过互联网高效传送，几乎所有的网络图形都经过压缩以尽可能缩小文件大小。大多数网站使用gif和jpeg图像。选择这些文件类型主要是评估问题：
图像的性质（图像是平滑色调过渡的“照片”集合还是具有坚硬边缘和线条的图解图像？）
各种文件压缩对图像质量的影响
压缩技术在制作看起来不错的最小文件大小时的效率
GIF图形：
CompuServe Information Service 在20世纪80年代推广了图形交换格式（gif），作为跨数据网络传输图像的有效手段。gif文件包含了“无损”压缩方案，可以在不影响质量的情况下将文件大小保持在最低限度。但是，gif文件是8位图形，因此只能容纳256种颜色。
GIF文件压缩：在GIF文件格式使用的文件压缩，，而不会丢失数据或扭曲图像
抖动：全彩色照片可以包含几乎无限范围的颜色值; gif图像可以包含不超过256种颜色。将许多颜色减少到256或更少的过程称为抖动。随着抖动，两种颜色的像素并置以产生第三种颜色存在的错觉。将照片图像抖动至256色会产生令人不愉快的颗粒感图像
改进GIF压缩：您可以利用lzw压缩的特性来提高其效率，从而缩小gif图形的大小。策略是将gif图像中的颜色数量减少到所需的最小数量，并去除不需要表示图像的颜色。一个GIF图形不能有超过256种颜色，但它可以有少。在lzw压缩下，具有较少颜色的图像将更有效地压缩。例如，在Photoshop中创建gif图形时，请勿使用256色自动保存每个文件。一个简单的gif图像在8,16或32种颜色下可能看起来很好，并且文件大小的节省可能很大。为了在gif图形中获得最大效率，请使用最少数量的颜色，以获得良好的视觉效果。
隔行GIF：传统的（非隔行扫描）gif图形每次从上到下下载一行像素，浏览器逐渐在屏幕上显示每行图像。在隔行gif文件中，图像数据以允许支持此功能的浏览器在文件下载时在屏幕上构建低分辨率版本的全尺寸gif图片的格式存储。许多人发现隔行扫描具有视觉吸引力的“模糊到清晰”的动画效果，但隔行扫描最重要的好处是，它可以在图片下载到浏览器时为用户提供预览全图。隔行扫描适用于较大的gif图像，
透明的GIF：GIF格式允许你选择从颜色查找表的颜色GIF是透明的。您可以使用Photoshop等图像编辑软件（以及许多共享软件实用程序）在gif图形的调色板中选择颜色以变得透明。通常为透明度选择的颜色是图形中的背景颜色。不幸的是，透明财产并不具有选择性; 如果您使颜色透明，则共享该颜色的图形中的每个像素也将变为透明，这可能会导致意外的结果。为gif添加透明度当图像包含反锯齿时，图形会产生令人失望的结果。
JPEG图形：联合图像专家组（jpeg）压缩方案通常用于Web上的其他图形文件格式以最小化图形文件大小。与gif图形不同，jpeg图像是全彩色图像，它为每个像素分配至少24位内存，从而生成可以包含1680万种颜色的图像。
一种称为“渐进式jpeg ” 的jpeg文件形式，使得jpeg图形与隔行gif中的逐渐建立的显示相同。像隔行扫描gif一样，渐进式jpeg图像通常需要比标准jpeg更长的时间才能加载到页面上，但它们确实为用户提供了更快的预览。
用jpeg压缩压缩图片的次数越多，质量越差。jpeg可以实现令人难以置信的压缩率，将图形压缩到比原始文件小一百倍。这是可能的，因为jpeg算法在压缩图像时会丢弃“不必要的”数据，因此它被称为“有损”压缩技术。
JPEG压缩的代价是：如果过度使用，视觉噪声和其他压缩伪像会大幅增加，从而降低图像质量。
保存您的原始未压缩图像！
一旦图像使用jpeg压缩进行压缩，数据就会丢失，并且无法从该图像文件中恢复。始终将图形或照片的未压缩原始文件保存为备份。
PNG图形：便携式网络图形（PNG）是由图形软件开发商联盟开发的一种图像格式，作为gif图像格式的非专有替代品。如上所述，CompuServe开发了gif格式，而gif使用专有的lzw压缩方案，
png图形专门用于网页，它们提供了一系列有吸引力的功能，包括全面的颜色深度，支持复杂的图像透明度，更好的隔行扫描以及显示器伽马的自动校正。PNG图像也可以包含图像内容的简短文字描述，这允许互联网搜索引擎根据这些嵌入的文字描述来搜索图像。
png支持全彩色图像，可用于摄影图像。但是，因为它使用无损压缩，所以得到的文件比有损JPEG压缩要大得多。与gif一样，png在线条艺术，文字和徽标图像方面表现最佳，这些图像包含大面积的均匀颜色以及颜色之间的锐转变。以png格式保存的这种类型的图像看起来不错，并且具有与保存为gif相似或甚至更小的文件大小。然而，png格式的广泛采用一直很缓慢。部分原因是网页浏览器支持不一致。
屏幕上的图像：为网页创建图像的主要挑战是计算机屏幕的分辨率相对较低。
出于两个原因，复杂的图形或彩色照片通常在网页上显得非常出色：
- 真彩色（24或32位）显示屏可显示足够的颜色，以精确再现照片和复杂的艺术作品，最多可达1680万种颜色; 和
- 从显示器显示屏发出的光线比从打印页面反射的光线显示出更大的动态范围和色彩强度。
数字出版是彩色出版
屏幕与打印的彩色图稿：
四色打印图像分为四种减色打印颜色（ 青色，品红色，黄色和黑色 ）。
复杂的插图或照片：
为您的媒体投资获得最大的灵活性。 以打印分辨率生成自定义图稿和照片，然后使用Photoshop将它们降低到网页分辨率。
电脑屏幕的图表：
保持图形艺术和地图简单的另一个好处是图形简单性非常适合gif图形中使用的lzw编码压缩算法
图形文字：屏幕阅读器不会看到gif和jpeg图形中的图形排版。 搜索引擎在扫描和索引网页时不加载图形，但即使他们这样做了，网页图形也仅仅是一组排列在屏幕区域上的不同颜色的像素，而图形中包含的文本仅仅是不同颜色的像素。 因此，软件无法通过例如朗读文本来智能地使用这些图形。 此外，浏览器无法像常规文本那样将图形文本放大到优雅。 唯一的选择是放大图像，这会导致像素化，难以阅读的模糊文本。 另外，图形文本不能通过用户的浏览器重新着色或设计，以便于阅读。
一般来说，最好的方法是对文本使用纯HTML文本，特别是对于界面的基本功能元素，例如导航链接。 如果图形文本意味着用户无法浏览您的网站，图形文本将成为难以逾越的障碍。 但是，图形文本是可接受的，但是，对于其目的纯粹是可视化的页面元素（例如横幅图形或徽标），只要其他页面元素包含等效信息（例如页面标题和图形的替代文本）。
处理大图像：
控制文件大小的最有效方法之一是减小图像尺寸：图像中的像素越少，文件大小越小，图像加载速度越快。
隐藏图形： 移动设备上的图形缩放以适应小屏幕时显示效果不佳，而且用户需要花费时间下载。 在这些情况下，最好的方法是使用媒体样式表来隐藏不必要的图形，并用文本替换必要的图形，例如导航链接。 层叠样式表可以很容易地在不同的上下文中显示和隐藏元素，但您需要预测文档源中需要什么来适应不同的上下文，并确保您需要的所有内容都在页面代码中
图形标记
高度和宽度标签
所有页面图形源代码（甚至是小按钮或图标图形）都应该包含高度和宽度标签。 这些标签告诉浏览器有多少空间可用于页面上的图形，并且指示浏览器在图形文件开始下载之前布置网页。
ALT文本：
html有几种内置的回退功能，可以让网页在不同的条件下工作。 其中之一是<img>标签的“alt”属性。 alt属性允许您为放置在页面上的任何图像提供替代文字说明。 无法看到图片的用户将会使用alt属性看到或听到您提供的文字：
目标是让页面易于理解，而不是图像。 重点不在于使用文字来表达图像的细节和细微差别，而是要在页面上下文中描述图像。 这个区别对于决定对图像说或者说多少很重要。
对于传达大量信息的复杂图像，最好的方法是使用图像标题以文字形式充分描述图像中传达的信息。
有时候，alt-text不会有用 - 例如，像自定义项目符号或图标这样的界面图像
彩色的背景：
Web颜色提供了零带宽的方式，可以在不添加图形的情况下改变页面的外观。 它们还允许您增加页面的易读性，调整背景颜色以补充前景艺术，并标示从您网站的一部分到另一部分的广泛变化。
使用纯CSS制作的大型色域可以增加很好的视觉效果，而无需添加大图片下载。
颜色在标签中以十六进制代码指定，其中六个元素给出了混合制作颜色的红色，绿色和蓝色值。 在标签中，十六进制代码总是以“＃”符号开头 ：（＃ rrggbb ）
背景颜色和易读性
影响可读性的主要因素是文本和背景之间的对比。 低对比度类型会降低读者区分背景颜色和文本的能力，从而使字体难以区分。
对比度对颜色分化的影响最大，特别是亮度或明暗对比度。 白色（或略带浅色）背景上的黑色文字产生最佳的整体类型对比度和易读性。 黑色背景比白色背景明显不易辨认，即使使用白色类型以获得最大对比度。 如果颜色保持在柔和的色调中，并且整体颜色饱和度较低（淡色，浅灰色和浅色土色调效果最佳），则可以使用彩色背景替代白色。 互补色 （如黄色和蓝色）会产生比邻近颜色（如橙色和绿色）更强的对比度。
背景图形
级联样式表为设计包含背景图形的布局提供了强大的工具。 使用css，您可以设置背景图形并定义它显示的位置，是否重复，如果是，重复的方向，图像是否固定到位或与页面一起滚动等等。 背景图形可以附加到整个页面或各个元素，例如横幅，导航或内容区域
侧栏：颜色术语
颜色是我们的眼睛和大脑对各种波长的光的反应 。 具有正常视力的读者可以感测400纳米（近紫外）至700纳米（近红外）的光波长。
计算机屏幕使用添加了颜色的系统 ，它结合了红色，绿色和蓝色原色的荧光粉，当它们以各种比例相加时，可在RGB屏幕上产生超过1600万种颜色。 所有三个RGB原色的最大亮度在屏幕上产生白光。
称为HSB颜色系统 （用于色相，饱和度和亮度）
色调
色调是沿可见光光谱的颜色波长。 思考色调的简单方法是将颜色命名为：“黄色”，“橙色”或“红色”。
饱和
饱和度描述了一种颜色的强度，从纯粹的高色度颜色到接近灰色的颜色。
因此，在设计中，我们经常使用不饱和的颜色作为背景，并通过使用全饱和的颜色（谨慎地！）吸引注意力。
亮度
颜色的亮度或黑度，或与给定颜色的黑色或白色有多接近。
色彩和谐
四种用于组合颜色的经典公式用于所有形式的设计。
