一、基本概念
HTML（Hyper Text Markup Language）是一种用于创建网页的标准标记语言，它允许我们将不同类型的内容如文本、图像、视频等组合在一起，创建出丰富多彩的网页。
在HTML中，标签可用于显示图片。它是一个自闭合标签，即不需要结束标签，通常包含以下属性：
<img src="image.jpg" alt="图片描述" title="鼠标悬停提示" width="500" height="300">
其中，src属性指定图片的路径；alt属性用于为图片添加描述信息，增强可访问性；title属性用于在鼠标悬停时显示提示信息；width和height属性可用于指定图片的尺寸大小。
二、图片格式
在HTML中，我们可以使用多种格式的图片，包括JPEG、PNG、GIF等。
JPEG：全称为Joint Photographic Experts Group，是一种常用的有损压缩格式，适合用于保存照片等图像。
<img src="image.jpg">
PNG：全称为Portable Network Graphics，是一种无损压缩格式，适合用于保存图标、透明图片等。
<img src="image.png">
GIF：全称为Graphics Interchange Format，是一种支持动画的格式，适合用于保存简单的动画图像。
<img src="image.gif">
三、图片路径
在HTML中，图片路径的指定方式分为两种：
相对路径：相对于当前HTML文档所在的位置，可以使用以下方式指定：
<img src="images/image.jpg">
绝对路径：以网站根目录为起点的完整路径，可以使用以下方式指定：
<img src="http://www.example.com/images/image.jpg">
四、图片大小
在HTML中，图片大小的指定分为两种方式：使用CSS样式表或直接使用img标签的width和height属性。
CSS样式表：
<img class="pic" src="image.jpg">
<style>
.pic {
width: 500px;
height: 300px;
}
</style>
width和height属性：
<img src="image.jpg" width="500" height="300">
五、图片响应式设计
响应式设计是指网站可以根据访问者的设备大小和屏幕尺寸，自动调整布局和内容以保持最佳的可视性。在HTML中，一种常用的实现方式是使用Bootstrap框架提供的响应式图片类。
<img class="img-responsive" src="image.jpg">
六、图片优化
为了保证网站加载速度，通常需要对图片进行压缩和优化。以下是几种常用的优化方式：
图片压缩：使用在线图片压缩工具或图像编辑软件对图片进行压缩处理。
通过CSS预加载：在CSS中定义图片并使用background-image属性，以便在页面加载时预加载图片资源，提高图片载入速度。
.preload {
background-image: url('image.jpg');
}
使用适当的图片格式：例如，对于颜色较少的图像，使用PNG格式；对于较大的照片等图像使用JPEG格式。
七、图片辅助功能
为了帮助视觉障碍人士使用网站，我们可以为图片添加辅助功能，包括alt文本和长描述。
alt文本：在img标签中使用alt属性添加图片的文字描述信息，当图片无法正常显示时，可帮助用户理解图片内容。
<img src="image.jpg" alt="猫咪摆姿势">
长描述：对于较为复杂的图片，可以使用longdesc属性添加长描述。当用户点击图片时，会跳转到该描述的URL地址。
<img src="image.jpg" alt="猫咪摆姿势" longdesc="description.html">
八、总结
HTML提供了丰富的图片显示功能，我们可以根据需要选择合适的图片格式和大小，并通过优化技术提高网站的性能和用户体验。同时，为了提高可访问性，我们还需要为图片添加辅助功能。
