HTML图像标签在网页上显示图像。它是一个包含图像源和其他属性的自关闭标记（意味着它的结构方式使您不必添加单独的关闭标记）。
下面是一个图像html标签的例子：
现在，让我们详细讨论一下图像的HTML标记（也称为标记）。
如何使用HTML图像标签
可以在HTML代码中想要显示图像的任何地方插入标记。就像在产品页面的英雄部分一样。
它总是包含两个必需的属性：
src：指示所显示的图像的路径
alt：表示在图像加载失败时显示的替代（alt）文本，适用于使用屏幕阅读器或其他文本转语音工具的个人
图像不是直接嵌入到页面中，而是从标记中的源路径加载的。
而且图像可以从任何地方获取。在同一服务器上（称为相对路径）或在不同的服务器上（称为绝对路径）。
您还可以将图像标签嵌套到其他容器标签中。，带有开始和结束标记的HTML标记。
下面是一个图片标签嵌套在链接到另一个网站的锚标签中的例子：
它创建了一个可点击的图像链接。
HTML图像属性的类型
HTML图像属性用于指定有关图像的信息。您可以使用它们来控制如何显示、加载图像等。
让我们逐一查看这些属性。
Src属性
这是最重要的属性。它指定图像的路径。
如果没有源路径，浏览器将无法找到并显示图像。
源可以是绝对URL，也可以是相对URL。
Alt属性
该属性用于包含图像的替代文本——基于文本的图像解释。
浏览器在加载图像失败或找不到图像时显示此文本。比如当用户网速很慢的时候。
在网页上是这样的：
它还使视障读者和那些更喜欢听内容而不是阅读内容的人能够访问图像。因为屏幕阅读器和其他文本转语音工具使用所有文本来描述图像。
从SEO的角度来看，这也是一个重要的属性。
为什么?
因为所有文本可以帮助搜索引擎，如谷歌更好地理解你的内容，这可以带来更高的排名。这对于帮助您的图像出现在图像结果中尤其有益。特别是如果你包含了相关的关键字。
Title属性
此属性用于设置图像的标题。提供关于图像的附加上下文。
title属性显示为工具提示—当您将鼠标光标悬停在图像上时，该元素将显示有关图像的信息。
工具提示看起来是这样的：
Longdesc属性
此属性用于链接到带有图像详细描述的网页。这对于无法用所有文本完整解释的复杂图像很有帮助。
它可以是另一个网页的地址，也可以是同一页面中的一个元素。
但很少使用。因为大多数浏览器不支持它。
交叉源属性
当从另一个域加载图像时，使用crosorigin属性。
它告诉浏览器发出跨域资源共享（CORS）请求。CORS安全机制使web服务器能够控制其他域是否可以访问其资源。并保护敏感信息不被未经授权的请求访问。
crosorigin属性可以有以下值：
anonymous：发送没有凭据的请求。它与空的交叉源属性相同。这种类型的请求用于访问公共可用资源。
use-credentials：发送带有身份验证凭证的请求。、cookies、证书等。这种类型的请求用于访问私有资源。
Ismap属性
ismap属性表示存储在服务器上的图像映射（带有可单击区域的图像）。它只用于可点击的图像（即，标签在标签）。
它是一个布尔属性，意思是当它存在时为“真”，不存在时为“假”。它不包含任何值。
当用户单击图像时，也会随请求一起发送单击的位置。它将光标坐标添加到URL的末尾。
在上面的例子中，点击坐标为（x=33, y=45）的图像将打开以下URL：
https://example.com/?33,45
服务器上的程序或脚本处理请求并执行特定的操作。或者将用户带到特定的页面。
现在很少用了。因为它对屏幕阅读器的用户没有帮助。使用JS/CSS提供了更高效的功能，而不依赖于服务器的处理。
Usemap属性
usemap属性表示带有可点击区域的图像（称为图像映射）。
每个区域都链接到一个特定的地址。，网页或资源。
关于这些区域和地址的位置信息存储在
因此，usemap属性创建在浏览器内处理的图像映射（称为客户端图像映射）。
下面是一个使用usemap属性的例子：
<地图名称=>
< / >地图
usemap标签不能用于可点击的图像。
Loading属性
这指定了浏览器应该如何加载图像。
这取决于该属性包含哪些值：
eager：立即加载图像（这是默认值）
lazy：直到需要时才加载图像（即，当用户到达页面的那一部分时）
图像延迟加载可以提高加载时间。它可以提高b谷歌的PageSpeed insights中的页面性能分数，PageSpeed insights是一种跨桌面和移动设备测量页面性能的工具。
页面速度是一个确定的谷歌排名因素。因此，对图片使用延迟加载是一个很好的做法，可以提高网站的SEO。
refererpolicy属性
这定义了与图像请求一起发送的引用信息。
什么是推荐人？
引用者是发送请求的页面。意思是要嵌入图像的页面。
该属性可以包含以下任意值：
No -referrer：请求中不发送推荐人信息
No -referrer-when-降级：从HTTPS到HTTP的请求中不发送referrer信息
same-origin：完整的URL与同源请求一起发送。对于跨域请求，不发送referer信息。
origin：发送源（方案、主机和端口）
strict-origin：将源（方案、主机和端口）以HTTPS方式发送到HTTPS，以HTTP方式发送到任何源请求。没有引用信息通过HTTPS发送到HTTP请求。
origin-when-cross-origin：源（方案、主机和路径）与跨源请求一起发送。完整的URL（包括路径）与同源请求一起发送。
strict-origin-when-cross-origin：它与“origin-when-cross-origin”相同，但是不使用HTTPS向HTTP请求发送引用信息。这是默认值。
unsafe-url：发送源、路径和查询字符串。（不建议这样做，因为分享推荐人的完整信息是不安全的。）
Srcset属性
此属性用于显示响应式图像。
它包含多种尺寸的相同图像的链接。每个图像的大小由宽度或密度指定。
这有助于浏览器根据屏幕大小和分辨率从集合中选择最合适的图像。
size属性
此属性与srcset属性一起使用。
它告诉浏览器在不同条件下使用哪个图像大小。
Style属性
此属性用于将内联样式应用于图像标记。并将覆盖应用于图像的任何其他全局样式。
style属性可以控制图像标签的外观。它可以包含图像边框、阴影和对齐等元素。
Height属性
此属性用于指定图像的高度（以像素为单位）。如下图所示。
不指定高度将以原始高度加载图像。它现在可能与您的页面布局一起工作。
宽度属性
此属性用于指定图像的宽度（以像素为单位）。
没有width属性的图像将以其原始宽度显示。
提示:建议您同时定义图像的高度和宽度。以防止在图像加载后布局发生变化。
不再推荐使用的HTML属性
一些旧的HTML图像属性在HTML5中被取代。
浏览器可能为了兼容性而支持这些属性，但不建议使用它们。它们已被弃用（即不推荐使用）。
以下是已弃用的属性列表：
对齐
边境
水平间距
longdesc
名字
vspace
支持HTML图像标签的浏览器
HTML 标记是一个被广泛接受的元素。
所有流行的互联网浏览器都支持它，包括：
铬
Safari
边缘
火狐
歌剧
大多数移动浏览器也支持图像标签。
支持在图像标签中使用的图像格式
以下是Chrome、Edge、Firefox、Safari和Opera支持的流行图像格式列表：
.apng
bmp格式
gif
jpeg
jpg
. png
.webp
.
确保可访问性的最佳实践
图片使网页在视觉上吸引读者。
但并不是每个人都能清楚地看到它们。所以，让视障人士可以使用它们也很重要。
记住，屏幕阅读器使用图像的替代文本来描述它们。这意味着为所有非装饰性图像编写描述性alt文本是一个很好的做法。
但这些是什么呢？
非装饰性图片是页面主要内容的一部分。并包含理解页面所需的信息。
另一方面，装饰性图像元素不包含任何信息。它们增强了网页的视觉效果。因此，将这些元素的替代文本保留为空白（alt= “ “），以便屏幕阅读器可以跳过它们。
这里有一个描述性文本的好例子：“毛茸茸的白猫坐在墙前”比“猫的图像”好。
因为前一种文本内容更丰富。它为使用屏幕阅读器的人提供了有关图像的上下文。
以下是一些使图像更易于访问的最佳实践：
使用上下文和描述性的alt文本
不要为像下面这样的装饰性图片添加替代文本
对于可点击的图像，在图像的替代文本中描述目标链接
避免在图片中嵌入页面其他地方没有出现的重要文字。如果图像包含文字，请尝试在替代文本中描述它。
用与页面其余内容相同的语言编写替代文本
如果替代文本留空，一些屏幕阅读器可能默认为图像的文件名。因此，使用描述性文件名也很重要。
例如，文件名“furry-cat.png”优于“image-202405.png”。
谷歌有时也使用文件名来理解图像。这意味着上下文图像文件名也可能对图像搜索引擎优化有益。
HTML图像标签示例
现在，让我们看一些在HTML中使用图像标签的具体例子：
特定尺寸图像
您可以使用高度和宽度属性来指定图像的尺寸。
下面是一张150 × 150像素的图片：
图片与内嵌样式
可以通过使用style元素对图像应用内联样式。
下面是一个使用内联样式给图片添加黑色边框的例子：
动画形象
HTML中的标签可以显示gif等动画图像。
例如，下面的标签显示一个GIF：
图像作为按钮
要使用图像作为按钮，请将标记嵌套在
延迟加载图像
您可以通过将图像的加载属性设置为“lazy”来启用图像的延迟加载。
例如:
确保您的图像标签和属性符合代码
HTML图像标记允许您嵌入图像，使您的页面在视觉上显得丰富。图像属性可以提供更好、更容易访问的用户体验。提高你在搜索引擎中的排名。
但你需要确保它们被正确使用。
无效的HTML标记和属性可能导致技术问题。它们会对用户体验产生负面影响，降低你的搜索引擎排名。因此，您应该定期审核您的站点以跟踪此类问题。
您可以使用站点审核检查这些类型的问题
打开工具并按照我们的配置说明操作。然后，单击“启动站点审计”。
点击“问题”选项卡。然后，在搜索栏中输入“images”来查找缺少alt属性之类的问题。
你还可以发现网站的其他技术问题。最紧急的被称为“错误”。
您还可以通过点击齿轮图标并向下滚动到“站点审计设置”来设置站点审计时间表。
现在免费试用站点审计。