网页图片技术：前端引入图片的多种方式及其优缺点

前端开发者在建站时需要做出的决定之一就是如何引入图片。它可以是一个标签，或者通过CSS背景属性，或者可以使用SVG。选择正确的一个很重要，对性能和可访问性有很大影响。在本文中，我们将了解引入图像的各种方法，以及每种方法的优缺点，以及何时以及为何使用它们。HTMLimg元素在最简单的情况下，img元素必须包含src属性：在页面加载时设置宽度和高度属性，它们会在页面图像加载时引起一些布局变化。为了避免这种情况，我们可以为它设置width和height属性：但它有效。我们用一个图例来阐明这个概念：我们看到右边的图片虽然没有被加载，但还是保留了空间？那是因为设置了宽度和高度。通过CSS隐藏图片可以使用CSS隐藏图片。但是，它仍会加载到页面中。所以这样做的时候要小心。如果应该隐藏图像，则可能是出于装饰目的。img{display:none;}同样，上面的代码不会阻止浏览器加载图像，即使它在视觉上是隐藏的。原因是它被认为是一个替换元素，所以我们无法控制它加载的内容。Accessibility通过将alt属性设置为有意义的描述来发布AccessibleHTML图像，这对屏幕阅读器用户非常有帮助。但是，如果不需要alt描述，请不要删除它，如果这样做，图像src将被读出，这对可访问性非常不利。不仅如此，如果图像由于某种原因没有加载，并且它有一个清晰的alt，它将显示为后备。也通过图例来演示。假设我们有以下图像：当src无效，图片没有加载。第一个没有alt属性，而第二个有一个空的alt属性，它们在视觉上看起来是这样的：没有alt的图像仍然保留其空间，这令人困惑并且不利于访问。另一个带有空alt的图像会折叠成一个小点，因为它有边框。但是当alt属性有值时，它看起来像这样：这不是一个很好的反馈吗？此外，当图像源失败时，您可以向它们添加伪元素。响应式图像的美妙之处在于它们可以缩放为具有特定视口尺寸的照片的多个版本。我们有两种不同的方法来生成一组响应式图片：1.srcset属性这个很简单。对我来说，srcset可以根据屏幕宽度显示多种图像尺寸，这不是一个完美的解决方案。它让浏览器选择合适的图像，而我们对此无能为力。2.图片标签的另一种选择是使用元素。我更喜欢这种方式，因为它更容易预测。示例源代码：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100调整图像大小对于，我们还可以使用一组好的特征object-fit和object-position。它们可以控制大小和位置，就像CSS背景图像一样。object-fit值有：fill、contain、cover、none、scale-down。例如：img{object-fit:cover;object-position:50%50%;}CSS背景图像当使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素。一般来说，背景图像的主要用途应该是装饰目的。CSS背景图片的使用方法首先我们需要一个元素//htmlSomecontent