第五章——認識媒體：為你的頁面增加圖像

2024-04-27 15:12:47

字體：大中小

來源：轉載

供稿：網友

瀏覽器如何處理圖像

瀏覽器看到一個<img>元素時，相比其他標記，會做不同的處理：瀏覽器在頁面中顯示圖像之前，必須先獲或這個圖像。下面通過一個例子來說明瀏覽器是如何處理圖像的。比如，服務器中的lounge文件夾中有這樣一個index.html文件：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Head First Lounge Elixirs</title> </head> <body> <h1>Our Elixirs</h1> <h2>Green Tea Cooler</h2> <p> <img src="../images/green.jpg" /> Chock full of vitamins and minerals, this elixirs combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root. </p> <h2>Raspberry Ice Concentration</h2> <p> <img src="../images/lightblue.jpg" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp. </p> <h2>Blueberry Bliss Elixir</h2> <p> <img src="../images/blue.jpg" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time. </p> <h2>Cranberry Antioxidant Blast</h2> <p> <img src="../images/red.jpg" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir. </p> <p> <a href="../lounge.html">Back to the Lounge</a> </p> </body></html>

當我們請求這個頁面時，瀏覽器是如何獲取和顯示這個頁面的呢？敬請期待：

首先，瀏覽器從服務器獲取文件“index.html”。接下來，瀏覽器讀取”index.html“文件，顯示這個文件，發現其中有4個圖像需要獲取。所以它需要從Web服務器逐個得到這些圖像，先從”green.jpg“開始。獲取到”green.jpg“之后，瀏覽器顯示這個圖像，然后轉向下一個圖像：“lightblue.jpg”。現在瀏覽器已經獲取了“lightblue.jpg”，所以它會顯示這個圖像，然后轉向下一個圖像：“blue.jpg”。對頁面上的每一個圖像都會重復這個過程。

所以瀏覽器需要向服務器發送5個請求。

圖像格式

Web上最常用的3種圖像格式：

JPEGPNGGIF

那么，JPEG、PNG和GIF有什么不同呢？現在先初略了解一下。

JPEG 最適合連續色調圖像，如照片。可以表示包含多達1600萬種不同的顏色。這是一種“有損”格式，因為縮小文件大小時會丟掉圖像的一些信息。不支持透明度。文件比較小，以便Web頁面更高效地顯示。不支持動畫。PNG PNG最適合單色圖像和線條構成的圖像(如logo、剪貼畫和圖像中的小文本)。PNG可以表示包含上百萬種不同顏色的圖像。PNG有3種：PNG-8(支持256種顏色)、PNG-16(支持數千種顏色)和PNG-32(支持數百萬種顏色)，取決于你需要表示多少種顏色。PNG會壓縮文件來縮小文件大小，不過不會丟掉信息。所以這是一種“無損”格式。允許將顏色設置為“透明”，使圖像下面的東西可以顯示出來。與相應的JPEG文件相比，PNG文件更大一些，不過取決于使用的顏色數，可能比相應的GIF文件小，也可能更大。GIF 類似于PNG，GIF最適合單色圖像和線條構成的圖像(如logo、剪貼畫和圖像中的小文本)。GIF可以表示最多256種不同顏色的圖像。GIF也是一種“無損”格式。GIF也支持透明度，不過只允許一種顏色設置為“透明”。GIF文件往往比相應的JPEG文件大。支持動畫。

總結：

照片和復雜圖像使用JPEG；單色圖像、logo和幾何圖像使用PNG或GIF。如果把一個透明的圖像放在Web頁面中，則要確保這個圖像的蒙版顏色與Web頁面的背景色一致。GIF和PNG圖像格式允許建立一個有透明背景的圖像。如果把一個有透明背景的圖像放在一個Web頁面中，圖像后面的東西(如頁面的背景色)就會透過圖像的透明部分顯示出來。

`<img>`元素

<img>元素示例如下：

<img src="images/drinks.gif"><img>元素是一個內聯元素。它不會在前面或后面插入換行。因此如果HTML中有多個圖像，瀏覽器窗口足夠寬時，瀏覽器會把它們并排擺放。那些更大的照片之所以沒有并排擺放，是因為瀏覽器沒有足夠的空間來并排顯示它們。實際上，它只能從上到下顯示各個大圖像。瀏覽器總是在塊元素前后在垂直方向上顯示間距。src屬性指定了在Web頁面上顯示的圖像文件的位置。<img>元素是一個void元素。更確切地講，void元素是指HTML頁面中在開始標記和結束標記之間沒有任何內容的元素。沒錯，圖像也是內容，不過<img>元素只是指向圖像。圖像并不是HTML頁面本身的一部分。實際上，瀏覽器顯示頁面時，圖像會取代<img>元素。另外要記住，HTML頁面是純文本，所以圖像絕對無法直接作為頁面的一部分。它是單獨存在的。

我們要記住src屬性不只是用于相對鏈接，還可以在src屬性中放入URL。圖像與HTML頁面一同存儲在Web服務器上，所以Web上的每一個圖像都有自己的URL，就像Web頁面一樣。如果要指向另一個不同網站上的圖像，通常要使用這個圖像的URL(要記住，對于相同網站上的鏈接和圖像，最好使用相對路徑)。要使用URL鏈接一個圖像，如下所示：

`<img>`元素的alt屬性

如果瀏覽器無法顯示頁面上的圖像，可以使用<img>元素的alt屬性為訪問者提供一些指示，告訴他們圖像里有什么信息。可以這樣做：

<img src="http://wickedlysmart.com/hfhtmlCSS/trivia/pencil.png" alt="The typical new pencil can draw a line 35 miles long.">alt屬性需要指定描述這個圖像的一些文本。如果圖像未能顯示，就會使用這個文本來取代它。