前端运用图片的技巧总结

作者 | Ahmad 译者 | 飘飘

原文 | https://ishadeed.com/article/image-techniques/

前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML <img>，或者是通过CSS背景生成的图片，也可能是SVG <image>。选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。

在这篇文章中，我们将学习各种图片添加方式，以及每种方式的优缺点，以及什么时候和为什么要使用每种方式的上下文。

HTML <Img>元素

在最简单的情况下，image元素必须根据需要包含src属性。

<imgsrc="cool.jpg"alt="">

设置宽高属性

在页面加载时，它们会在页面的图片加载过程中出现一些布局移动。为了避免这种情况，我们可以为它设置宽度和高度属性。

虽然这对有些人来说可能看起来有点老套，但还是很有用的。让我们来直观地理解一下这个概念。

你注意到了吗，右边的图片即使还没有加载，也会保留空间吗？这是因为宽度和高度已经设置好了。它有明显的区别!

Demo:https://codepen.io/shadeed/pen/a42ab701809acfecdd4d8f472bb6c043?editors=0100

用CSS隐藏图片

一张图片可以用CSS隐藏起来。但是，它仍然会被加载到页面中。因此，在做的时候请注意。如果一个图片应该被隐藏，那么可能是为了装饰目的。

img {
    display: none;
}

还是那句话，上面的内容不会阻止浏览器加载图片，即使它在视觉上是隐藏的。原因是 <img>被认为是被替换的元素，所以我们无法控制它加载的内容。

可访问性问题

HTML图片应该通过将alt属性设置为有意义的描述来访问。这对屏幕阅读器用户来说是非常有帮助的。

但是，如果不需要alt描述，请不要删除，如果删除了，图片的src就会被读出! 这对可访问性是非常不利的。

不仅如此，如果图片因为某些原因没有加载，而它有一个明确的alt说明，那么它将会作为一个回退显示。既然有一些有趣的事情我想让大家知道，那我们就从视觉上说说吧。

我们有以下的图片。

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

<imgclass="food-thumb"width="300"height="200"src="cheescake.jpg"alt="">

src是无效的，没有加载。前者没有alt属性，而后者有一个空的alt。你能期待这样的视觉效果吗？

没有alt的图片仍然保留了它的空间，这让人感到困惑，也不利于访问。而另一张折叠起来，以适应其空的alt属性的内容，这就造成了它因为有边框而显得很细小。

但是，当有了alt属性值后，它就会变成这样的样子。

这不是很好的反馈吗？另外，当图片源失败时，可以给它们添加伪元素。

响应式图片

<img>的好处是，它可以扩展为具有特定视口大小的照片的多个版本。比如说，这可以用于文章图片。

我们有两种不同的方式获得一组响应式的图片集。

srcset属性

<imgsrc="small.jpg"srcset="medium.jpg 500w, large.jpg 800w"alt="">

这是一个简单的问题。对于我来说，我认为使用 srcset并不是一个完美的解决方案，根据屏幕宽度的不同，出现多个图片的大小。这个选择只能由浏览器来挑选合适的图片，而我们并没有控制权。

HTML Picture 元素

<picture>
<sourcesrcset="large.jpg"media="(min-width: 800px)"/>
<sourcesrcset="medium.jpg"media="(min-width: 500px)"/>
<imgsrc="small.jpg"/>
</picture>

另一个选择是使用 <picture>元素。我更喜欢这个，因为它更容易和更可预测。

demo:https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100

调整图片的大小

我们可以使用 <img>的一个伟大的东西就是object-fit和object-position属性。它们让我们可以控制 <img>的内容如何调整大小和位置，就像CSS背景图片一样。

object-fit的可能值有：fill, contain, cover, none, scale-down

它可以这样使用。

img {
object-fit: cover;
object-position: 50% 50%;
}

现在我们已经对 <img>元素做了一个介绍，现在是时候继续前进，探索第二个技巧了。

CSS背景图片

当使用CSS背景来显示图片时，需要一个有内容或特定宽度或高度的元素。通常情况下，背景图片的主要用途应该是用于装饰。

如何使用CSS背景图片

很简单，我们需要一个元素。

<divclass="element">Some content</div>

.element {
    background: url('cool.jpg');
}

多重背景

使用CSS背景图片的好处是有多个背景，可以用CSS轻松控制。考虑一下下面的例子。

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

隐藏图像

我们可以在特定视口中隐藏和显示图像，而无需下载它。如果未使用CSS设置图片，则不会下载该图片。与使用 <img>相比，这是一个额外的好处。

@media(min-width: 700px) {
.element {
        background: url('cool-1.jpg');
}
}

在上面的例子中，我们有一个背景图片，只有当视口宽度大于700px时才会显示。

可访问性问题

如果使用不正确，背景图片可能会影响可访问性。例如，将其用于文章中的大拇指，这对文章至关重要。

