web 圖像技術(shù)：前端引入圖片的各種方式及其優(yōu)缺點(diǎn)

看見(jiàn)就非常 2020-04-30

展開(kāi)全文

作者：ahmad shadeed
譯者：前端小智來(lái)源：developers

本文 GitHub github.com/qq449245884… 上已經(jīng)收錄，更多往期高贊文章的分類，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參照考點(diǎn)復(fù)習(xí)，希望我們一起有點(diǎn)東西。

前端開(kāi)發(fā)人員在構(gòu)建網(wǎng)站時(shí)需要做的一個(gè)決定是引入圖片的方式。它可以是<img>標(biāo)簽，或者是通過(guò)CSS background 屬性，還可以使用 SVG <image>。選擇正確的方式是很重要的，它對(duì)性能和可訪問(wèn)性有很大的影響。

在本文中，我們會(huì)學(xué)習(xí)引入圖像的各種方式，以及每種方式的優(yōu)點(diǎn)和缺點(diǎn)，以及何時(shí)使用和為什么使用它們。

HTML `<img>` 元素

最簡(jiǎn)單的情況下，img元素必須包含src屬性:

<img src="cool.jpg" alt="">
復(fù)制代碼

設(shè)置寬度和高度屬性

在頁(yè)面加載時(shí)，它們會(huì)在頁(yè)面圖像加載時(shí)發(fā)生一些布局變化。為了避免這種情況，我們可以為它設(shè)置width和height屬性:

<img src="cool.jpg" width="200" height="100" alt="">
復(fù)制代碼

雖然對(duì)某些人來(lái)說(shuō)，這可能看起來(lái)太過(guò)簡(jiǎn)單了，但它是有用的。我們用圖例的方式來(lái)理清這個(gè)概念：

我們看到到右側(cè)圖片即使尚未加載仍保留了空間？那是因?yàn)樵O(shè)置了寬度和高度。

通過(guò) CSS 隱藏圖像

圖像可以用 CSS 隱藏。但是，它仍將加載在頁(yè)面中。因此，在執(zhí)行此操作時(shí)請(qǐng)小心。如果一個(gè)圖像應(yīng)該被隱藏，那么它可能是出于裝飾的目的。

img {
    display: none;
}
復(fù)制代碼

同樣，上面的方法也不能阻止瀏覽器加載圖像，即使它在視覺(jué)上是隱藏的。原因是<img>被認(rèn)為是一個(gè)被替換的元素，所以我們無(wú)法控制它所加載的內(nèi)容。

大家都說(shuō)簡(jiǎn)歷沒(méi)項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。

可訪問(wèn)性問(wèn)題

通過(guò)將alt屬性設(shè)置為有意義的描述，用來(lái)訪問(wèn) HTML 圖像，這對(duì)于屏幕閱讀器用戶非常有幫助。

然而，如果一個(gè)alt描述是不需要的，請(qǐng)不要?jiǎng)h除它，如果你這樣做，圖像src將被讀出,這對(duì)可訪問(wèn)性非常不利。

不僅如此，如果圖像因?yàn)槟撤N原因沒(méi)有加載，并且它有一個(gè)清晰的alt，它將作為一個(gè)回退顯示。同樣通過(guò)圖例來(lái)演示一下。

假設(shè)我們有以下圖片：

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

<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">
復(fù)制代碼

當(dāng)src無(wú)效，圖片沒(méi)有加載時(shí)。第一個(gè)沒(méi)有alt屬性，而第二個(gè)是空的alt屬性，下面是它們的視覺(jué)效果：

沒(méi)有alt的圖片仍然保留了它的空間，這很混亂，而且不利于訪問(wèn)。而另一個(gè)alt為空的圖片，會(huì)折疊起來(lái)看起來(lái)像一個(gè)小點(diǎn)，這里因?yàn)樗羞吙颉?/p>

但是，當(dāng)alt屬性有值，它看起來(lái)是這樣的：

