web前端開發中各種圖片引入方式及其優缺點

 

前端開發人員在構建網站時需要做的一個決定是引入圖片的方式。它可以是<img>標簽，或者是通過CSS background 屬性，還可以使用 SVG <image>。選擇正確的方式是很重要的，它對性能和可訪問性有很大的影響。

在本文中，我們會學習引入圖像的各種方式，以及每種方式的優點和缺點，以及何時使用和為什么使用它們。

HTML <img> 元素

最簡單的情況下，img元素必須包含src屬性:

 

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

1、設置寬度和高度屬性

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

 

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

雖然對某些人來說，這可能看起來有點過時，但它是有用的。讓我們用圖片來清楚地理解這個概念：

你注意到了嗎，右邊的圖片即使還沒有加載也會保留其空間嗎？這是因為寬度和高度已經設置好了。它有明顯的區別！

事例源碼：https://codepen.io/shadeed/pen/a42ab701809acfecdd4d8f472bb6c043?editors=0100

2、通過 CSS 隱藏圖像

可以用CSS隱藏圖片，但是它仍然會被加載到頁面中。因此，在執行此操作時請小心，如果一個圖片應該被隱藏，那么它可能是出於裝飾的目的。

 

img {
  display: none;
}

同樣，以上內容也不會阻止瀏覽器加載圖片，即使該圖片在視覺上是隱藏的。原因是 <img> 被視為替換元素，因此我們無法控制其加載的內容。

3、可訪問性問題

HTML圖片應該通過將 alt 屬性設置為有意義的描述來訪問，這對屏幕閱讀器用戶來說是非常有幫助的。

但是，如果不需要 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屬性有值，它看起來是這樣的：

這不是一個很好的反饋嗎?此外，當圖像源失敗時，可以向它們添加偽元素。

4、響應式圖像

<img>的優點在於可以針對特定視口大小將其擴展為具有多個版本的照片。 我們有兩種不同的方式來生成一組響應式圖像：

1)、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>元素。 我更喜歡這種方式，因為它更容易預測。

事例源碼：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100

5、調整圖像大小

對於<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背景顯示圖像時，它需要一個具有內容或特定寬度或高度的元素。 通常，背景圖像的主要用途應該是用於裝飾目的。

1、何使用 CSS 背景圖片

首先，我們需要一個元素

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

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

2、多個背景

使用CSS背景圖片的好處是可以設置多個背景。考慮以下示例：

 

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

3、隱藏圖像

我們可以在特定的視口上隱藏和顯示圖片，而不會讓圖片被下載。如果未使用CSS設置圖片，則不會下載該圖片。 這是比使用<img>更多的好處。

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

在上面的示例中，我們有一個背景圖像，僅在視口寬度大於700px時顯示。

4、可訪問性問題

如果使用不當，背景圖像可能會影響可訪問性。 例如，將其用於文章主題，這對於文章至關重要。

5、非開發人員無法下載

你可能會覺得很有趣，但是普通人知道，如果要保存圖像，只需單擊鼠標左鍵，然后選擇保存即可。 CSS背景圖片並非如此，我們必須先檢查元素，然后在DevTools中的url中打開鏈接，然后才能下載隨CSS添加的圖像。

6、偽元素

可以使用偽元素與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。

1、可訪問性問題

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

2、非開發人員無法下載

在檢查元素並復制圖像的URL之前，不可能下載嵌入到SVG中的圖像。然而，如果我們想要阻止用戶下載特定的圖像，這可能是一件好事。至少，它將減少下載圖像的機會很容易。

事例源碼：https://codepen.io/shadeed/pen/38225ba6b2cd706ca5bff48c131e83ce?editors=1100

用例

1、Hero Section

在構建hero section時，有時我們需要在標題和其他內容下方的圖像。 參見下圖：

注意這里有一個圖像。你將如何構建它？好吧，讓我先補充一些要求：

• 在與后端CMS整合時，圖片應該是很容易動態變化的。

• 其上方有一個覆蓋層，有助於使內容易於閱讀。

• 圖像有三種尺寸：小、中和大。它們每個都用於特定的視口。

在開始解決方案之前，讓我們先問問自己這種背景的性質。 這是一些入門問題：

1. 為用戶保留這個圖像很重要嗎，還是可以跳過它？
2. 我們是否需要在所有視口尺寸上使用它？
3. 它是靜態的還是動態變化的？

