关于网页图像
了解图像类型
位图／点阵图或 光栅图
-位图/点阵图 (bitmap) 或称光栅图 (raster) 图像是由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格。每个像素都有其特定的颜色，因此由於像素很小丶又可以是数百万种颜色中的任何一色，所以光栅图像格式通常用于照片和复杂的图稿。
矢量图像
- 矢量图使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像。矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）；矢量图很少有光栅图（如照片）有深度或复杂度。但是矢量图，和光栅图相比具有一些重要的优势:
- 因为矢量图像文件只是形状的简略描述，所以文档小，下载快。
- 因为矢量图像文件只是形状的简略描述，所以文档小，下载快。
- 虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。
可伸缩矢量图形 SVG
svg 图像是以矢量图，以开放格式的 xml 文件类型保存，而不是像 Adobe Illustrator (.ai) 文件那样的產權专有的矢量图像格式。大多数 .ai 图形可以保存在 svg 格式，进而直接用于网页上。作为矢量图， svg 图形可以缩放到任何大小，而没有质量损失；由於其文档大小是紧凑的，因此在移动应用和响应网站创建图形方面， svg 越来越流行，至少对于相对简单的图像和形状来说。
CSS 图形 CSS-based graphics
-当你投资于插图时，矢量图作品是特别有吸引力的，因为你可以在众多不同的媒体上使用它：网络丶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 来更改图标的大小丶颜色丶阴影效果或其他图标的图形特点。