非开发人员用户不能下载

你可能会觉得好笑，但正常人都知道，如果你想保存一张图片，只需点击右键，然后选择保存即可。而CSS背景图片却不是这样的。在检查该元素时，要先检查该元素，然后在DevTools中打开URL里面的链接，才可以下载一个正在添加CSS的图片。

伪元素

可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。对于 <img>，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。

SVG

SVG被认为是一种图像，它最大的功能是在不影响质量的前提下进行缩放。此外，在SVG中，我们可以嵌入JPG、PNG或SVG图像。请看下面的HTML。

<svgwidth="200"height="200">
<imagehref="cheesecake.jpg"height="100%"width="100%"preserveAspectRatio="xMidYMid slice"/>
</svg>

你有没有注意到 preserveAspectRatio？这就是保持SVG全宽和全高的图像原因，而不被拉伸或压缩。

当 <image>宽度变大时，它将填充其父图像（SVG）的宽度而不被拉伸。

这与 CSS 中的 object-fit: cover 或 background-size: cover 非常相似。

可访问性关注的问题

说到SVG的可访问性，这让我想起了 <title>元素。例如，我们可以像下面这样添加它。

<svgwidth="200"height="200">
<title>A photo of blueberry Cheescake</title>
<imagehref="cheesecake.jpg"height="100%"width="100%"preserveAspectRatio="xMidYMid slice"/>
</svg>

更多的，我们可以使用 <desc>元素。

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

非开发者用户不能下载

在检查SVG元素并复制图片的URL之前，无法下载嵌入到SVG中的图片。不过，如果我们想阻止用户下载特定的图片，这可能是件好事。至少，这样可以减少用户轻易下载图片的几率。

demo:https://codepen.io/shadeed/pen/38225ba6b2cd706ca5bff48c131e83ce?editors=1100

用例

英雄区

在构建英雄栏目时，我们有时需要在标题和其他内容的下方设置一张图片。请看下图。

注意，这有一个图像。你会用什么方法来构建呢？那么，之前我先补充一下要求。

• 在与后台CMS整合时，图片应该是动态变化的，很容易就能改变。
• 在它的上方有一个叠加，有助于让内容更容易阅读。
• 图片有三种尺寸：小、中、大。每一个都是针对特定的视口。

在开始解决之前，我们先问一下自己这个背景的性质。下面是一些入门问题。

• 对于用户来说，这个图片是重要的，还是可以跳过？
• 我们是否需要在所有的视口大小上都要有它？
• 它是静态的还是会动态变化（例如来自CMS）？

Hero - 解决方案1

通过使用多个CSS背景，我们可以有一个用于叠加，另一个用于实际图片。请看下面的CSS。

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

虽然这个方案可行，但也可以用JavaScript动态改变背景图片。请看下面的例子。

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

我把背景作为内嵌式CSS添加了。虽然这样做可以，但看起来很难看，也不实用。

也许我们可以用CSS变量？我们来探讨一下吧。

<sectionclass="hero"style="--bg-url: url('landscape.jpg')">
<!-- Hero content -->
</section>

现在，我们可以轻松地更新 --bg-url变量，这样就能动态地改变背景。这比起内嵌式的方式要好上百万倍。

解决方案1 经验分享

• 只有在图像不重要的情况下，才是好的解决方案
• 当图片不会被后台CMS动态更改时。

demo:https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522

英雄 - 解决方案2

在这个解决方案中，我们将使用一个HTML图片。请看下面的内容。

<sectionclass="hero">
<h2class="hero__title">Using Images in CSS</h2>
<pclass="hero__desc">An article about which and when to use</p>
<imgsrc="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;
}

好在背景只有在源代码失败的情况下才会有效果。这不是很酷吗？

demo:https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100

网站标志

标志是一个网站区别于其他网站的重要标志。要嵌入一个标志，我们有几个选项。

• <img>: png, jpg, 或svg。
• 内联式SVG
• 背景图片

下面我们就来学习一下用什么技巧，以及如何选择合适的技巧。

一个有很多细节的标志

当一个LOGO有很多细节或形状时，用内嵌式SVG可能没有那么多好处。我建议使用 <img>，图片类型可以是png、jpg或svg。

<ahref="#"><imgsrc="logo.svg"alt="Nature Food"></a>

一个需要动画化的简单标志

我们有一个简单的标志，它由形状和文字组成。在悬停时，形状和文字需要改变颜色。如何做到这一点呢？对我来说，最好的解决方案是使用内嵌式SVG。

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

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

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

一个响应式的标志

这让我想起了Smashing Magazine的标志。我喜欢它从一个小图标变成了一个完整的标志。请看下面的模拟图。

这方面的完美解决方案是 <picture>元素，在这里可以添加两个版本的标志。见下图。

