Get best of the week

[书签]使用网络上的图像

前端开发人员在创建网站时必须做出的决定之一涉及如何在网页中包含图像的选择。此方法可能是使用HTML标签<img>。这可以是CSS属性background或<image>元素标签<svg>。选择正确的图像处理方法非常重要，因为这会极大地影响项目的性能和可用性。 该材料是我们今天发布的翻译，致力于研究将图像包含在网页中的各种方式。在此，将讨论这些方法的优点和缺点。此外，我们将讨论何时以及为何通常使用它们。





HTML <img>元素


<img>最简单使用 的元素仅包含其正常操作所需的属性src：

<img src="cool.jpg" alt="">

▍设置宽度和高度属性


如果未调整图像的宽度和高度，则在加载页面然后加载图像时，可能需要重新构建页面布局。为了避免这种情况，您可以设置属性width和height标签<img>：

<img src="cool.jpg" width="200" height="100" alt="">

尽管这种方法可能会使人稍微想起“老派”，但是可以说，它实际上是非常有用的。为了更好地理解这一点，我们将通过一个示例演示以上内容。即，我建议您观看此短片。


视频中的帧。左侧的图像没有宽度和高度。定义了右侧的图像，

此处显示了Network浏览器开发人员工具栏，并演示了加载一对图像的过程。其中之一是位于左侧，由标签来表示<img>，其属性width和height未设置。这些属性的另一个值被设置。

您是否注意到页面上甚至在加载该图像之前就为该图像保留了空间？都是关于给定的属性width和height。在上传过程中，请注意图片标题的显示情况。这清楚地表明了属性width和属性的强度height。

→这是一个工作示例

using使用CSS隐藏图像


可以使用CSS隐藏该图像。是的，页面加载时仍会加载此类图像。因此，在执行此操作时应谨慎。如果某个图像需要隐藏，则只能用于装饰目的。

这是隐藏图像的CSS代码：

img {
    display: none;
}

我再说一遍：使用这种方法，浏览器将下载图像，即使事实证明它是不可见的，也可以这样做。这里的重点是，元素<img>被视为可替换元素，因此我们从CSS管理此类元素的能力受到限制。

▍关于内容可用性


使用HTML元素的页面上显示的图像的可用性<img>由其属性确保alt。这样的属性应包含对图像的清晰描述。这对于使用屏幕阅读器的用户非常有用。

但是，如果alt不需要描述图像，则仍然不建议删除该属性。事实是，如果这样做，则属性的内容将被“发声” src。这对于内容可访问性非常不利。

但是该属性alt不仅在上述情况下有用。如果由于某种原因该图片将不会上传且具有属性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包含不正确的图像文件地址；浏览器无法加载该文件。第一个<img>没有属性alt，第二个没有属性，其中写入了空字符串。您认为这些元素将如何显示在页面上？


左侧是没有alt属性的图像。右边-带有空的alt属性，

在没有该属性的图像下alt，保留了页面空间，这可能会使用户感到困惑并损害内容的可用性。而另一幅图像只需要很小的空间即可显示空属性的“内容”alt。结果，它看起来更像是点而不是图像。这是由于border图像属性设置引起的。

但是，当在属性中alt写入一些内容时，图像将看起来有所不同。


右边是alt属性中写入文字的图片，

这总比没有好。另外，如果您无法加载中显示的文件<img>，则可以向其中添加一个伪元素。

▍响应式图像



不同大小

的图像该元素<img>的优点在于可以对其进行配置，以便在不同大小的页面的查看区域中显示不同版本的图像。例如，这可用于文章中使用的图像。

可以通过两种方式自定义一组响应图像。

1. srcset属性


这是使用该属性的图像代码srcset：

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

这是一个简单的例子。我认为这不是srcset用于描述具有不同特征的屏幕上显示的不同尺寸图像的理想解决方案。事实是，在这种情况下，最后的权利留在浏览器中，开发人员无法影响浏览器的选择。

2. HTML图片元素


这是使用元素的代码<picture>：

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

