您可以在网页中放置各种图片，当访问者浏览网页时，浏览器会自动加载这些图片。但是，加载时间与访问者的网速、图片大小和页面中图片的数量有关。
HTML中，通过 img 元素向网页嵌入一幅图像。img 元素是一个空元素，需要加“/”来正确关闭。在 img元素中，通过 src 属性来指定图像的URL，可以是绝对URL，也可以是相对URL。在HTML中，通过img元素将图像嵌入网页。img元素是空元素，需要“/”才能正确结束。在img元素中，图像的URL由src属性指定，它可以是绝对URL，也可以是相对URL。
事实上，img 元素并不会将图像本身插入到网页中，而是创建一个外部图像的占位符。因此，当URL属性指定的图像不存在时，页面上只会显示图像的占位符，而无法显示图像。事实上，img元素并不将图像本身插入网页，而是为外部图像创建一个占位符。因此，当URL属性指定的图像不存在时，只能在页面上显示图像的占位符，而不能显示图像。
对于用户来说，这种方法并不是特别友好，他们无法正确理解这个图像的真实含义。因此，您可以通过alt属性向图像添加描述性文本。当图片无法正常显示时，浏览器会显示这段文字。比如:
这样，当图像缺失时，将在显示图像的地方显示alt属性定义的备选文本“歪脖子网”，用户可以了解图像的功能。此外，屏幕阅读器可以大声朗读这些文本，以帮助视力障碍的访问者理解图像的内容。
默认情况下，图像会自动按原始尺寸显示。也可以通过 img 元素的 width 和 height 属性，来分别指定图像的宽度和高度，属性的值为数字，默认单位为像素。如：默认情况下，图像会自动以其原始大小显示。您还可以通过img元素的width和height属性来指定图像的宽度和高度。属性值是数字，默认单位是像素。比如:
设置图像大小时，如果只给定了width或height属性中的一个值，另一个值将根据图像的原始大小按比例缩放。当然，为了实现内容和呈现的分离，最好是通过CSS来设置图片的显示大小。
但是要记住，无论是通过CSS还是宽度和高度属性，都只是改变了图片的显示大小，并没有改变图片的加载时间，因为无论大小如何，加载的都是同一个图片。
这就像在网页中插入图像一样简单。然而，用户只看到了一幅图像，却无法了解更多的信息。然而，网页上的大多数图像都有一定的上下文关系，如标题、背景、内容描述等。
这时，你可以使用语义图元素来包装图片、标题、背景介绍、内容描述等。定义一个图像单元。这样，用户看到的就不是单一的图片，而是图像、标题、内容介绍的无缝结合。
在figure元素中，通过 img 元素来定义图像，通过 figcaption 元素定义 figure元素的标题。如：在图元素中，图像由img元素定义，图元素的标题由figcaption元素定义。比如:
《蒙娜丽莎》是文艺复兴时期画家芬奇画的丽莎·乔康多的肖像...
蒙娜丽莎的微笑
上述代码的运行效果如图248所示:
图248图元素
当然，并非所有图片都要用 figure元素来包裹，如果纯粹只是为了呈现的图像，就没必要使用figure进行组合，因为img 元素本身也是有语义的。当然，并不是所有的图片都需要用figure元素包裹。如果纯粹是为了呈现的图像，就没必要用figure来组合，因为img元素本身也是语义的。
