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

时间 2020-04-25

原文原文链接

做者：ahmad shadeed
译者：前端小智来源：developerscss

点赞再看，养成习惯html

本文 GitHub github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。前端

前端开发人员在构建网站时须要作的一个决定是引入图片的方式。它能够是<img>标签，或者是经过CSS background 属性，还可使用 SVG <image>。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。git

在本文中，咱们会学习引入图像的各类方式，以及每种方式的优势和缺点，以及什么时候使用和为何使用它们。github

HTML `<img>` 元素

最简单的状况下，img元素必须包含src属性:web

<img src="cool.jpg" alt="">
复制代码

设置宽度和高度属性

在页面加载时，它们会在页面图像加载时发生一些布局变化。为了不这种状况，咱们能够为它设置width和height属性:面试

<img src="cool.jpg" width="200" height="100" alt="">
复制代码

虽然对某些人来讲，这可能看起来太过简单了，但它是有用的。咱们用图例的方式来理清这个概念：浏览器

咱们看到到右侧图片即便还没有加载仍保留了空间？那是由于设置了宽度和高度。bash

经过 CSS 隐藏图像

图像能够用 CSS 隐藏。可是，它仍将加载在页面中。所以，在执行此操做时请当心。若是一个图像应该被隐藏，那么它多是出于装饰的目的。微信

img {
    display: none;
}
复制代码

一样，上面的方法也不能阻止浏览器加载图像，即便它在视觉上是隐藏的。缘由是<img>被认为是一个被替换的元素，因此咱们没法控制它所加载的内容。

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

可访问性问题

经过将alt属性设置为有意义的描述，用来访问 HTML 图像，这对于屏幕阅读器用户很是有帮助。

然而，若是一个alt描述是不须要的，请不要删除它，若是你这样作，图像src将被读出,这对可访问性很是不利。

不只如此，若是图像由于某种缘由没有加载，而且它有一个清晰的alt，它将做为一个回退显示。一样经过图例来演示一下。

假设咱们有如下图片：

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">

<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">
复制代码

当src无效，图片没有加载时。第一个没有alt属性，而第二个是空的alt属性，下面是它们的视觉效果：

没有alt的图片仍然保留了它的空间，这很混乱，并且不利于访问。而另外一个alt为空的图片，会折叠起来看起来像一个小点，这里由于它有边框。

可是，当alt属性有值，它看起来是这样的：

这不是一个很好的反馈吗?此外，当图像源失败时，能够向它们添加伪元素。

响应式图像

<img>的优势在于能够针对特定视口大小将其扩展为具备多个版本的照片。咱们有两种不一样的方式来生成一组响应式图像：

1.srcset属性

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">
复制代码

这很简单。对我来讲，srcset能够根据屏幕宽度显示多个图像尺寸，这并非一种完美的解决方案。它让浏览器选择合适的图像，而咱们对此无能为力。

2.picture 标签

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>
复制代码

另外一种选择是使用<picture>元素。我更喜欢这种方式，由于它更容易预测。

事例源码：codepen.io/shadeed/pen…

调整图像大小

对于<img>，咱们还可使用的一组很好的特性object-fit和object-position。它们能够控制<img>的大小和定位，就像CSS背景图像。

object-fit 值有：fill, contain, cover, none, scale-down。例如：

img {
    object-fit: cover;
    object-position: 50% 50%;
}
复制代码

CSS背景图片

使用CSS背景显示图像时，它须要一个具备内容或特定宽度或高度的元素。一般，背景图像的主要用途应该是用于装饰目的。

何使用 CSS 背景图片

首先，咱们须要一个元素

// html
<div class="element">Some content</div>

// css
.element {
    background: url('cool.jpg');
}
复制代码

多个背景

使用CSS背景图片的好处是能够设置多个背景。考虑如下示例：

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}
复制代码

隐藏图像

咱们能够在特定视口中隐藏和显示图像，若是未使用CSS设置图片，则不会下载该图片。与使用<img>相比，这是一个额外的好处。

在上面的示例中，咱们有一个背景图像，仅在视口宽度大于700px时显示。

