关于网页图像
即使在 72－96 ppi的状况下，网络上的照片在全彩屏幕上总是看起来很棒，原因是照片在屏幕上比打印时有更广的动态范围。在屏幕上，照片确实照耀着我们的眼，屏幕产生的灯光和深色比彩色印刷页反射的光线有着更丰富的色彩范围。
了解图像类型
位图／点阵图或 光栅图
位图/点阵图 (bitmap) 或称光栅图 (raster) 图像是由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格。每个像素都有其特定的颜色，因此由於像素很小丶又可以是数百万种颜色中的任何一色，所以光栅图像格式通常用于照片和复杂的图稿。
矢量图像
- 矢量图使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像。矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）；矢量图很少有光栅图（如照片）有深度或复杂度。但是矢量图，和光栅图相比具有一些重要的优势：
- 因为矢量图像文件只是形状的简略描述，所以文档小，下载快。
- 矢量图像可以缩放到任何大小，而不减损其质量。
- 虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。
可伸缩矢量图形
svg 图像是以矢量图，以开放格式的 xml 文件类型保存，而不是像 Adobe Illustrator (.ai) 文件那样的產權专有的矢量图像格式。大多数 .ai 图形可以保存在 svg 格式，进而直接用于网页上。作为矢量图， svg 图形可以缩放到任何大小，而没有质量损失；由於其文档大小是紧凑的，因此在移动应用和响应网站创建图形方面， svg 越来越流行，至少对于相对简单的图像和形状来说。
CSS 图形
- 当你投资于插图时，矢量图作品是特别有吸引力的，因为你可以在众多不同的媒体上使用它：网络丶APP应用丶电子书丶和印刷。反讽刺的是，像这图展示的复杂的矢量插图有可能因其复杂程度，储存为 SVG 图形时，不会节省任何带宽。在此情境下，通常将复杂矢量图作品转换为 jpeg 文档，以适应 1倍和2倍 (1× and 2×) 及各种分辨率的显示屏幕，是更好的方法。
- 层叠样式表 (css) 的视觉样式功能长期以来拿来创建简单或复杂的图形效果，单靠 css 代码在网页上的使用。可能最常见的 css 图形是图形按钮，纯 css 的技术拿來把简单的 html spans, divs, 及链接 转换成任何颜色或形状的图形按钮，可加配有阴影丶边缘丶阴影丶悬停和点击状态等等效果。css 技术能在网页上创建复杂的图形效果，而实际上没有內嵌 jpeg, gif, or png 图形：单靠 html 元素使用 css样式。
图标字体
- 图标字体 (icon fonts) 图标字体提供了一种简便方法，把数十甚至数百个矢量符号和图标，一次以非常紧凑的形式加载至网站中。不同於一般计算机字体提供的是文字字母和数字字符 (alphanumeric characters) ，图标字体存的是各式图标，这样只需一次 http 请求，网页就能有数以百计的矢量符号可用。图标字体允许您轻松地使用 css 来更改图标的大小丶颜色丶阴影效果或其他图标的图形特点。
- 虽然将复杂的矢量图形转换为图像可能会有问题
- svg格式，矢量图形是一项优秀的投资，因为:
- 工作浏览器中的svg支持将继续改进。
- 矢量图形可以被扩展成多个分辨率的位图jpeg或pngs，每个尺寸都有很好的质量。这在交付的方案中很有用，基于屏幕分辨率的页面图形，在这里创建1x和2x，为每一种显示屏幕优化插图的版本。
- 项目矢量图形也可以用于打印。
照片与图示
- jpeg是最广泛用于复杂彩色插图和照片的文件格式。
- 在一般的jpeg图形中，压缩和生成优秀的图形是有效的
- 结果显示在现代显示屏和印刷使用。在新的视网膜上或2x显示
- 适当大小的jpeg照片或插图很容易与最好的版画竞争
- 如果您在web工作中使用大量的jpeg，您需要特别小心，总是保留相机原件(jpeg或相机raw)或原件，即使这些原始图像很少，也可以在完全分辨率下进行Photoshop处理，用于web页面的完整解析。jpeg使用一个“有损”的图像压缩系统，当它以jpeg格式保存时，会降低图像的质量。通常情况下,这，对于休闲网站来说，图像压缩与图像质量的权衡并不明显，读者，但是有损压缩有重要的含义，如果您需要重新扩展，或者编辑jpeg图像。因此，当使用jpeg格式时，这是很好的实践，为了避免重压缩的质量损失，只在原始文件的副本上工作jpeg照片。
为图像提供替代文字
- html有内置的回调功能，可以让网页在不同的环境条件下工作。其中一个是< img >标记的alt属性。alt属性允许你提供一个替代的文本描述任何你放置在你的图片页面。无法看到你的图片的用户将会看到或听到你使用的文本
- 写好文章是一门艺术，挑战你的描述能力
- 一幅图像的内容和功能只是几句话。重点不在于使用文字表达图像的细节和细节，而是要在页面的上下文中描述图像。这一区别在于决定一个图像的多少，或说多少至关重要的。
- 对于功能图像，例如按钮、徽标和图标，文本应该输入相对应的名称。标识的横幅图形。公司也应该这样做:“Acme地毯清洁器”（Acme carpet cleaner）。接口图标应该描述图标所代表的功能:“Play”、“暂停”、“倒带”、“快进”。
- 复杂的内容图像，如插图，略图，和图表，需要到的描述比可以包含在alt属性中的描述更长。在许多情况下,最好的方法是在图像中添加标题，使所有用户都受益理解图像中包含的信息。例如，对于图表，这显示了随时间增加的寿命，包括可访问表中的数据和图像。这样，屏幕阅读器用户就可以更好地访问相同的信息、理解数字。html5提供< figure >和< figcaption >元素，以进行编程连接图片和标题之间。 w3c中的html5文档：提供有用的文本替代方法的技术是对于理解在描述不同上下文中的图像时的最佳方法及极佳资源
為屏幕优化屏幕图像
- 计算机和网络世界目前处于一种尴尬的跨界中，旧的72 - 96- ppi(像素/线性英寸)或1x显示标准和更新“视网膜”或2x高分辨率显示屏。回想起来，令人惊讶的是，这是多么漫长的72 - 96- ppi显示分辨率持续。几乎所有其他的计算都有在互联网存在的25年里发生了巨大的变化，但有几个因素结合起来让我们坚持了72 - 96- ppi标准。
- 我们已经从旧的大阴极技术中进行了重大的展示技术的转变。射线管监视器到能够显示非常高分辨率的新平面屏幕。但当平板电视首次出现在市场上时，价格非常昂贵。老72 - 96- ppi标准继续保持新屏幕的成本合理。即使在移动设备上，成熟的平板屏幕技术和不断增加的计算能力的结合，已经大大提高了屏幕分辨率。可能，在接下来的几年里，200个ppi或更多的屏幕将成为新的各种计算显示器的标准。