這不是一個(gè)很好的反饋嗎?此外，當(dāng)圖像源失敗時(shí)，可以向它們添加偽元素。

響應(yīng)式圖像

<img>的優(yōu)點(diǎn)在于可以針對(duì)特定視口大小將其擴(kuò)展為具有多個(gè)版本的照片。我們有兩種不同的方式來(lái)生成一組響應(yīng)式圖像：

1.srcset屬性

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">
復(fù)制代碼

這很簡(jiǎn)單。對(duì)我來(lái)說(shuō)，srcset可以根據(jù)屏幕寬度顯示多個(gè)圖像尺寸，這并不是一種完美的解決方案。它讓瀏覽器選擇合適的圖像，而我們對(duì)此無(wú)能為力。

2.picture 標(biāo)簽

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

另一種選擇是使用<picture>元素。我更喜歡這種方式，因?yàn)樗菀最A(yù)測(cè)。

事例源碼：/shadeed/pen…

調(diào)整圖像大小

對(duì)于<img>，我們還可以使用的一組很好的特性object-fit和object-position。它們可以控制<img>的大小和定位，就像CSS背景圖像。

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

img {
    object-fit: cover;
    object-position: 50% 50%;
}
復(fù)制代碼

CSS背景圖片

使用CSS背景顯示圖像時(shí)，它需要一個(gè)具有內(nèi)容或特定寬度或高度的元素。通常，背景圖像的主要用途應(yīng)該是用于裝飾目的。

何使用 CSS 背景圖片

首先，我們需要一個(gè)元素

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

// css
.element {
    background: url('cool.jpg');
}
復(fù)制代碼

多個(gè)背景

使用CSS背景圖片的好處是可以設(shè)置多個(gè)背景?？紤]以下示例：

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}
復(fù)制代碼

隱藏圖像

我們可以在特定視口中隱藏和顯示圖像，如果未使用CSS設(shè)置圖片，則不會(huì)下載該圖片。與使用<img>相比，這是一個(gè)額外的好處。

在上面的示例中，我們有一個(gè)背景圖像，僅在視口寬度大于700px時(shí)顯示。

可訪問(wèn)性問(wèn)題

如果使用不當(dāng)，背景圖像可能會(huì)影響可訪問(wèn)性。例如，將其用于文章主題，這對(duì)于文章至關(guān)重要。

####?非開(kāi)發(fā)人員無(wú)法下載

普通人知道，如果要保存圖像，只需單擊鼠標(biāo)左鍵，然后選擇保存即可。 CSS?背景圖片并非如此，我們必須先檢查元素，然后在DevTools中的url中打開(kāi)鏈接，然后才能下載隨CSS添加的圖像。

偽元素

可以將偽元素與CSS背景圖像一起使用，例如在圖像頂部顯示覆蓋圖。對(duì)于<img>這是不可能的，直到我們?yōu)榀B加層添加單獨(dú)的元素。

SVG `<Image>`

SVG被認(rèn)為是一種圖像，它最大的功能是在不影響質(zhì)量的情況下進(jìn)行縮放。此外，使用SVG，我們可以嵌入JPG、PNG或SVG圖像。參見(jiàn)下面的 HTML:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
復(fù)制代碼

你是否注意到了prepareAspectRatio？它的作用是可以讓圖像占據(jù)SVG的整個(gè)寬度和高度，而不會(huì)被拉伸或壓縮。

當(dāng)<image>寬度較大時(shí)，它將填充其父級(jí)（SVG）寬度而不會(huì)拉伸。

這非常類似于 CSS 中的object-fit: cover或background-size: cover。

可訪問(wèn)性問(wèn)題

關(guān)于SVG 的可訪問(wèn)性，這使我想起了<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>
復(fù)制代碼

我們還可以使用<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>
復(fù)制代碼

非開(kāi)發(fā)人員無(wú)法下載

必須先檢查元素并復(fù)制圖像的URL，然后才能下載嵌入SVG的圖像。但是，如果我們要防止用戶下載特定的圖像，這可能是一件好事。

用例

Hero Section