可访问性问题

若是使用不当，背景图像可能会影响可访问性。例如，将其用于文章主题，这对于文章相当重要。

#### 非开发人员没法下载

普通人知道，若是要保存图像，只需单击鼠标左键，而后选择保存便可。 CSS 背景图片并不是如此，咱们必须先检查元素，而后在DevTools中的url中打开连接，而后才能下载随CSS添加的图像。

伪元素

能够将伪元素与CSS背景图像一块儿使用，例如在图像顶部显示覆盖图。对于<img>这是不可能的，直到咱们为叠加层添加单独的元素。

SVG `<Image>`

SVG被认为是一种图像，它最大的功能是在不影响质量的状况下进行缩放。此外，使用SVG，咱们能够嵌入JPG、PNG或SVG图像。参见下面的 HTML:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
复制代码

你是否注意到了prepareAspectRatio？它的做用是可让图像占据SVG的整个宽度和高度，而不会被拉伸或压缩。

当<image>宽度较大时，它将填充其父级（SVG）宽度而不会拉伸。

这很是相似于 CSS 中的object-fit: cover或background-size: cover。

可访问性问题

关于SVG 的可访问性，这使我想起了<title>元素。例如，咱们能够像下面这样添加它：

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
复制代码

咱们还可使用<desc>元素

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
复制代码

非开发人员没法下载

必须先检查元素并复制图像的URL，而后才能下载嵌入SVG的图像。可是，若是咱们要防止用户下载特定的图像，这多是一件好事。

用例

Hero Section

在构建hero section时，有时咱们须要在标题和其余内容下方的图像。参见下图：

一些要求：

背景图片可以动态替换
图片有一个覆盖层，让阅读更容易
图像有三种尺寸:小号、中号和大号。每个都是针对一个特定的视口。

在开始解决方案以前，让咱们先问问本身这种背景的性质。这是一些入门问题：

为用户保留这个图像很重要吗，仍是能够跳过它？
咱们是否须要在全部视口尺寸上使用它？
它是静态的仍是动态变化的？

解决方案1

经过使用多个CSS背景，咱们能够将一个背景做为叠加层，将另外一个背景做为实际图像。请看下面的CSS：

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}
复制代码

虽然此解决方案有效，但可使用 JavaScript 动态更改背景图片。见下面：

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>
复制代码

这里添加了一个内联样式。虽然这是可行的，但它看起来很丑，并且不实用。

也许咱们可使用CSS变量？让咱们来探索一下。

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>
复制代码

如今，咱们能够轻松地更新--bg-url变量来动态更改背，这比内联的东西好一百万倍。

小结：

这种方案只有在图片不重要才适用
这种方案只适合一些静态网站，由于没有从后台拉取图片

事例源码：codepen.io/shadeed/pen…

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

解决方案2

该方案是可使用一个 img 标签：

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>
复制代码

在CSS中，咱们须要将图片绝对定位在内容下方，而且还须要使用伪元素做为叠加层。

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
复制代码

此解决方案的优势在于，能够轻松更改图片的src属性。一样，若是图像很重要，它将会更加有用。

另外，我喜欢使用HTML <img>的功能是可以在未加载图片的状况下添加回退。回退至少可使内容保持可读性。

.hero img {
    /* Other styles */
    background: #2962ff;
  }
复制代码

在图片源路径不对时，背景颜色是一个代替方面。

事例源码：codepen.io/shadeed/pen…

网站 Logo

网站 Logo是很重要的，由于它能够将网站与其余网站区分开。要嵌入徽标，咱们有一些选择：

*<img> -> png,jpg, orsvg

内联SVG
背景图

接下来，咱们来看看哪一种方式更合适。

带有不少细节的 Logo

当徽标具备许多细节或形状时，将其用做嵌入式SVG可能没有好处。我建议使用<img>，图像类型能够是png，jpg或svg。

须要动画的简单 Logo

咱们有一个简单的logo ，其中包含形状和文字。悬停时，形状和文本须要更改颜色。怎么作？对我来讲最好的解决方案是使用嵌入式SVG。

