Web中的圖像技術全面總結，長文乾貨！

前端開發人員在構建網站時需要做出的決定之一就是添加圖片的技術。它可以是HTML

，也可以是通過CSS背景生成的圖片，也可以是SVG 。選擇正確的技術很重要，並且可以在性能和可訪問性方面發揮巨大作用。

最簡單的情況下，圖片元素必須包含 src 屬性。

<code>/<code> 

1.1 設置寬度和高度屬性

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

<code>/<code>

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

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

1.2 用CSS隱藏圖片

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

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

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

1.3 可訪問性問題

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

但是，如果不需要 alt 描述，請不要刪除，如果刪除了就會讀出圖片的src！這對可訪問性(無障礙)環境是非常不利的。

不僅如此，如果圖片因為某種原因沒有加載，並且它有一個明確的 alt，它將作為一個備用值回退顯示。既然有一些有趣的事情我想讓大家知道，那我們就從視覺上說說吧。

我們有以下圖片：

<code>
/<code> 

src 無效，圖片沒有正常加載。第一個沒有 alt 屬性，而第二個是空的 alt 屬性。你能期待這個視覺效果嗎？

沒有 alt 的圖片仍然保留其空間，這很混亂，並且對可訪問性不利。雖然另一個摺疊了，以適應其空的 alt 屬性的內容，但由於它的邊框，導致了它作為一個小點出現。

但是，當存在 alt 屬性值時，它將如下所示：

這不是很好的反饋嗎？另外，當圖片源發生故障時，可以向其中添加偽元素。

1.4 響應式圖片

的優點在於，可以針對特定視口大小將其擴展為具有多個版本的圖片。例如，這可用於商品圖片。

我們有兩種不同的方式來生成一組響應式圖片：

srcset 屬性

<code>/<code>

這是一個簡單的例子。對我來說，我不認為使用 srcset 是根據屏幕寬度顯示多個圖片大小的完美解決方案。只能讓瀏覽器選擇合適的圖片，而我們對此無能為力。

HTML Picture 元素

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

1.5 調整圖片的大小

我們可以使用 的一大優點就是 object-fit 和 object-position 屬性。它們讓我們可以控制

的內容如何調整大小和位置，就像CSS背景圖片一樣。

object-fit 的可能值為：fill，contain，cover，none，scale-down

可以這樣使用：

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

現在，我們已經介紹了 元素，是時候繼續探索第二種技術了。

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

2.1 如何使用CSS背景圖片

簡單來說，我們需要一個元素。

<code>
Some content
/<code>

<code>.element {
  background: url('//p2.ttnews.xyz/5fdc671e3204792926c602c4.jpg');
}/<code>

2.2 多背景

使用CSS背景圖片的好處是可以輕鬆地控制多個背景。考慮下面的例子：

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

2.3 隱藏圖片

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

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

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

2.4 可訪問性問題

如果使用不正確，背景圖片會對無障礙瀏覽不利。例如，將其用於文章的大拇指，這對文章至關重要。

2.5 非開發人員無法下載

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

2.6 偽元素

可以使用偽元素與CSS背景圖片一起使用，例如，在圖片的頂部顯示一個疊加元素。對於 來說，除非我們為覆蓋層添加一個單獨的元素，否則無法做到這一點。

SVG被認為是圖像，它的最大功能在於縮放而不影響質量。另外，使用SVG，我們可以嵌入 JPG，PNG 或 SVG 圖像。請參見下面的HTML：

<code>
  
/<code>

你是否注意到了 prepareAspectRatio？這樣一來，可以使圖像佔據SVG的整個寬度和高度，而不會被拉伸或壓縮。

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

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

2.7 可訪問性問題

關於SVG的可訪問性，這使我想起了 元素。例如，我們可以像下面這樣添加它：

<code>
  A photo of blueberry Cheescake
  
/<code>

我們甚至可以使用 元素：

<code>
  A photo of blueberry Cheescake
  A meaningful description about the image
  
/<code>

2.8 非開發人員無法下載

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

4.1 Hero Section

在構建 hero section 時，我們有時需要在標題和其他內容下面有一個圖像。如下圖所示：

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

• 在與後端CMS整合時，圖片應該是很容易動態變化的。
• 其上方有一個覆蓋層，有助於使內容易於閱讀。
• 圖像有三種尺寸：小、中和大。它們每個都用於特定的視口。

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

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

Hero - 解決方案1

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

<code>.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('//p2.ttnews.xyz/5fdc671e3204792926c603b8.jpg');
  background-repeat: no-repeat;
  background-size: 100%, cover;
}/<code>

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

<code>
   
/<code>

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

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

<code>
   
/<code>

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

解決方案1要點：

0. 解決方案只有在圖像不重要的情況下才是好的
1. 當無法從後端CMS動態更改圖片時

Hero - 解決方案2

對於此解決方案，我們將使用HTML圖像。見下面：

<code>
  
Using Images in CSS
  
An article about which and when to use
  
/<code>

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

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

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

另外，我喜歡使用HTML 的地方是可以在圖片沒有加載的情況下添加一個回退方法，這個回退至少可以保持內容的可讀性。

<code>.hero img {
  /* 其他樣式 */
  background: #2962ff;
}/<code>

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

4.2 網站Logo

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

--> png，jpg，或者 svg

內聯SVG

背景圖像

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

帶有詳細信息的Logo

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

一個需要動畫的簡單Logo

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

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

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

響應式Logo

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

完美的解決方案是 元素，可以在其中添加Logo的兩個版本。見下文：

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

。

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

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

簡單明瞭的解決方案。

漸變Logo

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

使用SVG，我們可以輕鬆地為徽標添加漸變，我添加了

並將其用作文本填充。

<code>
  
    
      
      
    
  
  
    
    
      Rect
    
  
/<code>

4.3 用戶頭像

對於用戶頭像，它們有很多形狀，但最常見的是矩形或圓形。在這個用例中，我很有興趣解釋一個你可能會覺得有用的重要技巧。

首先，我們來看看下面的模擬圖。注意，我們有一個完美的頭像，而且它們是100%的清晰。

但是，當用戶上傳半白色頭像或非常淺的頭像時，此設計將失敗。

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

我們有兩種選擇可以做到這一點：

• 元素
• 具有
• 具有CSS背景的
• SVG

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




使用 HTML

您可能想到的第一件事就是添加邊框，對嗎？讓我們來探討一下（很抱歉，在下面的部分中，您可能會看到很多我的臉）。

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

我們的目標是要有一個與圖像相融合的內部邊框，具有實邊是不實際的。




使用具有

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

<code>
  

/<code>

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




具有CSS背景的

如果我要使用

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

我們可以有這樣的東西：

<code>
/<code>

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




SVG

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

<code>
  
    
  
  
    
    
  
/<code>

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

0. 用於將圖像剪切為圓形的蒙層
1. 對其應用了蒙層的group
2. 圖像本身帶有 preserveAspectRatio = "xMidYMid"
3. 用於內邊框的圓圈

在CSS中，我們將具有以下內容：

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

這就是用戶頭像用例的全部內容。




4.4 帶圖標的輸入框

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

<code>

  Full name
  
/<code>

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

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

要更改焦點上的圖標顏色，我們可以使用url編碼的SVG，並且很容易做到這一點。Yoksel的這個工具很棒。




4.5 CSS 打印

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

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




避免使用圖像作為CSS背景

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

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

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

但是，使用HTML

會更安全，因為它可以打印而不會出現任何問題。

全文完。

如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。

私信回覆：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！

#科技青年# #432頭條知識節#

收藏

舉報

杭州程序員小張

掃碼下載今日頭條