创建响应图像的另一种方法是使用元素<picture>。我之所以喜欢这种方法，是因为它更简单并且可以提供更多可预测的结果。

这是此部分的演示项目。

▍调整图像大小



左侧是未设置CSS对象适合属性的图像。右边是具有这个属性设置与图像

的CSS属性object-fit和object-position是你可以与元素的使用很好的工具<img>。它们使我们可以控制元素的内容如何更改和定位<img>。这类似于使用CSS属性background。

该属性object-fit可以有以下值：fill，contain，cover，none，scale-down。

使用方法如下：

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

现在我们已经弄清楚了这个元素<img>，是时候继续学习下一个图像处理技术了。

CSS属性图片


使用CSS属性显示图像时background，需要将此属性应用于具有某些内容的元素或具有尺寸的元素。通常，使用此属性的主要区域是装饰元素。

▍如何使用CSS背景属性


为了使用CSS属性background，我们首先需要一个元素：

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

然后，您需要一种样式：

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

▍在背景属性中设置多张图像


使用CSS属性显示的图像的一个不错的功能background是可以有多个这样的图像。这些图像可以使用CSS进行操作：

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

iding隐藏图像


使用CSS，您可以在特定的查看区域中隐藏和显示图像。同时，将不会上传不会显示的图像。如果CSS中的图像未配置为可见，则不会加载。这是CSS属性background相对于element 的附加优势<img>。

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

本示例介绍了仅在视口的宽度较大时显示的背景图像700px。

▍关于内容可用性


如果使用CSS属性显示的图像使用background不正确，则会损坏内容的可访问性。例如，使用此类图像为文章添加书签可能会影响可访问性，这在处理文章时至关重要。

regular普通用户难以加载背景图像


普通用户知道，如果需要保存某个图像，只需右键单击它并选择适当的上下文菜单命令即可。对于您来说，这似乎很有趣，但是对于使用CSS属性设置的图片background，此技术无效。无法以常规方式加载此类图像。要下载它，您将需要检查开发人员工具中的元素代码并使用中的链接url。

se伪元素


伪元素也可以与CSS属性定义的图像一起使用background。例如，将一个图像显示在另一个图像之上。在一个元素的情况下，<img>只能使用叠加在另一个元素上的附加元素来实现。

现在让我们谈谈使用SVG图片

SVG图片


SVG图像的主要优势是能够缩放它们而不损失质量。此外<svg>，除了SVG图像外，一个元素还可以显示JPG和PNG文件。这是SVG图片的HTML代码：

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


通过SVG元素显示的JPG图像

注意该属性preserveAspectRatio吗？多亏了他，图像占据了元素的整个宽度和高度<svg>，而没有拉伸和收缩。

如果元素的宽度<image>更大，它将<svg>在宽度上填充父元素（），但不会拉伸。


图片无法拉伸，

这与CSS属性object-fit: cover或的工作方式非常相似background-size: cover。

▍关于内容可用性


如果我们谈论使用SVG图像时内容的可用性，我可以说这样的对话立刻使我想起一个元素<title>。下面是一个代码示例，其中通过<svg>以下方式将以下元素添加到图像输出：

<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>

regular普通用户加载<svg>图像的困难


借助帮助显示的图像<svg>，您只能通过分析其代码并转到图像的链接来进行下载。这是一个减号，但是如果有人想限制普通用户下载图像的能力，此功能可能会派上用场。至少，这将减少下载此类图像的机会。

→ 这是本节的示例

使用不同图像输出方法的方案


▍页面部分显示在顶部


设计位于页面上部的页面部分（此类部分称为“英雄部分”）时，有时需要使其显示图像，在该图像的顶部显示页面的标题和其他数据。它可能看起来像以下内容。


该页面的上部带有图像和铭文，请

注意存在背景图像的事实。您将如何开发页面的这一部分？但是，在回答这个问题之前，让我提出一些要求：

  • 在将页面与后端CMS集成时，该图像应支持轻松的动态更改。
  • 应该在图像上放置一个元素，以简化文本的阅读。
  • 有必要支持三种尺寸的图像输出：小，中和大。它们中的每一个都针对其自己的观看区域。

