HTML 图像的高阶写法

在 HTML 中，图像的写法可以通过使用一些属性和技术来增强图像的功能、可访问性和性能。以下是一些常见写法：

1. 使用 alt 属性：

   • 提供图像的替代文本，增强可访问性，帮助屏幕阅读器用户理解图像内容。

2. 使用 title 属性：

   • 提供额外的信息，当用户悬停在图像上时显示。

3. 使用 loading 属性：

   • loading="lazy"：延迟加载图像，提升页面性能。

4. 使用 srcset 和 sizes 属性：

   • 提供不同分辨率的图像，以适应不同设备的屏幕大小和分辨率。

5. 使用 picture 元素：

   • 允许根据不同条件（如视口大小）选择不同的图像格式或分辨率。

6. 使用 CSS 进行样式化：

   • 使用 CSS 控制图像的大小、边框、阴影等样式。

以下是一个示例代码，展示了这些高阶写法的结合：

<picture>
    <source srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 2000w" sizes="(max-width: 600px) 100vw, (min-width: 601px) 50vw" type="image/jpeg">
    <img src="image-default.jpg" 
         alt="描述图像内容的替代文本" 
         title="这是一个示例图像" 
         loading="lazy" 
         class="rounded shadow-lg">
</picture>

在这个示例中：

• 使用了 <picture> 元素来提供不同的图像源。
• alt 属性增强了可访问性。
• loading 属性提升了页面性能。
• CSS 类用于样式化图像。