HTML图像标签在网页上显示图像。 它是一个包含图像源和其他属性的自关闭标记（意味着它的结构方式，因此您不必添加单独的关闭标记）。

下面是一个图像html标签的例子:

现在，让我们来看看图像的HTML标签（也称为标签）的细节。

如何使用HTML图像标签

您可以插入在您想要显示图像的任何地方标记HTML代码。 就像产品页面上的英雄部分一样。

它总是包括两个必需的属性:

• src公司:指示所显示图像的路径
• 阿尔特:表示替代(alt)文本如果图像无法加载，并且对于使用屏幕阅读器或其他文本到语音工具的个人，将显示该图像

图像不是直接嵌入到页面中，而是从标记中的源路径加载。

图像可以从任何地方获取—即在同一服务器上（称为相对路径）或不同服务器上（称为绝对路径）。

您还可以将image标签嵌套在其他容器标签中-即具有开始和结束标签的HTML标签。

下面是一个嵌套在锚标记链接到另一个网站:

它创建一个可点击的图像链接。

HTML图像属性的类型

HTML图像属性用于指定有关图像的信息。 您可以使用它们来控制图像的显示、加载等方式。

让我们逐一看看这些属性中的每一个。

Src属性

这是最重要的属性。 它指定图像的路径。

浏览器无法找到并显示没有其源路径的图像。

源可以是绝对URL也可以是相对URL。

Alt属性

此属性用于包含图像的替代文本-图像的基于文本的解释。

当图像加载失败或找不到时，浏览器会显示此文本。 像当用户有一个缓慢的互联网连接。

在网页上看起来像这样:

它还使视障读者和那些喜欢听内容而不是阅读内容的人可以访问图像。 因为屏幕阅读器和其他文本转语音工具使用alt文本来描述图像。

从SEO的角度来看，这也是一个重要的属性。

为啥?

因为alt文本可以帮助像Google这样的搜索引擎更好地理解您的内容，从而导致更高的排名。 它特别有利于帮助您的图像显示在图像结果中。 特别是如果你包括相关的关键字。

标题属性

此属性用于设置图像的标题。 以提供关于图像的附加上下文。

Title属性显示为工具提示-当您将鼠标光标悬停在图像上时，该元素会显示有关图像的信息。

这就是工具提示的样子:

Longdesc属性

此属性用于链接到具有图像详细描述的网页。 这对于不能用alt文本完全解释的复杂图像很有帮助。

它可以是另一个网页的地址或同一页面中的元素。

但它很少使用。 因为大多数浏览器不支持它。

Crossorigin属性

从另一个域加载图像时使用crossorigin属性。

它告诉浏览器做一个叫做跨源资源共享（CORS）请求的东西。 CORS安全机制使web服务器能够控制其他域是否可以访问其资源。 并保护敏感信息不被未经授权的请求访问。

Crossorigin属性可以具有以下值:

• 匿名:发送没有凭据的请求。 它与空的crossorigin属性相同。 这种类型的请求用于访问公开可用的资源。
• 使用-凭证:发送带有身份验证凭据的请求-例如，cookie，证书等。 这种类型的请求用于访问私有资源。

Ismap属性

Ismap属性表示存储在服务器上的图像地图（具有可点击区域的图像）。 它仅用于可点击的图像（即,标签内的标签）。

这是一个布尔属性-意味着它在存在时是"真"，而在不存在时是"假"。 它不包含任何值。

例如:

当用户单击图像时，单击的位置也会随请求一起发送。 它在URL的末尾添加光标坐标。

在上面的示例中，单击(x=33,y=45)坐标处的图像将打开以下URL:

服务器上的程序或脚本处理请求并执行特定操作。 或将用户带到特定页面。

这年头很少用。 因为它对具有屏幕阅读器的用户没有帮助。 而使用JS/CSS则提供了更有效的功能，而不依赖于服务器进行处理。

Usemap属性

Usemap属性表示具有可点击区域的图像（称为图像映射）。

每个区域链接到一个特定的地址-即网页或资源。

有关这些区域和地址的位置的信息存储在

因此，usemap属性创建在浏览器中处理的图像映射（称为客户端图像映射。)

下面是一个使用usemap属性的示例:




Usemap标记不能用于可点击的图像。

加载属性

这指定了浏览器应该如何加载图像。

这取决于属性包含哪些值:

• 渴望:图像立即加载（这是默认值）
• 懒惰:直到需要图像时才加载图像（即，当用户到达页面的该部分时）

图像延迟加载可以提高加载时间。 它可以提高在谷歌的页面性能得分PageSpeed洞察-衡量桌面和移动设备页面性能的工具。

页面速度是一个确认的谷歌排名因素。 因此，使用延迟加载图像可以是一个很好的做法，以改善您的网站的搜索引擎优化。

Referrerpolicy属性

这定义了与图像请求一起发送的引用信息。

什么是推荐人？

推荐人是发送请求的页面。 意思是要嵌入图像的页面。

此属性可以包含以下任何值:

• 无推荐人:没有推荐人信息与请求一起发送
• 无推荐人-降级时:从HTTPS到HTTP的请求不会发送引用信息
• 同源:完整的URL与同源请求一起发送。 对于跨来源请求，不会发送推荐人信息。
• 产地来源:发送源（方案、主机和端口）
• 严格来源:源（方案、主机和端口）通过HTTPS发送到HTTPS，并通过HTTP发送到任何源请求。 没有引用者信息通过HTTPS发送到HTTP请求。
• 起源-当-交叉起源:源（方案、主机和路径）与跨源请求一起发送。 完整的URL（包括路径）与同源请求一起发送。
• strict-origin-当-cross-产地来源:它与"origin-when-cross-origin"相同，但不会将引用者信息与HTTPS发送到HTTP请求。 这是默认值。
• 不安全-url:发送路径、路径和查询字符串。 （不建议共享推荐人的完整信息是不安全的。)

