前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是标签，或者是通过CSSbackground属性，还可以使用SVG
在本文中，我们会学习引入图像的各种方式，以及每种方式的优点和缺点，以及何时使用和为什么使用它们。
最简单的情况下，img元素必须包含src属性:
我们看到到右侧图片即使尚未加载仍保留了空间？那是因为设置了宽度和高度。
图像可以用CSS隐藏。但是，它仍将加载在页面中。因此，在执行此操作时请小心。如果一个图像应该被隐藏，那么它可能是出于装饰的目的。
img{display:none;}复制代码同样，上面的方法也不能阻止浏览器加载图像，即使它在视觉上是隐藏的。原因是被认为是一个被替换的元素，所以我们无法控制它所加载的内容。
通过将alt属性设置为有意义的描述，用来访问HTML图像，这对于屏幕阅读器用户非常有帮助。
然而，如果一个alt描述是不需要的，请不要删除它，如果你这样做，图像src将被读出,这对可访问性非常不利。
不仅如此，如果图像因为某种原因没有加载，并且它有一个清晰的alt，它将作为一个回退显示。同样通过图例来演示一下。
假设我们有以下图片：
没有alt的图片仍然保留了它的空间，这很混乱，而且不利于访问。而另一个alt为空的图片，会折叠起来看起来像一个小点，这里因为它有边框。
但是，当alt属性有值，它看起来是这样的：
这不是一个很好的反馈吗此外，当图像源失败时，可以向它们添加伪元素。
的优点在于可以针对特定视口大小将其扩展为具有多个版本的照片。我们有两种不同的方式来生成一组响应式图像：
1.srcset属性
2.picture标签
对于，我们还可以使用的一组很好的特性object-fit和object-position。它们可以控制
的大小和定位，就像CSS背景图像。
object-fit值有：fill,contain,cover,none,scale-down。例如：
img{object-fit:cover;object-position:50%50%;}复制代码CSS背景图片使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素。通常，背景图像的主要用途应该是用于装饰目的。
首先，我们需要一个元素
//html
.element{background:url('cool-1.jpg'),url('cool-2.jpg');}复制代码隐藏图像我们可以在特定视口中隐藏和显示图像，如果未使用CSS设置图片，则不会下载该图片。与使用相比，这是一个额外的好处。
在上面的示例中，我们有一个背景图像，仅在视口宽度大于700px时显示。
####非开发人员无法下载
普通人知道，如果要保存图像，只需单击鼠标左键，然后选择保存即可。CSS背景图片并非如此，我们必须先检查元素，然后在DevTools中的url中打开链接，然后才能下载随CSS添加的图像。
可以将伪元素与CSS背景图像一起使用，例如在图像顶部显示覆盖图。对于这是不可能的，直到我们为叠加层添加单独的元素。
SVG被认为是一种图像，它最大的功能是在不影响质量的情况下进行缩放。此外，使用SVG，我们可以嵌入JPG、PNG或SVG图像。参见下面的HTML:
当
这非常类似于CSS中的object-fit:cover或background-size:cover。
关于SVG的可访问性，这使我想起了