web 图像技术：前端引入图片的各种方式及其优缺点

网页图片技术：前端引入图片的各种方式及其优缺点已经收录在网站上，并且整理了更多往期好评文章，也整理了很多我的文档和教程资料.欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。前端开发人员在构建网站时需要做出的决定之一是如何引入图像。它可以是标签，或通过CSS背景属性，或SVG。选择正确的一个很重要，对性能和可访问性有很大影响。在本文中，我们将了解引入图像的各种方法，以及每种方法的优缺点，以及何时以及为何使用它们。HTML元素在最简单的情况下，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/pe...Resizingimages对于，我们还可以使用一组很好的特性object-fit和object-position。它们控制的大小和位置，就像CSS背景图像一样。object-fit值有：fill、contain、cover、none、scale-down。例如：img{object-fit:cover;物体位置：50%50%；}CSS背景图像当使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素。一般来说，背景图像的主要用途应该是装饰目的。如何使用CSS背景图片首先，我们需要一个元素//htmlSomecontent