<aclass="logo"href="/">
<picture>
<sourcemedia="(min-width: 1350px)"srcset="sm-logo--full.svg"><imgsrc="sm-logo.svg"alt="Smashing Magazine"></picture>
</a>

而在CSS中，我们需要改变视口宽度等于或大于1350px的宽度。

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

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

简单明了的解决方案。

demo:https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100

一个带有渐变标志

当有一个LOGO有了渐变的时候，从Illustrator或Sketch等设计应用程序中导出的过程中，可能会有不完美的地方，有时会出现破损。

有了SVG，我们就可以轻松地给LOGO添加渐变。我添加了一个 <linearGradient>，并将其作为填充应用到文字中。

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

用户头像

对于一个用户头像来说，它们的形状有很多，但最常见的是长方形或圆形的头像。在这个用例中，我想为大家讲解一个重要的提示，可能会对大家有所帮助。

首先，我们来看看下面的模拟图。注意，我们有一个完美的头像，而且它们是100%的清晰。

但是，当用户上传的头像是半白色的，或者是很淡的头像时，这个设计就会失败。

注意到上面的模拟图中，你要真的聚焦好了才知道里面有一个圆圈。这就是一个问题。为了解决这个问题，我们应该在头像内部添加一个边框，这将是在图像太轻的情况下作为备用。

我们有几个选项可以做到这一点。

• 一个 <img>元素
• 一个带有 <div>的 <img>
• 一个带有CSS背景的 <div>
• SVG <image>

到底哪家好呢？让我们一起来探讨一下。

使用HTML

大家可能首先想到的是加边框吧？让我们一起来探讨一下吧（不好意思，下面的章节中可能会经常看到我的表情）。

.avatar {
    border: 2px solid #f2f2f2;
}

我们的目标是要有一个与图像相融合的内部边框。有实体边框并不实用。

使用HTML <img>与 <div>的使用方法

现在的问题是，要添加一个内边框，我们不能使用内嵌框阴影，因为它在图片上不起作用。解决的办法是将头像包裹在 <div>中，并为内边框添加一个专用元素。

<divclass="avatar-wrapper">
<imgclass="avatar"src="shadeed2.jpg"alt="A photo of Ahmad Shadeed">
<divclass="avatar-border"></div>
</div>

.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%的黑色边框，我们可以确保边框与暗色图像融合，只有在图像颜色较浅的情况下，边框才会显现出来。请看下面的模拟图。

一个带有CSS背景的

如果我会用 <div>来显示头像，那可能意味着头像是装饰性的。我想起了一个用例，那就是散落在页面中的随机头像。

我们可以这样做。

<divclass="avatar"style="--img-url: url(shadeed2.jpg)"></div>

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

SVG <image>

这是我最感兴趣的解决方案。我在检查Facebook的新设计时注意到了它。

<svgrole="none"style="height: 36px; width: 36px;">
<maskid="avatar">
<circlecx="18"cy="18"fill="white"r="18"></circle>
</mask>
<gmask="url(#avatar)">
<imagex="0"y="0"height="100%"preserveAspectRatio="xMidYMid slice"width="100%"xlink:href="avatar.jpg"style="height: 36px; width: 36px;"></image>
<circlecx="18"cy="18"r="18"></circle>
</g>
</svg>

我先来剖析一下，它包含以下内容。

• 一个蒙版，将图像剪裁成圆形
• 一个被套上面具的组
• 图像本身带有 preserveAspectRatio="xMidYMid"
• 将用于内侧边界的圆圈

在CSS中，我们将有以下几点。

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

这就是用户头像的使用案例。

有图标的输入

经常会看到有一个带图标的输入框，如何添加？当输入框被聚焦后会有什么情况呢？我们一起来探讨一下。

<p>
<labelfor="name">Full name</label>
<inputtype="text"id="name">
</p>

对我来说，处理这种情况的最佳方案是CSS背景图片。它很简单、快速，而且不需要添加更多的元素。

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

而要想改变焦点上的图标颜色，我们可以使用URL编码的SVG，就可以轻松完成。Yoksel的这个工具非常棒。

CSS印刷

用户可能需要打印一个网页。比如说我们有一个菜谱，你想把它打印出来，这样就可以在厨房里看，而不需要检查手机或电脑。

对于一个包含图文并茂的菜谱，一定要用打印的方式显示出来，否则用户根本无法从打印网页中得到任何好处。

避免使用图片作为CSS背景

当一个图片作为CSS背景被包含时，它将不会被打印出来，而是会出现一个空位。见下图。

就是这样的情况。我们可以通过强制浏览器显示图片来解决这个问题，虽然这对Firefox和IE来说不起作用。

.element {
    background: url('cheesecake.png') center/cover no-repeat;
-webkit-print-color-adjust: exact; /* Force the browser to render the background in print mode */
}

但是，使用HTML <img>比较安全，因为它的打印不会有任何问题。