web 圖像技術：前端引入圖片的各種方式及其優缺點

前端開發人員在構建網站時需要做的一個決定是引入圖片的方式。它可以是

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

HTML img 元素

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

<code>/<code>

設置寬度和高度屬性

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

<code>/<code>

雖然對某些人來說，這可能看起來太過簡單了，但它是有用的。我們用圖例的方式來理清這個概念：

我們看到到右側圖片即使尚未加載仍保留了空間？那是因為設置了寬度和高度。

通過 CSS 隱藏圖像

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

<code>img {
    display: none;
}/<code>

同樣，上面的方法也不能阻止瀏覽器加載圖像，即使它在視覺上是隱藏的。原因是被認為是一個被替換的元素，所以我們無法控制它所加載的內容。

可訪問性問題

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

然而，如果一個alt描述是不需要的，請不要刪除它，如果你這樣做，圖像src將被讀出,這對可訪問性非常不利。

不僅如此，如果圖像因為某種原因沒有加載，並且它有一個清晰的alt，它將作為一個回退顯示。同樣通過圖例來演示一下。

<code>

/<code>

當src無效，圖片沒有加載時。第一個沒有alt屬性，而第二個是空的alt屬性，下面是它們的視覺效果：

沒有alt的圖片仍然保留了它的空間，這很混亂，而且不利於訪問。而另一個alt為空的圖片，會摺疊起來看起來像一個小點，這裡因為它有邊框。

但是，當alt屬性有值，它看起來是這樣的：

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

響應式圖像

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

1.srcset屬性

<code>/<code>

這很簡單。對我來說，srcset可以根據屏幕寬度顯示多個圖像尺寸，這並不是一種完美的解決方案。它讓瀏覽器選擇合適的圖像，而我們對此無能為力。

2.picture 標籤

另一種選擇是使用<picture>元素。我更喜歡這種方式，因為它更容易預測。/<picture>

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

調整圖像大小

對於，我們還可以使用的一組很好的特性object-fit和object-position。它們可以控制的大小和定位，就像CSS背景圖像。

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

<code>img {
    object-fit: cover;
    object-position: 50% 50%;
}/<code>

CSS背景圖片

使用CSS背景顯示圖像時，它需要一個具有內容或特定寬度或高度的元素。通常，背景圖像的主要用途應該是用於裝飾目的。

何使用 CSS 背景圖片

首先，我們需要一個元素

<code>// html
Some content


// css
.element {
    background: url('cool.jpg');
}/<code>

多個背景

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

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

隱藏圖像

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

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

可訪問性問題

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

非開發人員無法下載

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

偽元素

可以將偽元素與CSS背景圖像一起使用，例如在圖像頂部顯示覆蓋圖。對於這是不可能的，直到我們為疊加層添加單獨的元素。

SVG Image

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

你是否注意到了prepareAspectRatio？它的作用是可以讓圖像佔據SVG的整個寬度和高度，而不會被拉伸或壓縮。

當<image>寬度較大時，它將填充其父級（SVG）寬度而不會拉伸。/<image>

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

可訪問性問題

關於SVG 的可訪問性，這使我想起了

我們還可以使用<desc>元素/<desc>

非開發人員無法下載

必須先檢查元素並複製圖像的URL，然後才能下載嵌入SVG的圖像。但是，如果我們要防止用戶下載特定的圖像，這可能是一件好事。

用例

Hero Section

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

一些要求：

• 背景圖片能夠動態替換
• 圖片有一個覆蓋層，讓閱讀更容易
• 圖像有三種尺寸:小號、中號和大號。每一個都是針對一個特定的視口。

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

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

解決方案1

通過使用多個CSS背景，我們可以將一個背景作為疊加層，將另一個背景作為實際圖像。請看下面的CSS：

<code>.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;
}/<code>

雖然此解決方案有效，但可以使用 JavaScript 動態更改背景圖片。見下面：

<code>   style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  
//<code>

這裡添加了一個內聯樣式。雖然這是可行的，但它看起來很醜，而且不實用。

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

<code> 

  
//<code>

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

小結：

1. 這種方案只有在圖片不重要才適用
2. 這種方案只適合一些靜態網站，因為沒有從後臺拉取圖片

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

解決方案2

該方案是可以使用一個 img 標籤：

<code>
  
Using Images in CSS

  
An article about which and when to use

  
//<code>

在CSS中，我們需要將圖片絕對定位在內容下方，並且還需要使用偽元素作為疊加層。

此解決方案的優點在於，可以輕鬆更改圖片的src屬性。同樣，如果圖像很重要，它將會更加有用。

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

<code>.hero img {
    /* Other styles */
    background: #2962ff;
  }/<code>

在圖片源路徑不對時，背景顏色是一個代替方面。

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

網站 Logo

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

• img -> png,jpg, orsvg
• 內聯SVG
• 背景圖

接下來，我們來看看哪種方式更合適。

帶有很多細節的 Logo

當徽標具有許多細節或形狀時，將其用作嵌入式SVG可能沒有好處。我建議使用，圖像類型可以是png，jpg或svg。

需要動畫的簡單 Logo

我們有一個簡單的logo ，其中包含形狀和文字。懸停時，形狀和文本需要更改顏色。怎麼做？對我來說最好的解決方案是使用嵌入式SVG。

HTML

CSS

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

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}/<code>

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

響應 Logo

這讓我想起了Smashing Magazine的logo。我喜歡它從一個小圖標變成一個完整的徽標。參見下面的模型：

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

<code>

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

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

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

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

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

帶有漸變的Logo

當 logo 具有漸變時，從Illustrator或Sketch等設計應用程序將其導出的過程可能並不完美，有時會中斷。

使用SVG，我們可以輕鬆地為logo添加漸變。我添加了<lineargradient>並將其用作文本填充。/<lineargradient>

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

用戶頭像

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

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

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

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

我們有幾個選擇

• img元素
• img 和 div 元素
• div與CSS背景
• SVG image

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

使用 HTML ``

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

<code>.avatar {
    border: 2px solid #f2f2f2;
}/<code>

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

使用 `` 和 `

` 元素

現在的問題是，要添加內部邊框，我們不能使用box-shadow，因為它無法在圖像上使用。解決方案用

包裹 頭像中，並添加專用於內部邊框的元素。

HTML

<code>

     
     

/<code>

CSS

<code>.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); 

}/<code>

通過在

上使用透明度10%黑色的邊框，我們可以確保邊框與深色圖像融合，並且只有在圖像較亮的情況下才可見。參見下面的模型：

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

使用`

`與CSS背景

如果我要使用

來顯示頭像，則可能表示該圖像具有裝飾性。我記得一個用例，它是分散在頁面中的隨機頭像。

HTML

<code>
/<code>

CSS

<code>.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);
}/<code>

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

使用 SVG `<image>`/<image>

對我來說，這是最有趣的解決方案。我在檢查Facebook的新設計時注意到了它。

先對其進行剖析，它包含以下內容：

• 用於將圖像剪切為圓形(circle )的蒙版(mask )
• 對其應用了蒙版的組
• image本身帶有preserveAspectRatio =“ xMidYMid”
• 用於內邊界的圓

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

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

---

原文：https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

"

閱讀更多 前端小智 的文章

關鍵字: 瀏覽器 技術 屬性