跳到主要内容

简述

图片一般是 <img> 标签插入。必须属性为 src 和 alt 。

  • height 、 width 高和宽
  • ismap 将图像定义为服务器端图像映射
  • usemap 将图像定义为客户端映射
  • longdesc 指向包含很长的图像描述文档的 URL

分辨率 、 分类​

分辨率​

图像的分辨率是构成图像的单个点或像素的数量（通常为 72 点 / 英寸或 72dpi ）。与较小的低分辨率图像相比，较大的高分辨率图像一般要花较长的时间进行传输和显示。图像尺寸通常被指定为图像的宽度乘以图像的高度，用像素表示。例如， 300×200 的图像是指图像的宽度为 300 像素，高度为 200 像素。

分辨率并不是决定图像文件的存储尺寸（和传输时间）的最重要的因素 。这是由于 Web 页面上使用的图像总是以压缩的形式存储和传输的。图像压缩是对图像进行的数学处理，以挤压出重复的模式。图像压缩的数学知识很复杂，但是基本的思想是：当在磁盘上存储图像时，可以挤压出重复的模式或者较大的同色区域。这使图像文件要小得多，并且允许在 Internet 上更快地传输。以后，在显示图像时， Web 浏览器将恢复图像的原始外观。

JPEG​

对于 Web 上的照片图像，当以 JPEG 文件格式（而不是 GIF 格式）保存时，它们将工作得最好。 JPEG 使你能够保留文件中的颜色数量，同时仍然使文件的总体大小保持在一个可管理的水平。

GIF​

减少图像尺寸（及其下载时间）的最有效的方式之一是减少图像中使用的颜色数量。这可能会显著降低一些照片图像的视觉质量，但是它非常适合于大多数横幅 、 按钮及其它图标。

它就是 GIF （ Graphics Interchange Format ，图形交换格式）。当把图像保存或导出为 GIF 时，可能会提示你拼合图标，或者通过把它转换成索引图像（ indexed image ）来减少颜色数量。

PNG​

PNG （读作" ping "）是所有主流的 Web 浏览器中都支持的一种有用的文件格式。 GIF 图像格式允许指定单独一种透明色，这意味着 Web 页面的背景将透过图像的那些区域显示出来，而 PNG 格式则更进一步，它允许指定不同的透明度。

必须知道的图像格式和压缩形式 矢量图​

矢量图，也称为面向对象的图像或绘图图像，是根据几何特性来绘制图形，在数学上定义为一系列由线连接的点。例如，一个圆可以通过它的圆心位置和半径来描述。存储矢量图的矢量文件中的图形元素可称为对象，每个对象都具有颜色 、 形状 、 轮廓 、 大小和屏幕位置等属性，矢量图的文件占用空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制重新组合。矢量图的特点是放大后图像不会失真，和分辨率无关，适用于图形设计 、 文字设计和一些标志设计 、 版式设计等。

位图​

位图图像也可称为点阵图像，是由单个像素点组成的，因此也可称为像素图。位图的像素点可以进行不同的排列，每一个点的颜色 、 深度 、 透明度等信息构成图样。扩大位图尺寸的效果是增大单个像素，可以看见整个图像的单个方块，会使线条和形状显得参差不齐，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。位图的优点是利于显示色彩层次丰富的写实图像，但缺点则是文件较大，放大和缩小图像会失真。尽管常常在页面中所使用的 JPG 、 PNG 、 GIF 格式的图像都是位图，都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是有损压缩和无损压缩的区别。

有损压缩图像​

有损压缩图像是利用了人类对图像中的某些频率成分不敏感的特性，允许压缩过程中损失一定的不敏感信息，虽然不能完全恢复原始数据，但是所损失的部分对理解原始图像的影响较小。例如，人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色，因此可通过一定程度地有损压缩去除图像中某些会对人眼不敏感的颜色细节，然后使用附近的颜色通过渐变或其它形式进行填充。 JPEG/JPG 是最常见的采用有损压缩对图像信息进行处理的图片格式。

无损压缩图像​

相对于图像有损压缩损失部分不敏感数据的特点，图像无损压缩则会记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，而把不同的数据再做保存。 PNG 是最常见的采用无损压缩的图片格式。

