图形

1、Web图形的作用

图形作为内容
图形作为内容的元素有许多目的 - 与文本内容一起并补充：

插图：图形可以显示你的东西，把世界的碎片带入你的文档
图：定量图形和流程图可以直观地解释概念
定量数据：数字图表可以帮助解释财务，科学或其他数据
分析和因果关系：图形可以帮助分解一个主题或显示造成它的原因
整合：图形可以将文字，数字和图像进行全面的说明

插图
图和定量数据
集成可视化演示文稿
多面信息图形通常将自由形式布局中的定量图表，三维插图和大量字幕集成在一起，成为可以解释复杂概念和自然现象的视觉叙述

我们对图形通信的建议与书面沟通相同：

相信读者的智慧。不要贬低你的材料，因为假设网络用户与印刷读者有某些根本不同的人，并且对复杂性没有兴趣。网站的普通读者可能曾经与其他出版读者区分开来，但现在每个人都读网页。
尊重媒体。读者与平面媒体中的读者一样，但网络具有不同的长处和短处。利用网络的巨大能力来交流复杂的彩色视觉效果，而不需要打印和物理分配。
按照你的理解说实话。歪曲量化数据不仅仅是沟通失败; 这是对读者信任的背叛。
不要挑选你的数据。如果您正在制作视觉证据的案例，请不要过度和编辑您的视觉效果，以免观众别无选择，只能接受您的观点。请相信您的观众足以向他们提供数据：让他们看到相同的更高分辨率的图像或您看到的模糊结果，并自行决定问题。
要大胆和实质。对视觉传播的严肃关注并不要求您只使用苍白色的小而粗糙的图形。如果没有人注意到，视觉证据就不会成为有说服力的。只是永远不要试图用明亮的图形来吸引观众来弥补精简的内容。

屏幕分辨率：屏幕分辨率是指屏幕在给定区域内可以显示的数量。屏幕分辨率通常以每英寸屏幕的像素表示。

当显示灰度很长的图像（如精细的黑白照片）或准确的颜色值很关键的图像（如艺术品）时，伽马考虑尤为重要。如果您正在处理关键图像，请使用Adobe Photoshop的颜色校对选项来查找太亮和太暗图像之间的中间地点，并在具有代表性的Mac和Windows计算机上查看您的作品。

图形和带宽

为了通过互联网高效传送，几乎所有的网络图形都经过压缩以尽可能缩小文件大小。大多数网站使用gif和jpeg图像。选择这些文件类型主要是评估问题：

图像的性质（图像是平滑色调过渡的“照片”集合还是具有坚硬边缘和线条的图解图像？）
各种文件压缩对图像质量的影响
压缩技术在制作看起来不错的最小文件大小时的效率

GIF图形：
CompuServe Information Service 在20世纪80年代推广了图形交换格式（gif），作为跨数据网络传输图像的有效手段。gif文件包含了“无损”压缩方案，可以在不影响质量的情况下将文件大小保持在最低限度。但是，gif文件是8位图形，因此只能容纳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压缩进行压缩，数据就会丢失，并且无法从该图像文件中恢复。始终将图形或照片的未压缩原始文件保存为备份。

png图形专门用于网页，它们提供了一系列有吸引力的功能，包括全面的颜色深度，支持复杂的图像透明度，更好的隔行扫描以及显示器伽马的自动校正。PNG图像也可以包含图像内容的简短文字描述，这允许互联网搜索引擎根据这些嵌入的文字描述来搜索图像。

png支持全彩色图像，可用于摄影图像。但是，因为它使用无损压缩，所以得到的文件比有损JPEG压缩要大得多。与gif一样，png在线条艺术，文字和徽标图像方面表现最佳，这些图像包含大面积的均匀颜色以及颜色之间的锐转变。以png格式保存的这种类型的图像看起来不错，并且具有与保存为gif相似或甚至更小的文件大小。然而，png格式的广泛采用一直很缓慢。部分原因是网页浏览器支持不一致。

屏幕上的图像：为网页创建图像的主要挑战是计算机屏幕的分辨率相对较低。
出于两个原因，复杂的图形或彩色照片通常在网页上显得非常出色：

显示足够的颜色，以精确再现照片和复杂的艺术作品，最多可达1680万种颜色; 和
从显示器显示屏发出的光线比从打印页面反射的光线显示出更大的动态范围和色彩强度。

数字出版是彩色出版

复杂的插图或照片：

为您的媒体投资获得最大的灵活性。以打印分辨率生成自定义图稿和照片，然后使用Photoshop将它们降低到网页分辨率。

电脑屏幕的图表：

保持图形艺术和地图简单的另一个好处是图形简单性非常适合gif图形中使用的lzw编码压缩算法

图形文字：屏幕阅读器不会看到gif和jpeg图形中的图形排版。搜索引擎在扫描和索引网页时不加载图形，但即使他们这样做了，网页图形也仅仅是一组排列在屏幕区域上的不同颜色的像素，而图形中包含的文本仅仅是不同颜色的像素。因此，软件无法通过例如朗读文本来智能地使用这些图形。此外，浏览器无法像常规文本那样将图形文本放大到优雅。唯一的选择是放大图像，这会导致像素化，难以阅读的模糊文本。另外，图形文本不能通过用户的浏览器重新着色或设计，以便于阅读。

一般来说，最好的方法是对文本使用纯HTML文本，特别是对于界面的基本功能元素，例如导航链接。如果图形文本意味着用户无法浏览您的网站，图形文本将成为难以逾越的障碍。但是，图形文本是可接受的，但是，对于其目的纯粹是可视化的页面元素（例如横幅图形或徽标），只要其他页面元素包含等效信息（例如页面标题和图形的替代文本）。

处理大图像：

控制文件大小的最有效方法之一是减小图像尺寸：图像中的像素越少，文件大小越小，图像加载速度越快。

图形标记

高度和宽度标签

所有页面图形源代码（甚至是小按钮或图标图形）都应该包含高度和宽度标签。这些标签告诉浏览器有多少空间可用于页面上的图形，并且指示浏览器在图形文件开始下载之前布置网页。

ALT文本：

html有几种内置的回退功能，可以让网页在不同的条件下工作。其中之一是<img>标签的“alt”属性。 alt属性允许您为放置在页面上的任何图像提供替代文字说明。无法看到图片的用户将会使用alt属性看到或听到您提供的文字：

目标是让页面易于理解，而不是图像。重点不在于使用文字来表达图像的细节和细微差别，而是要在页面上下文中描述图像。这个区别对于决定对图像说或者说多少很重要。

对于传达大量信息的复杂图像，最好的方法是使用图像标题以文字形式充分描述图像中传达的信息。

有时候，alt-text不会有用 - 例如，像自定义项目符号或图标这样的界面图像

彩色的背景：

Web颜色提供了零带宽的方式，可以在不添加图形的情况下改变页面的外观。它们还允许您增加页面的易读性，调整背景颜色以补充前景艺术，并标示从您网站的一部分到另一部分的广泛变化。