Srcset属性

此属性用于显示响应式图像。

它包含多个大小的同一图像的链接。 每个图像的大小由宽度或密度指定。

这有助于浏览器根据屏幕大小和分辨率从集合中选择最合适的图像。

Sizes属性

此属性与srcset属性一起使用。

它告诉浏览器在不同条件下使用哪个图像大小。

样式属性

此属性用于将内联样式应用于图像标记。 并将复盖应用于图像的任何其他全局样式。

Style属性可以控制图像标签的外观。 它可以包含图像边框、阴影和对齐等元素。

高度属性

此属性用于以像素为单位指定图像的高度。 如下图所示。

不指定高度将以原始高度加载图像。 它现在可能适用于您的页面布局。

宽度属性

此属性用于以像素为单位指定图像的宽度。

没有宽度属性的图像将以其原始宽度出现。

小费:建议您同时定义图像的高度和宽度。 以防止在图像加载后更改布局。

不再推荐使用的HTML属性

HTML5中替换了一些旧的HTML图像属性。

浏览器可能支持这些属性以实现兼容性，但不建议使用它们。 它们被弃用（意味着不推荐）。

以下是已弃用的属性列表:

• 对齐;对齐
• 边境
• h空间
• 龙德斯克
• 姓名
• v空间

支持HTML图像标签的浏览器

的HTML标签是一个被广泛接受的元素.

所有流行的互联网浏览器都支持它，包括:

• 铬合金
• 野生动物园
• 边缘
• 火狐浏览器
• 歌剧

大多数移动浏览器也支持image标签。

支持在图像标签中使用的图像格式

以下是铬合金，边缘，火狐浏览器，野生动物园和歌剧支持的流行图像格式列表:

• .[医]apng
• .bmp
• .gif
• .jpeg格式
• .jpg
• .巴布亚新几内亚
• .webp的
• .svg技术

确保可访问性的最佳实践

图像使网页在视觉上吸引读者。

但不是每个人都能很好地或根本看到它们。 因此，让视障人士能够接触到它们也很重要。

请记住，屏幕阅读器使用图像的替代文本来描述它们。 这意味着为所有非装饰性图像编写描述性alt文本是一个很好的做法。

但这些是什么？

非装饰性图像是页面主要内容的一部分。 并包含您需要了解页面的信息。

另一方面，装饰图像元素不包含任何信息。 它们在视觉上增强了网页。 因此，将这些元素的替代文本保持为空白（alt=""），以便屏幕阅读器可以跳过它们。

这是描述性alt文本的一个很好的例子："毛茸茸的白猫坐在墙前"比"猫的形象"更好。”

因为前文内容比较翔实。 它为使用屏幕阅读器的人提供有关图像的上下文。

以下是一些使图像更易于访问的最佳实践:

• 使用上下文和描述性alt文本
• 不要像下面那样为装饰图像添加替代文本

• 对于可点击的图像，请在图像的替代文本中描述目标链接
• 避免在图像中嵌入页面上其他任何地方都不会出现的重要文本。 如果图像包含文本，请尝试在替代文本中描述它。
• 用与页面其余内容相同的语言编写替代文本

如果替代文本留空，某些屏幕阅读器可能默认为图像的文件名。 因此，使用描述性文件名也很重要。

例如，文件名"furry-cat.巴布亚新几内亚"优于"图像-202405。巴布亚新几内亚。”

Google有时也会使用文件名来理解图像。 这意味着上下文图像文件名也可以有利于图像SEO.

HTML图像标签示例

现在，让我们来看看HTML中使用image标签的一些具体示例:

具有特定尺寸的图像

您可以使用高度和宽度属性来指定图像的尺寸。

下面是一个150x150像素的图像示例:

具有内联样式的图像

您可以使用style元素将内联样式应用于图像。

以下是使用内联样式向图像添加黑色边框的示例:

动画图像

该HTML中的标签可以显示Gif等动画图像。

例如，下面的标签显示一个GIF:

图像作为按钮

要使用图像作为按钮，请嵌套标签内标签。

像这样:

延迟加载图像

您可以通过将图像的加载属性设置为"懒惰"来为图像启用延迟加载。”

例如:

确保您的图像标签和属性符合代码要求

HTML图像标签允许您嵌入图像,使您的网页看起来丰富视觉. 图像属性可以提供更好、更易于访问的用户体验。 并提高你在搜索引擎中的排名。

但你需要确保它们被正确使用。

无效的HTML标签和属性可能会导致技术问题。 它们会对用户体验产生负面影响并降低您的搜索引擎排名。 因此，您应该定期审核您的网站以跟踪此类问题。

您可以使用以下方法检查这些类型的问题现场审核

打开该工具并按照我们的配置说明进行操作。 然后，点击"开始现场审核.”

点击"问题"tab。 然后，在搜索栏中输入"图像"以查找缺少alt属性等问题。

你可以找到你的网站的其他技术问题。 最紧迫的被称为"错误。”

您还可以通过单击齿轮图标并向下滚动到"站点审核设置"来设置站点审核计划。”

立即免费试用网站审核。