HTML 图片

图片对于提升网站的吸引力和互动性至关重要。在 HTML 中，使用 <img> 标签在网页中插入图片。与大多数其他 HTML 元素不同，<img> 元素是一个空元素：它没有结束标签。它只有提供图像源、大小、替代文本和其他信息的属性。

<img> 标签的基本语法

其中，

src 表示图像文件的地址（URL），alt 表示替代文本，当图像加载失败时会显示该文本。

这是该标签最基本的使用方式。一个例子

当文件与 HTML 文件在同一个文件夹中时，文件名就足够了。否则，需要指定相对路径或绝对路径。

整理图片文件夹

在网站上维护文件组织的标准做法是将所有图片放入一个名为 images 的文件夹中。然后你可以这样引用它们：

如果图片保存在另一个磁盘或目录中，请输入完整路径

注意：如果 src URL 拼写错误或不正确，将显示一个损坏的图像图标，并显示 alt 文本。

<img> 标签的重要属性

1. src (源)

此必需属性标识图像的位置。它可以是

相对路径：“images/photo.jpg”

绝对路径：“https://example.com/images/photo.jpg”

2. alt (替代文本)

当图像无法加载时显示文本，并且对于可访问性（例如屏幕阅读器）至关重要。它也有利于 SEO。

设置图像尺寸

3. width 和 height

这些属性以像素为单位确定图像的显示尺寸。或者，您也可以使用 CSS 进行更自由的样式设置。

或使用 CSS

注意：为了避免页面加载时闪烁，请始终使用 width 和 height。

样式化图像

4. title

鼠标悬停在图片上时显示工具提示。

5. border

在图片上绘制边缘。在 HTML 中已弃用，但仍可用

然而，使用 CSS 是更标准的方法

对齐图像

6. align

用于相对于文本对齐图像。虽然现在已弃用，但仍可在旧代码中找到。

使用 CSS 的现代替代方法

控制图像间距

7. hspace 和 vspace

分别在图像周围添加水平和垂直空间。它们已过时，应被 CSS 的 margin 属性替换。

现代替代方法

图像作为链接

图像可以用作超链接，这可以通过将图像嵌套在 <a> 标签内来完成

这在画廊或预览放大图片时非常有用。

动画图像 (GIF)

<img> 标签同样可以用来嵌入动画图像

使用 srcset 和 sizes 的响应式图片

根据屏幕尺寸或分辨率提供不同的图像

这有助于通过在需要时加载小图像来提高移动设备的性能。

图像加载控制

8. loading

该属性指定 浏览器 加载图像的方式。加载控制有两种类型：

• lazy：仅当图像进入视口时加载。
• eager：立即加载图像。

文本旁边浮动的图像

您也可以使用 float 属性使文本环绕图像

常见图像文件格式

注意：照片使用 JPEG，Logo 或其他透明图形使用 PNG，矢量图形使用 SVG，简单动画使用 GIF 或 APNG。

法律和性能考量

作为使用图片的最佳实践，您应该使用图片来使您的网站在性能和可访问性方面尽可能优化。首先，优化您将要使用的图片的尺寸，然后上传它们，这样就不会因为大图片而延迟页面加载速度。它必须始终具有描述性的 alt 文本，这有助于屏幕阅读器，并为 SEO 做出贡献，因为它传达了图像内容的有意义的上下文。

另外，请注意使用图片的权利；始终建议使用您自己创建、购买或有权使用的图片，以避免版权问题。在可行的情况下，在本地或使用您信任的 CDN 提供商托管您的图片，以减少外部链接错误的风险并保持图片的正确传递。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<img>	是的	是的	是的	是的	是的

结论

<img> 标签是 HTML 中的一个基本组件，它使用户能够轻松地将图像放置在网页上。要创建视觉上吸引人且用户友好的网站，掌握图片的处理至关重要，例如设置它们的路径和尺寸，以及提高性能和响应能力。

无论您是展示静态视觉效果还是动画 GIF，HTML 都通过属性和 CSS 提供了极大的灵活性。目标始终应该是干净的代码和包容的体验。