HTML

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>
复制代码

CSS

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}
复制代码

事例源码：codepen.io/shadeed/pen…

响应 Logo

这让我想起了Smashing Magazine的logo。我喜欢它从一个小图标变成一个完整的徽标。参见下面的模型：

完美的解决方案是使用<picture>元素，能够在其中添加logo 的两个版本。以下所示：

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>
复制代码

在CSS中，咱们须要将视口的宽度更改成等于或大于1350px。

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}
复制代码

这是简单而直接的解决方案。

事例源码：codepen.io/shadeed/pen…

带有渐变的Logo

当 logo 具备渐变时，从Illustrator或Sketch等设计应用程序将其导出的过程可能并不完美，有时会中断。

使用SVG，咱们能够轻松地为logo添加渐变。我添加了<linearGradient>并将其用做文本填充。

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>
复制代码

事例源码：codepen.io/shadeed/pen…

用户头像

对于用户头像，它们具备不少形状，但最多见的是矩形或圆形。在此用例中，会介绍一个对你有用的重要技巧。

首先，让咱们看下面的模型。请注意，咱们有一个完美的化身，而且100％清晰。

可是，当用户上传半白色头像或很是浅的头像时，这个设计就不太好了。

请注意，在上面的模型中，除非真正专一看，不然尚不清楚其中是否有一个圆圈。这是一个问题。为了解决这个问题，咱们应该在头像内添加边框，以防图像太亮看不清除。

咱们有几个选择

<img>元素
<img> 和 <div> 元素
<div>与CSS背景
SVG <image>

哪个最好？咱们来探索探索。

使用 HTML `<img>`

你可能首先想到的是添加一个边框，对吧?让咱们来探讨一下这个问题。

.avatar {
    border: 2px solid #f2f2f2;
}
复制代码

咱们的目标是使内部边框与图像融合在一块儿，这种不太实用。

使用 `<img>` 和 `<div>` 元素

如今的问题是，要添加内部边框，咱们不能使用box-shadow，由于它没法在图像上使用。解决方案用<div>包裹头像中，并添加专用于内部边框的元素。

HTML

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>
复制代码

CSS

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}
复制代码

经过在<div>上使用透明度10%黑色的边框，咱们能够确保边框与深色图像融合，而且只有在图像较亮的状况下才可见。参见下面的模型：

事例地址：codepen.io/shadeed/pen…

使用`<div>`与CSS背景

若是我要使用<div>来显示头像，则可能表示该图像具备装饰性。我记得一个用例，它是分散在页面中的随机头像。

HTML

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>
复制代码

CSS

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}
复制代码

事例地址:codepen.io/shadeed/pen…

使用 SVG `<image>`

对我来讲，这是最有趣的解决方案。我在检查Facebook的新设计时注意到了它。

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>
复制代码

先对其进行剖析，它包含如下内容：

用于将图像剪切为圆形(circle )的蒙版(mask )
对其应用了蒙版的组
image自己带有preserveAspectRatio =“ xMidYMid”
用于内边界的圆

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}
复制代码

事例地址：codepen.io/shadeed/pen…

原文：developers.google.com/web/fundame…

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

文章每周持续更新，能够微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub github.com/qq449245884… 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。

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

HTML <img> 元素

设置宽度和高度属性

经过 CSS 隐藏图像

可访问性问题

响应式图像

调整图像大小

CSS背景图片

何使用 CSS 背景图片

多个背景

隐藏图像

可访问性问题

伪元素

SVG <Image>

可访问性问题

非开发人员没法下载

用例

Hero Section

解决方案1

解决方案2

网站 Logo

带有不少细节的 Logo

须要动画的简单 Logo

响应 Logo

带有渐变的Logo

用户头像

使用 HTML <img>

使用 <img> 和 <div> 元素

使用<div>与CSS背景

使用 SVG <image>

交流

HTML `<img>` 元素

SVG `<Image>`

使用 HTML `<img>`

使用 `<img>` 和 `<div>` 元素

使用`<div>`与CSS背景

使用 SVG `<image>`