在继续解决此问题之前，我们先问自己有关将在此处使用的背景图像的性质。以下是一些支持性问题，可帮助我们深入了解此问题：

  1. 从用户的角度来看，图像是否重要？否则，如果不可见，用户将不会丢失任何东西？
  2. 是否需要在所有大小的查看区域中显示此图像？
  3. 该图像是静态的还是动态变化的（例如，从CMS）？

考虑解决这个问题的几种选择。

第一个解决问题的方法


使用CSS属性background定义了多个图像，其中一个可以用于叠加在主图像上的元素，而另一个可以用于表示图像本身。看一下这个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;
}

这种方法使您可以实现所需的目标，background-image可以使用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>

background我以可嵌入的样式定义了该 属性。尽管这是有效的代码，但它看起来很糟糕并且不切实际。

也许您可以在这里使用CSS变量？

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

这是样式研究的结果。


研究元素的样式

现在，要更改背景图像，我们只需要更改变量即可--bg-url。这比内联样式好一百万倍。

分析


  1. 仅在图像不是特别重要的情况下，此处建议的解决方案才是好的。
  2. 如果不计划使用项目后端上使用的CMS动态更改图像，则可能比较合适。

→ 这是一个工作示例

问题的第二种解决方案


在这里，我们将使用HTML图像输出工具：

<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);
}

这个解决方案很好，因为使用它很容易更改image属性src。另外，对于输出图像很重要的情况更好。

另外，我注意到我喜欢<img>-images，当使用-images时，可以使用备份机制，该机制在无法加载映像文件时可以使用。这样的辅助机制，例如，输出而不是简单的彩色背景图像，将至少允许用户阅读文本：

.hero img {
    /*   */
    background: #2962ff;
  }


如果图像加载失败，

则显示背景色，但是，只有在图像加载失败时才显示背景色。它将适合我们。

→这是一个工作示例

▍网站徽标


徽标非常重要。徽标为网站增添了独特性。为了在页面上显示徽标，我们可以采用几种方法：

  • <img>显示PNG，JPG或SVG图像的元素。
  • 内置SVG图像。
  • 背景图片。

让我们讨论徽标应使用哪种显示图像的方式，以及如何准确选择所需的内容。

带有许多细节的徽标。


如果徽标具有很多细节或包含许多形状，则使用内置SVG图像显示徽标可能不是一个好主意。在这种情况下，我建议使用标签<img>，通过该标签显示PNG，JPG或SVG图像。


杂项徽标

这是显示以SVG格式存储的类似徽标的代码：

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

简单的徽标即可制作动画



简单的动画徽标

考虑一种情况，其中有一个包含特定图形或文字的简单徽标。将鼠标悬停在其上时，需要更改形状和文本的颜色。怎么做？在我看来，在这种情况下，最好使用内置的SVG映像：

<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>

以下是样式：

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

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

这是此部分的演示项目：

响应徽标


当我想到响应式徽标时，我想起了《粉碎杂志》徽标。我喜欢它大小变化的方式。这是说明基本徽标和在较大查看区域中显示的徽标的布局。


响应徽标

要实现此徽标行为，理想的元素<picture>是允许您描述徽标的两个版本：

<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;
  }
}

摆在我们面前的是响应式徽标问题的简单易懂的解决方案。

→ 这是本节的工作示例

渐变徽标



带有渐变的徽标的示例

当使用带有渐变的徽标时，您需要注意，从设计应用程序（如Adobe Illustrator或Sketch）导出这样的徽标可能远非完美。在此过程中，徽标中的某些内容可能会损坏。

使用SVG格式时，您可以轻松地将渐变颜色应用于徽标。在以下示例中，我使用<linearGradient>，并为其设置了text属性fill：

<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>

→ 这是一个例子

▍头像用户


化身有多种形状，但通常是方形或圆形的化身。在此示例中，我想分享一条可能对您有用的重要建议。

首先，请看以下布局。请注意，有两个边缘清晰的整洁头像。


一对成功的头像

如果用户决定使用接近白色背景的图片怎么办？如果是这样，那么化身看起来就不会那么好。