Hero - 解決方案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背景。雖然這是可行的，但它看起來很丑，而且不實用。

也許我們可以使用CSS變量？讓我們來探索一下。

 

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

現在，我們可以輕松地更新--bg-url變量來動態更改背， 這比內聯的東西好一百萬倍。

解決方案1要點：

1. 解決方案只有在圖像不重要的情況下才是好的

2. 當無法從后端CMS動態更改圖片時

事例源碼：https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522

Hero - 解決方案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 {
  /* 其他樣式 */
  background: #2962ff;
}

好處是，只有在圖像源失敗的情況下，背景才會起作用。那不是很酷嗎？

事例源碼：https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100

2、網站 Logo

網站 Logo是很重要的，因為它可以將網站與其他網站區分開。 要嵌入Logo，我們有一些選擇：

• <img> -> png,jpg, orsvg

• 內聯SVG

• 背景圖像

讓我們學習使用哪種技術以及如何選擇合適的技術。

帶有很多細節的 Logo

當一個LOGO有很多細節或形狀時，用內嵌式SVG可能沒有那么多好處。我建議使用 <img>，圖片類型可以是png、jpg 或 svg。

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

需要動畫的簡單 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;
}

事例源碼：https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100

響應式 Logo

這讓我想起了Smashing Magazine的logo。 我喜歡它從一個小圖標變成一個完整的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;
  }
}

這是簡單而直接的解決方案。

事例源碼：https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100

帶有漸變的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>

事例源碼：https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100

3、用戶頭像

對於用戶頭像，它們具有很多形狀，但最常見的是矩形或圓形。 在此用例中，會介紹一個對你有用的重要技巧。

首先，讓我們看下面的模型。 請注意，我們有一個完美的化身，並且100％清晰。

但是，當用戶上傳半白色頭像或非常淺的頭像時，這個設計就不太好了。

注意到上面的模擬圖中，你要真的聚焦好了才知道里面有一個圓形。這就是一個問題，為了解決這個問題，我們應該在頭像內部添加一個邊框，這將是在圖像太亮的情況下作為備用。

我們有幾個選擇

• <img>元素

• 具有<div> 的 <img>

• 有CSS背景的<div>

• SVG <image>

哪一個最好？ 我們來探索探索。

使用 HTML <img>

你可能首先想到的是添加一個邊框，對吧?讓我們來探討一下這個問題。

 

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

我們的目標是使內部邊框與圖像融合在一起，這種不太實用。

使用具有 <div> 的 <img>

現在的問題是，要添加內部邊框，我們不能使用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%的黑色邊框，我們可以確保邊框與暗色圖像融合，只有在圖像顏色較淺的情況下，邊框才會顯現出來。請看下面的模擬圖。

事例地址：https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100

具有CSS背景的 <div>

如果我要使用<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);
}

事例地址：https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100

使用 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 )
• 對其應用了蒙版的group
• image本身帶有preserveAspectRatio =“ xMidYMid”
• 用於內邊框的圓圈

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

事例地址：https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100

4、帶圖標的輸入框

通常會看到帶有圖標的輸入框，如何添加？當輸入被聚焦時會發生什么？讓我們來探索一下。

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

對我來說，處理這種情況的最佳解決方案是CSS背景圖片。簡單，快捷，不需要添加更多元素。

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的這個工具很棒。

事例源碼：https://codepen.io/shadeed/pen/81f64125425dba02f7a0b725fa837381?editors=0110

5、CSS 打印

用戶可能需要打印web頁面。假設我們有一份食譜，你想把它打印出來，這樣你就可以在廚房里看它，而不需要查看你的手機或電腦。

對於包含說明性步驟的菜譜，重要的是將它們打印出來，否則用戶將無法從打印web頁面中獲得任何好處。

避免使用圖像作為CSS背景

當一個圖像作為CSS背景被包含進來時，它不會被打印出來，取而代之的是一個空白區域。如下圖所示：

就是這樣的情況。我們可以通過強制瀏覽器顯示圖片來解決這個問題，雖然這對Firefox和IE來說不起作用。

.element {
  background: url('cheesecake.png') center/cover no-repeat;
  -webkit-print-color-adjust: exact; /* 強制瀏覽器以打印模式呈現背景 */
}

但是，使用HTML <img> 會更安全，因為它可以打印而不會出現任何問題。

事例源碼：https://codepen.io/shadeed/pen/97d7b13765718132a4fe71b6bc43e388?editors=0100

全文完。