介绍
在网页制作中，图片是很重要的一部分。添加图片一般有三种方法：使用 <img> 标签、作为背景图片使用 <style> 标签和 base64 编码。
使用 <img> 标签
使用 <img> 标签是添加图片的一种常规方式。它可以在 HTML 页面中直接引用图片，并且以各种格式呈现，包括 JPEG、PNG、GIF 等。
它有以下属性：
src：指定图片的 URL。
alt：指定当图片无法显示时显示的文本。
title：指定鼠标停留在图片上时显示的描述。
以下是一个示例：
<img src="example.jpg" alt="example image" title="this is an example">作为背景图片使用 <style> 标签
除了使用 <img> 标签，还可以使用 CSS 的背景图片属性实现添加图片。为了这样做，必须先将图像转换为 CSS 识别的一种格式，如 JPEG、PNG、GIF。
以下是一个示例：
body {
background-image: url(example.jpg);
}
以下是使用带有其他属性的示例，如背景重复和位置：
body {
background-image: url(example.jpg);
background-repeat: no-repeat;
background-position: center;
}
base64 编码图片
最后一种方式是将图像编码成为 base64 格式并在 HTML 页面中以 URL 的形式嵌入，例如：
<img src="data:image/jpg;base64,/9j/4RiDRXhp..."/>虽然它可能会增加页面的加载时间，但它消除了HTTP请求。
总结
三种方法都有各自的优缺点。使用 <img> 标签是添加图像的最简单方式，然而它需要额外的 HTTP 请求。另一方面，使用背景图像提供了更多的控制，但是它需要编写额外的 CSS 代码。最后，base64 编码似乎是一个好主意，但实际上只适用于小图像，并且使用它可能会增加页面大小，从而降低页面加载速度。