化身失败

请注意，上一个图像显示的化身背景非常明亮。结果，为了理解它是圆形的，必须仔细观察它。这是不好的。为了解决此问题，您需要向头像添加内部边框。当图像太亮时，将使用此边框作为辅助解决方案。


左侧是背景太浅的头像。右边是解决此问题的结果，有

几种解决方法：

  • 使用<img>。
  • 使用<img>和辅助元素<div>。
  • 使用<div>和CSS属性background。
  • 使用<image>c <svg>。

什么最适合这里？让我们找出答案。

使用<img>


如何解决这个问题呢？也许-只是调整元素的边框？我们正在探索这种可能性（我很抱歉在您下面经常看到我的照片这一事实）。

这是CSS：

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

这是它的外观。


结果与预期不同：暗边框位于图像边框之外，

发生的情况不适合我们。我们需要图像具有与深色图像合并的内部边界。结果，事实证明，设置元素的边框对我们没有帮助。

使用<img>和助手<div>


让我提醒您，我们面临着为图像添加内部阴影的任务。我们不能使用内部阴影（box-shadow）和关键字解决此问题inset，因为HTML元素<img>不支持内部阴影。要解决此问题，您需要在一个元素中放置一个化身，<div>并使用另一个元素，其唯一目的是绘制内部边框。

这是HTML代码：

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="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％黑色，则将确保该边框在深色图像中不可见，而在明亮的情况下可见，突出显示其边框。这是它的外观。


内部边框，仅在明亮的图像中可见

→这是此部分的示例

使用<div>和CSS背景属性


如果使用元素显示化身<div>，则可能意味着图像起装饰作用。我想到一个例子，如下所示。在这里，各种化身只是散布在页面上。


头像散布在页面上，

此处的 HTML为：

<div class="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 0 0 0 2px rgba(#000, 0.1);
}

在这里您可以找到一个有效的例子。

在<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>

首先，让我们分析一下这段代码。这是什么：

  1. 裁剪圆形图像的蒙版。
  2. 掩码适用的组。
  3. 具有属性的图像本身preserveAspectRatio=«xMidYMid»。
  4. 用作内部边界的圆。

它的样式如下：

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

→ 在这里您可以找到一个实例

化身，我们已经弄清楚了。因此，我们继续前进。

▍带图标的输入字段


这是带有图标的输入字段的示例。


带图标的输入字段

这种字段很常见。如何用图标装备字段？当这样的领域获得关注时会发生什么？探索这些问题。

这是HTML代码：

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

我相信，解决此问题的最佳方法是使用CSS定义的背景图片。它简单，快速且不需要其他HTML元素：

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

当字段获得焦点时，可以使用URL编码的SVG图像更改图标的颜色。这很容易做到。例如，该工具就是为此目的设计的，由Yoksel开发。

这是一个例子。

▍CSS样式打印


页面访问者可能需要在打印机上进行打印。假设页面上有一个烹饪食谱，您需要将其打印出来，这样在厨房中，您就不必经常看手机或电脑了。

如果菜谱中包含步骤（如图所示），则必须将其归入其印刷版本，这一点很重要，否则，打印页面的人将无法使用该菜谱。

尽量不要在用于打印使用CSS属性背景显示的图像的页面中包括


如果使用CSS属性将图像包含在页面中background，则将不会打印该图像。打印时显示的地方将为空。这就是我在说的。


使用CSS背景属性，用空格代替页面中包含的图像

对于这种印刷版本的配方，几乎没有用。可以通过强制浏览器在页面的打印版本中显示相似的图像来解决此问题。但是这种方法在Firefox和IE中不起作用。这是CSS中的样子：

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

在这种情况下，最好使用HTML元素<img>。使用此元素在页面中包含的图像可以顺利打印。

→ 这是一个例子

摘要


今天，我们讨论了将图像包含在网页中的不同方法，讨论了它们的优缺点，并研究了其使用场景。希望您发现今天学到的东西对您有用。

亲爱的读者们！您是否在网页上显示图像时遇到问题？

More articles:


All Articles