在構(gòu)建hero section時(shí)，有時(shí)我們需要在標(biāo)題和其他內(nèi)容下方的圖像。參見(jiàn)下圖：

一些要求：

背景圖片能夠動(dòng)態(tài)替換
圖片有一個(gè)覆蓋層，讓閱讀更容易
圖像有三種尺寸:小號(hào)、中號(hào)和大號(hào)。每一個(gè)都是針對(duì)一個(gè)特定的視口。

在開(kāi)始解決方案之前，讓我們先問(wèn)問(wèn)自己這種背景的性質(zhì)。這是一些入門問(wèn)題：

為用戶保留這個(gè)圖像很重要嗎，還是可以跳過(guò)它？
我們是否需要在所有視口尺寸上使用它？
它是靜態(tài)的還是動(dòng)態(tài)變化的？

解決方案1

通過(guò)使用多個(gè)CSS背景，我們可以將一個(gè)背景作為疊加層，將另一個(gè)背景作為實(shí)際圖像。請(qǐng)看下面的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;
}
復(fù)制代碼

雖然此解決方案有效，但可以使用 JavaScript 動(dòng)態(tài)更改背景圖片。見(jiàn)下面：

<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>
復(fù)制代碼

這里添加了一個(gè)內(nèi)聯(lián)樣式。雖然這是可行的，但它看起來(lái)很丑，而且不實(shí)用。

也許我們可以使用CSS變量？讓我們來(lái)探索一下。

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

現(xiàn)在，我們可以輕松地更新--bg-url變量來(lái)動(dòng)態(tài)更改背，這比內(nèi)聯(lián)的東西好一百萬(wàn)倍。

小結(jié)：

這種方案只有在圖片不重要才適用
這種方案只適合一些靜態(tài)網(wǎng)站，因?yàn)闆](méi)有從后臺(tái)拉取圖片

事例源碼：/shadeed/pen…

大家都說(shuō)簡(jiǎn)歷沒(méi)項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。

解決方案2

該方案是可以使用一個(gè) img 標(biāo)簽：

<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>
復(fù)制代碼

在CSS中，我們需要將圖片絕對(duì)定位在內(nèi)容下方，并且還需要使用偽元素作為疊加層。

.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);
}
復(fù)制代碼

此解決方案的優(yōu)點(diǎn)在于，可以輕松更改圖片的src屬性。同樣，如果圖像很重要，它將會(huì)更加有用。

另外，我喜歡使用HTML <img>的功能是能夠在未加載圖片的情況下添加回退。回退至少可以使內(nèi)容保持可讀性。

.hero img {
    /* Other styles */
    background: #2962ff;
  }
復(fù)制代碼

在圖片源路徑不對(duì)時(shí)，背景顏色是一個(gè)代替方面。

事例源碼：/shadeed/pen…

網(wǎng)站 Logo

網(wǎng)站 Logo是很重要的，因?yàn)樗梢詫⒕W(wǎng)站與其他網(wǎng)站區(qū)分開(kāi)。要嵌入徽標(biāo)，我們有一些選擇：

*<img> -> png,jpg, orsvg

內(nèi)聯(lián)SVG
背景圖

接下來(lái)，我們來(lái)看看哪種方式更合適。

帶有很多細(xì)節(jié)的 Logo

當(dāng)徽標(biāo)具有許多細(xì)節(jié)或形狀時(shí)，將其用作嵌入式SVG可能沒(méi)有好處。我建議使用<img>，圖像類型可以是png，jpg或svg。

需要?jiǎng)赢嫷暮?jiǎn)單 Logo

我們有一個(gè)簡(jiǎn)單的logo ，其中包含形狀和文字。懸停時(shí)，形狀和文本需要更改顏色。怎么做？對(duì)我來(lái)說(shuō)最好的解決方案是使用嵌入式SVG。

HTML

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www./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>
復(fù)制代碼

CSS

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

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}
復(fù)制代碼

事例源碼：/shadeed/pen…

響應(yīng) Logo