网页中使用的图像可以是 JPEG 、 GIF 、 PNG 、 BMP 、 TIFF 等格式的图像文件，适当地在网页中使用美观的图片会给浏览网站的用户带来良好的视觉体验，给用户带来更直观的感受。但是网页上的图片如果过多，也会影响网站的浏览速度，所以要合理适当地使用图像。

JPEG/JPG 是网页中常见的图像格式，这种图片以 24 位颜色存储单个位图，支持数百万种颜色，因此适合于具有颜色过渡的图像或需要 256 种以上颜色的图像。 JPEG 图像是真彩色图像，不支持透明和动画，是典型的有损压缩图像，支持隔行扫描。

GIF 也是网页中常见的图像格式，采用 LZW 压缩算法，最多可以包含 256 种颜色，同时还可以允许一个二进制类型的透明度和多个动画帧，因此 GIF 格式通常适用于卡通 、 徽标 、 包含透明区域的图形以及动画。 GIF 格式最大的优点就是可以制作动态的图像，它可以将数张静态图片作为动画帧串联起来，转换成一个动画文件。

PNG 是网页中的通用格式，最多可以支持 32 位的颜色，可以包含透明度或 Alpha 通道。 PNG 图像支持真彩色和调色板，支持完全的 Alpha 透明，支持动画。是无损压缩的典型代表。同时支持隔行扫描。需要注意的是在低版本浏览器中 PNG 图片的透明度需要采用特殊方法进行兼容。

对比不同格式图像的优缺点，可见选择图像是采用 JPG 还是 PNG 主要依据图像上的色彩层次和颜色数量，以及是否需要支持动画效果。一般层次丰富 、 颜色较多的图像采用 JPG 存储，而颜色简单对比强烈的则需要采用 PNG 。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用 PNG 进行存储。

提前载入图片​

常用的方法是使用 JavaScript 的 Image 对象。

JavaScript 有一个内嵌 Image 类。使用该类可以进行图像的预装载。将图像的 URL 传递给该对象的 src 之后，浏览器将会进行装载请求，并将预装载的图像保存到 cache 中。如果有图像请求时，将调用 cache 内的图像，从而将图像立即显示，而不是重新装载。

/**
 *
 */
function loadImage(url, callback) {
  const img = new Image();
  img.src = url;
  if (img.complete) {
    callback.call(img);
    return;
  }
  img.onload = function () {
    callback.call(img);
  };
}

定义流​

figure 和 figcaption 引入流，其中 figcaption 表示标题，非必须。

figure 可包含许多块，但只允许包含一个 figcaption ，且必须与其它的内容一起包含在 figure 里。

figure 默认左右缩进 40 px 。

定义图标​

扩展名为 .ico ，由 link 元素插入在 meta 元素中。

使用 base64:URL 格式的图片​

代码中 img 的 src 属性的值其实是一张小图片， data 表示取得数据的协定名称， image/png 是数据类型名称， base64 是数据的编码方法，逗号后面就是 image/png 文件 base64 编码后的具体数据内容。

使用 base64:URL 传输图片文件的优点在于不仅减少了 HTTP 请求，而且某些文件可以避免跨域的问题，这对于 canvas 保存为 img 的时候尤其有用。同时，不受浏览器缓存的影响，一旦图片更新要重新上传，不需要清理缓存。

放置图像​

<img src="myImage.gif" alt="My Image" /> <img />

标签是也支持 title 属性的 HTML 标签之一，也可以使用这个属性来描述图像，与 alt 属性非常相似。不过， title 属性有些问题，这是由于在不同的用户代理之间将以不一致的方式显示它，因此是不可信赖的。你可能会看到 title 属性的使用，并且在使用它时 HTML 是有效的，但是请不要使用它代替 alt 属性。如果这样做，将会限制站点在许多类型的设备上的有用性。

利用文本描述图像​

alt 代表替代文本（ alternate text ），如果图像没有加载，就会显示该消息，用以代替图像。如果图像的地址不正确，如果 Internet 连接非常慢并且数据还没有传输，或者如果用户使用的是纯文本浏览器或屏幕阅读器，那么图像可能不会加载。

