在 HTML 中，图像通常使用 <img> 标签插入到网页中。<img> 标签是一个自闭合标签，用于在网页上显示图像。它不需要关闭标签，因为其功能仅限于展示图像。

1. 基本的 <img> 标签语法

<img src="image.jpg" alt="描述文本">

• src 属性：指定图像的路径（可以是本地文件路径或 URL 地址）。
• alt 属性：为图像提供替代文本描述。它用于当图像无法加载时显示，也有助于搜索引擎优化（SEO）和无障碍访问（例如屏幕阅读器用户）。

2. 常见的属性

1. src 属性

src 属性定义了图像的来源。它可以指向本地路径或网络 URL。

• 本地路径：

  <img src="images/photo.jpg" alt="A photo of a cat">

• 网络 URL：

  <img src="https://www.example.com/images/photo.jpg" alt="A photo from the internet">

2. alt 属性

alt 属性提供了一个图像的替代文本，供用户无法看到图像时显示，或者屏幕阅读器等辅助技术使用。

<img src="logo.png" alt="Company Logo">

3. width 和 height 属性

width 和 height 属性用来指定图像的显示尺寸，单位可以是像素（px）或百分比。

<img src="image.jpg" alt="Sample Image" width="300" height="200">

4. title 属性

title 属性为图像提供了一个额外的提示，当用户将鼠标悬停在图像上时显示这个文本。

<img src="image.jpg" alt="Sample Image" title="Click to view larger image">

5. loading 属性

loading 属性指定图像的加载方式，常用的值是 lazy，表示延迟加载图像，只有当图像进入视口时才加载，能提高页面的加载性能。

<img src="image.jpg" alt="Lazy loaded image" loading="lazy">

3. 图像格式

常见的图像格式包括：

• JPEG（.jpg, .jpeg）：适用于大多数照片和复杂图像，支持高压缩率。
• PNG（.png）：支持透明背景，适用于图标和图形。
• GIF（.gif）：适用于动画图像，支持透明和多帧动画。
• SVG（.svg）：可伸缩矢量图形，适用于高质量的图形，图像可以任意缩放而不失真。
• WebP：一种现代图像格式，提供更好的压缩率和质量，适用于网页使用。

4. 图像的响应式设计

为了使图像在不同的屏幕尺寸上显示良好，可以使用 CSS 来控制图像的大小。常见的做法是使用 max-width: 100%，确保图像不会超出其容器的宽度。

示例：

img {
    max-width: 100%;
    height: auto;
}

这样设置后，图像会根据容器的宽度自动调整大小，而不会变形。

5. 背景图像

除了使用 <img> 标签插入图像外，还可以使用 CSS 的 background-image 属性为元素设置背景图像。

示例：

div {
    background-image: url('background.jpg');
    background-size: cover;  /* 确保图像覆盖整个元素 */
    background-position: center;  /* 图像居中 */
}

6. 图像的可访问性

图像的可访问性非常重要，尤其是在为视觉障碍用户提供良好体验时。以下是一些增加图像可访问性的技巧：

• 使用 alt 属性：每个图像都应该有清晰的替代文本描述。
• 避免使用图像作为纯文本：如果图像只是为了显示文本（如标语），使用文本而不是图像。
• 提供合适的颜色对比度：确保图像上的文字与背景有足够的对比度，便于视力较差的用户阅读。

7. 图像作为链接

可以将 <img> 标签嵌入到 <a> 标签中，使图像变成一个可点击的链接。

示例：

<a href="https://www.example.com">
    <img src="logo.jpg" alt="Go to example website">
</a>

这样，点击图像就会跳转到指定的链接。

8. 图像的裁剪和裁切

你可以使用 CSS 来裁剪图像的部分内容，通常通过设置 object-fit 和 object-position 来控制图像的显示效果。

示例：

img {
    width: 300px;
    height: 200px;
    object-fit: cover;  /* 裁剪并保持图像比例 */
    object-position: center;  /* 图像居中 */
}

总结

• <img> 标签用于在网页中嵌入图像，必须有 src 和 alt 属性。
• 图像格式包括 JPEG, PNG, GIF, SVG, 和 WebP。
• 使用 CSS 可以设置图像的大小、响应式设计、背景图像等。
• 通过 loading="lazy" 可以延迟图像加载，提升页面性能。
• 图像的可访问性非常重要，确保为每个图像提供合适的 alt 属性，并考虑其他无障碍访问设计。

图像在网页中的作用非常重要，它能增加页面的吸引力和用户体验。掌握如何高效使用图像是网页设计的关键。