這讓我想起了Smashing Magazine的logo。我喜歡它從一個(gè)小圖標(biāo)變成一個(gè)完整的徽標(biāo)。參見(jiàn)下面的模型：

完美的解決方案是使用<picture>元素，可以在其中添加logo 的兩個(gè)版本。如下所示：

<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>
復(fù)制代碼

在CSS中，我們需要將視口的寬度更改為等于或大于1350px。

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

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}
復(fù)制代碼

這是簡(jiǎn)單而直接的解決方案。

事例源碼：/shadeed/pen…

帶有漸變的Logo

當(dāng) logo 具有漸變時(shí)，從Illustrator或Sketch等設(shè)計(jì)應(yīng)用程序?qū)⑵鋵?dǎo)出的過(guò)程可能并不完美，有時(shí)會(huì)中斷。

使用SVG，我們可以輕松地為logo添加漸變。我添加了<linearGradient>并將其用作文本填充。

<svg class="logo" width="115" height="47" xmlns="http://www./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>
復(fù)制代碼

事例源碼：/shadeed/pen…

用戶頭像

對(duì)于用戶頭像，它們具有很多形狀，但最常見(jiàn)的是矩形或圓形。在此用例中，會(huì)介紹一個(gè)對(duì)你有用的重要技巧。

首先，讓我們看下面的模型。請(qǐng)注意，我們有一個(gè)完美的化身，并且100％清晰。

但是，當(dāng)用戶上傳半白色頭像或非常淺的頭像時(shí)，這個(gè)設(shè)計(jì)就不太好了。

請(qǐng)注意，在上面的模型中，除非真正專注看，否則尚不清楚其中是否有一個(gè)圓圈。這是一個(gè)問(wèn)題。為了解決這個(gè)問(wèn)題，我們應(yīng)該在頭像內(nèi)添加邊框，以防圖像太亮看不清除。

我們有幾個(gè)選擇

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

哪一個(gè)最好？我們來(lái)探索探索。

使用 HTML `<img>`

你可能首先想到的是添加一個(gè)邊框，對(duì)吧?讓我們來(lái)探討一下這個(gè)問(wèn)題。

.avatar {
    border: 2px solid #f2f2f2;
}
復(fù)制代碼

我們的目標(biāo)是使內(nèi)部邊框與圖像融合在一起，這種不太實(shí)用。

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

現(xiàn)在的問(wèn)題是，要添加內(nèi)部邊框，我們不能使用box-shadow，因?yàn)樗鼰o(wú)法在圖像上使用。解決方案用<div>包裹頭像中，并添加專用于內(nèi)部邊框的元素。

HTML

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>
復(fù)制代碼

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);
}
復(fù)制代碼

通過(guò)在<div>上使用透明度10%黑色的邊框，我們可以確保邊框與深色圖像融合，并且只有在圖像較亮的情況下才可見(jiàn)。參見(jiàn)下面的模型：

事例地址：/shadeed/pen…

使用`<div>`與CSS背景

如果我要使用<div>來(lái)顯示頭像，則可能表示該圖像具有裝飾性。我記得一個(gè)用例，它是分散在頁(yè)面中的隨機(jī)頭像。

HTML

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>
復(fù)制代碼

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);
}
復(fù)制代碼

事例地址:/shadeed/pen…

使用 SVG `<image>`

對(duì)我來(lái)說(shuō)，這是最有趣的解決方案。我在檢查Facebook的新設(shè)計(jì)時(shí)注意到了它。

<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>
復(fù)制代碼

先對(duì)其進(jìn)行剖析，它包含以下內(nèi)容：

用于將圖像剪切為圓形(circle )的蒙版(mask )
對(duì)其應(yīng)用了蒙版的組
image本身帶有preserveAspectRatio =“ xMidYMid”
用于內(nèi)邊界的圓

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}
復(fù)制代碼

事例地址：/shadeed/pen…

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

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：看見(jiàn)就非常 > 《待分類》

舉報(bào)/認(rèn)領(lǐng)