对齐图像​

  • 水平图像对齐
  • 垂直图像对齐

响应​

<picture>
  <source media="(min-width:650px)" srcset="image/beian.png" />
  <source media="(min-width:450px" srcset="image/beian.png" />
</picture>

响应式图像​

利用 picture 作为标签。可以包含一或多个 <source> 子标签。 <source>可以加载多媒体资源。包含

  • srcset 设置图片路径
  • media 设置媒体查询
  • sizes 设置宽度
  • type 设置 MIME 类型
<picture>
  <source media="(orientation:portrait)" srcset="image/beian.png" />
  <source media="(orientation:landscape)" srcset="image/beian.png" />
  <img src="image/beian.png" alt="备案" />
</picture>

响应像素密度​

嗯，在 srcset 标签地址后添加要响应的密度。

<img
  srcset="
    image/2500.png,
    image/1500.png,
    image/1000.png,
    image/500.png,
    image/.png
  "
  src="image/beian.png"
  alt=""
/>

响应图片格式​

通过设置不同的 type 值进行响应。

自适应像素比​

除了 source 元素外， HTML 5 新增了 srcset 元素。 srcset 包括一个或多个源图集合，不同源用逗号分隔，每一个源图有一下两部分组成：

  • URL
  • x(像素比描述)和 w （图像像素宽度描述）描述符。描述符需要与图像的 URL 之间有空格， w 描述符加载策略是通过 sizes 属性里声明来计算的

自适应密度比​

通过几个属性协同合作，创建。

映射图像内的区域​

将 map 元素和 area 元素组合使用，可创建分区响应图。 map 元素中的 name 属性必须定义，赋予一个名称，以便 img 元素引用它，如果同时还指定了 id 属性，那么两个属性必须具有相同的值。

要创建任何类型的图像映射，需要搞清楚图像内想转换成可单击链接的每个区域的数字像素坐标，这些可单击的链接也称为区域（ area ）。你的图形程序可能提供一种容易的方式来查找这些坐标。或者你可能想使用一个独立的图像映射工具（如 Mapedit上的图像映射制作器）。

如果使用图像映射生成器，它将提供创建图像映射所需的 HTML 代码。不过，理解代码的各个部分是一个好主意，以便可以检查它正确与否。下面的 HTML 代码是开始创建任何图像映射所必需的：

<map name="mapname"></map>
<area
  shape="rect"
  coords="1,73,74,163"
  href="http://en.wikipedia.org/wiki/Alaska"
  alt="Alaska"
  title="Alaska"
/>

这个 <area /> 标签具有 5 个属性，可以把它们用于在图像映射中描述的每个区域。

  • shape 指示区域是一个矩形（ shape="rect" ） 、 圆形（ shape="circle" ），还是一个不规则的多边形（ shape="poly" ）
  • coords 给出了区域的精确像素坐标。对于矩形，将给出左上角的 x 、 y 坐标，其后接着右下角的 x 、 y 坐标。对于圆形，将给出中心点的 x 、 y 坐标，其后接着半径（以像素为单位）。对于多边形，则按连线 - 点的顺序列出各个角的 x 、 y 坐标
  • href 指定区域链接到的位置。可以使用你将在普通的 <a> 链接标签中使用的任何地址或文件名
  • alt 允许提供一段与形状关联的文本。你在前面学过，提供这段文本对于利用纯文本浏览器或屏幕阅读器浏览 Web 页面的用户很重要。使用 title 属性可以确保当用户访问指定的区域时，包含信息的工具提示也是可见的

制作映射图像的一种方法只依赖于 CSS ，而不是 HTML <map> 标签。

crossorigin​

属性是一个 HTML5 新增的属性，有两个关键字可供选择，分别是 anonymous 和 use-credentials 。 anonymous 用于执行一个跨域请求，响应报文需要包含 Access-Control-Allow-Origin 首部； use-credentials 表示一个有证书的跨域请求，响应报文需要包含 Access-Control-Allow-Credentials 首部

crossorigin 属性的目的是帮助 canvas 元素能够使用第三方站点的图像，并且不会污染画布。所谓画布污染，就是指不能再使用画布的 toDataURL() 、 getImageData() 等方法。