HTML 图像

HTML 图像元素 (<img>) 是通过引用外部图像文件 (src 属性) 或内嵌图像数据 (data URI 方案) 来向 HTML 文档中插入图像的一种方式。本文将介绍如何在 HTML 中使用图像元素，并说明与图像元素相关的一些属性和注意事项。

使用 <img> 元素插入外部图像

外部图像指的是存储在服务器上、与 HTML 文档不在同一源下的图像文件，如 JPEG、PNG、GIF 等格式。要在 HTML 中插入外部图像，需使用 <img> 元素，并在 src 属性中指定图像文件的 URL 地址。

<img src="http://example.com/img/example.jpg" alt="Example Image">

上面这个示例使用了一个名为 example.jpg 的 JPEG 图像，并将其存储在 http://example.com/img 目录下。图像元素还指定了一个 alt 属性，用于提供图像的替代文本，以便在图像无法加载时向用户呈现。

插入内嵌图像数据

与外部图像不同，内嵌图像数据是嵌入在 HTML 页面中的图像数据。这种数据通常使用 data URI 方案来表示，即将图像数据编码为字符串并放在 URL 中。这种方式有时可以减少网络请求次数，但并不适合大型图像。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURcV7Jz89vz5c7LzF5jJW7PNZAAAAFpSURBVHjaYvz//z8DIYAFBxBlAItEHSQE+ApULMuyUA9UIZuk6FUBgwEOY2SIrcBSGlwGCShyDkBpAyEhYYGBiYGGMAitQQOPRZ4DBm4HmblbFqIT0XAQ2xGhyzSBr0JiwZqvwhcZT9TjU6FoQYwsYrxCTlCsdLs50sGkej+uffYZCuGhAWEA/M9X4IO1e4nKBK+xHYFkQxJFPdIMMP/gzIeUMb7m3j2Zxe99Fn/Pz55t/mJ+7p8AUvKjV7r5f5l5W7jN0f9ZltJpGvyhAYOAAAAAElFTkSuQmCC" alt="PNG Image">

上面这个示例使用了一个 PNG 格式的内嵌图像，并将其作为 data URI 方案插入了 HTML 中。可以看到，src 属性中的值并不是一个图片 URL 地址，而是以格式 data:xxx/yyy;base64,data_content 来表示的图像数据。

alt 属性和替代文本

HTML 图像元素有一个 alt 属性，用于指定图像的替代文本。这个属性为可选属性，但是在图像无法加载或者用户无法正常浏览时，这个文本会显示在图像的位置上。这样可以让用户知道这里应该有一幅图像，但由于某些原因无法浏览。

<img src="http://example.com/img/example.jpg" alt="Example Image">

上面这个示例中的图像元素就有一个 alt 属性，它的值是 "Example Image"，用于表示这幅图像是一个示例图像。当图像无法加载时，将会在页面中显示这段文字。

图像尺寸和宽高属性

HTML 图像元素默认不会限制图像的大小，如果图像太大，会将元素的大小撑开。所以，在插入图像时，我们通常需要指定宽高属性来调整图像的大小。例如：

<img src="http://example.com/img/example.jpg" alt="Example Image" width="400" height="300">

上面这个示例设置了图像元素的 width 和 height 属性，分别为 400px 和 300px。这样，无论图像的实际大小是多少，都会被浏览器按照这个尺寸进行缩放，从而使图像保持适当的大小。

美化图片

除了使用 CSS 样式对图片进行美化外，HTML5 标准也支持一些属性来对图片进行美化。其中 border、align、hspace 和 vspace 四个属性已被弃用，不应再使用。

loading 属性

HTML5 标准引入了 loading 属性，可设置成 "lazy"、"eager" 或不设置，用于指定图像的加载方式。属性值为 "lazy" 时，表示只有在图像到达屏幕可见范围时才开始加载图像，而属性值为 "eager" 时则会立即加载图像。不设置该属性时，图像默认是 eager。

<img src="http://example.com/img/example.jpg" alt="Example Image" loading="lazy">

decoding 属性

HTML5 标准引入了 decoding 属性，用于指定图像的解码方式。属性值为 "sync" 表示同步解码（即按顺序解码），属性值为 "async" 表示异步解码（即并行解码）。默认为异步解码。

<img src="http://example.com/img/example.jpg" alt="Example Image" decoding="sync">

sizes 和 srcset 属性

HTML5 标准引入了 sizes 和 srcset 属性，用于指定不同屏幕尺寸下应该使用的图像。 sizes 属性告诉浏览器何时应该使用 srcset 中的哪个图像， srcset 属性则提供了一组备选图像。这个属性允许开发者根据设备的屏幕尺寸提供优化的图像资源，从而节省带宽和提高页面性能。

<img
  src="http://example.com/img/example.jpg"
  alt="Example Image"
  srcset="
    http://example.com/img/example-hd.jpg 2x,
    http://example.com/img/example-fhd.jpg 3x
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
>

上面这个示例设置了 srcset 属性，其中包含了两个备选图像：一个分辨率为原图的双倍（300px），一个分辨率为原图的三倍（450px）。在定义 img 元素的 sizes 属性时，我们使用了多个 CSS 媒体查询语句，根据设备的宽度来提供不同的尺寸。如果设备屏幕宽度小于 600px，就使用 100vpw；如果宽度在 600px 到 1200px 之间，就使用 50vw；如果宽度大于 1200px，就使用 600px。

总结

HTML 图像元素是在网页中插入图像的一种方式，它可以引用外部图像文件或者内嵌图像数据。当插入图像时，我们需要设置一些属性来调整尺寸、美化，还要添加替代文本等。除此以外，新的 HTML5 标准为开发者提供了更多的属性和特性，例如 loading、decoding、sizes 和 srcset 等，可帮助我们更好地优化图像并提高页面性能。