WSG4 了解图像类型 UNDERSTANDING IMAGE TYPES
- 网页图像5种基本类型
| 描述 | 类型 |
|---|---|
| 使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像，像 Adobe Illustrator (.ai) 文件 | 矢量图 |
| 以开放格式的 xml 文件类型保存的一种矢量图，直接用于网页上 | 可伸缩矢量图形 SVG |
| 是由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格 | 位图／点阵图 或称 光栅图 |
| 单靠 css 代码在网页上的使用，可加配有阴影丶边缘丶阴影丶悬停和点击状态等等效果 | CSS 图形 |
| 一种简便方法，把数十甚至数百个矢量符号和图标，一次以非常紧凑的形式加载至网站中 | 图标字体 |
- 矢量图
- 当你投资于插图时，矢量图作品是特别有吸引力的，因为你可以在众多不同的媒体上使用它：网络丶APP应用丶电子书丶和印刷。
- 反讽刺的是，像复杂的矢量插图有可能因其复杂程度，储存为 SVG 图形时，不会节省任何带宽。
- 复杂矢量图因复杂而浪费带宽的话，将复杂矢量图作品转换为 jpeg 文档，以适应 1倍和2倍 (1× and 2×) 及(1× and 2×) 及示屏幕，是好方法。
- 矢量图很少有位图（如照片）有深度或复杂度。通常只是形状的简略描述，所以文档小，下载快。
- 矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）。
WSG4_11 中优化屏幕图像
-
关于媒体查询的说明。
- html5 srcset属性和< picture>元素可以自动地将适当大小的图像发送到给定的屏幕大小，这在很大程度上取决于web浏览器制造商如何快速地采用这些重要的图像质量工具，以及它们到底是如何实现的。
- 在html或css像素中指定的位图图像大小现在使用虚拟像素。
WSG4_11.3中的使用网页图像照片与图示
- 矢量图形可以被扩展成多个分辨率的位图jpeg或 pngs，每个尺寸都有很好的质量。
- 项目矢量图形也可以用于打印