1. HTML图像标签
HTML图像标签 <img> 用于在网页中插入图像。
在网页中显示图像是通过添加图像标签到HTML文件中实现的。图像标签是无需结束标记的自关闭标签。
下面是一个基本的元素的例子：
<img src="image.jpg" alt="图片">1.1 src属性
源属性 src 指定了要显示的图像的URL。URL是指包含图像的文件的地址。URL可以是相对路径，也可以是绝对路径。如果使用相对路径，它将相对于当前HTML文件的位置进行解释。
以下是使用相对路径的示例:
<img src="images/image.jpg" alt="图片">在这个例子中，“images/image.jpg”是图像的位置。因此，图像需要与HTML文件位于同一个文件夹下的一个名为“images”的文件夹中。
以下是使用绝对路径的示例:
<img src="http://www.example.com/images/image.jpg" alt="图片">在这个例子中，“http://www.example.com/images/image.jpg”是图像的位置。这个URL是绝对的，它表示图像在网络上的地址，可以在任何地方访问。
1.2 alt属性
alt属性 alt 可选，它用于提供一段文本作为图像的替代描述，当图像无法加载时，或者当访问者使用辅助技术（例如，屏幕阅读器）时，会显示这段文本。
以下是alt属性的使用方式：
<img src="image.jpg" alt="这是一张图片">在这个例子中，“这是一张图片”是提供给访问者的文本。如果图像无法加载，或者访问者正在使用辅助技术，这段文本将被显示出来。
1.3 width和height属性
width 和height 属性可以用来指定图像的大小，以像素为单位。如果只设置其中一个属性，浏览器会自动调整其余属性以保持图像比例。
以下是width和height属性的使用方式：
<img src="image.jpg" alt="这是一张图片" width="500" height="300">1.4 title属性
title 属性可选，它提供了一个对图像的附加说明。当访问者将鼠标悬停在图像上时，将显示title属性的值。
以下是title属性的使用方式：
<img src="image.jpg" alt="这是一张图片" title="这是一个标题">1.5 图像映射
对于某些较大的图像，可能需要更高级的交互形式。例如，你可能希望在图像中设置一个热区，当用户单击热区时，可以触发某些操作，例如导航到其他页面或显示详细信息。
这可以通过使用图像映射来实现。图像映射是一种与图像一起使用的特殊HTML元素，它定义了一系列与图像关联的热区。
下面是一个使用图像映射的示例：
<img src="worldmap.gif" usemap="#world" >
<map name="world">
<area shape="rect" coords="0,0,82,126" href="north.htm" alt="北海道">
<area shape="circle" coords="90,58,3" href="east.htm" alt="东京">
<area shape="poly" coords="124,58,146,122,96,94,44,123" href="west.htm" alt="京都">
</map>
在这个示例中：
img元素用于显示图像本身。
usemap属性引用了一个名为“world”的地图。该属性将图像与地图相关联。
map元素定义了名为“world”的地图。
area元素定义了三个不同的热区，每个热区都有不同的形状和坐标。
每个area元素都有一个href属性，该属性指定了当用户单击该区域时要导航到的页面的URL。此外，每个area元素都有一个alt属性，该属性提供了该区域的替代文本描述。
1.6 响应式图像
响应式图像是指可以根据屏幕尺寸和分辨率进行动态调整的图像。这意味着，在不同的设备上，可以使用不同的图像尺寸和图像分辨率。
响应式图像可以通过使用srcset和sizes属性来实现。srcset属性允许您为每个目标设备指定不同的图像，而sizes属性告诉浏览器要在何时切换到不同的图像版本。
以下是srcset和sizes属性的使用方式：
<img src="small.jpg"
srcset="small.jpg 480w,
medium.jpg 640w,
large.jpg 960w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
30vw"
alt="这是一张响应式图片">
在这个示例中，srcset属性包含三个不同大小的图像，每个图像都与目标设备的像素密度相关联（即宽度）。sizes属性指定了如何在不同的设备上进行图像调整。
2. 图像优化
虽然您可以使用HTML图像标签轻松地将图像添加到您的网页中，但是如果您不小心处理，它们可能会严重影响网站性能。
下面是几个图像优化技巧，有助于在不影响网站质量的情况下减小网站响应时间：
2.1 压缩图像
通过压缩图像，可以减小图像的文件大小，从而减少网站加载时间。较小的文件大小使得网站更易于加载，这可以提高用户的体验。
可以使用各种图像编辑软件，例如Photoshop或GIMP，来压缩图像。压缩图像时，需要注意压缩级别，以便在图像质量和文件大小之间找到平衡点。
2.2 选择正确的图像格式
不同的图像格式具有不同的优缺点。以下是常用的三种图像格式：
JPEG：适用于颜色较丰富的照片，可提供高质量压缩。
PNG：适用于使用大块单色的图像，例如图标和图形。PNG提供无损压缩。
GIF：适用于动画和图标。GIF文件相对较小，可以使用透明度。
正确选择图像格式是图像优化的一个重要方面。选择错误的格式可能会导致文件过大或图像质量较差。
2.3 裁剪图像
如果您只需要图像的一部分，可以使用图像编辑软件将其裁剪。
使用剪裁图像的优势是可以减小图像的文件大小。这对于那些只需要特定部分的图像非常有用，因为它可以帮助您减少所需的网络带宽。
2.4 选择正确的图像尺寸
根据其要在网页中显示的大小，正确选择图像尺寸也是图像优化的一个重要方面。
如果您想要一个小的图像，并且您只需要一个视觉上相似的大图像，那么不要使用大图像。
选择小的图像尺寸会减少您的页面的加载时间，因为浏览器不需要下载太多数据。
3. 总结
HTML图像标签是将图像添加到网页中的基础。通过使用适当的属性，您可以调整图像的大小，添加描述和位置信息，以及定义与图像相关联的热点区域。通过使用图像优化技巧，您可以帮助减小图像文件大小并提高网站性能。