如何使用HTML5 實現響應式圖片

<picture>是一個新的HTML5標籤、我們可以使用它來設定在不同條件下(螢幕寬度、高度、方向、像素密度)載入不同的圖片。

當我們在設計響應式網頁時、對於圖片的處理方式通常會使用較高解析的圖片、再利用CSS將圖片縮小以符合小螢幕的畫面。以下的CSS可以將圖片限制在範圍裡、並且能夠維持圖片的長寬比例。

img {
    max-width: 100%;
    height: auto;
    }


以視覺設計的角度來看、在不同尺寸的瀏覽器中載入不一樣的圖片、效果遠高於使用同一張圖片。

 


使用同一張圖片在不同的瀏覽器間放大縮小

在不同的瀏覽器間使用不同的圖片

而且圖片在縮小之後容易看不清楚,如果是加上文字的圖片、文字更是會變得無法辨識。此外、對手機用戶來說、下載大圖片實在是浪費傳輸量的作法。

另外一種作法是預先載入多張不同尺寸的圖片、再利用display: none 將不用的圖片暫時先隱藏。
這種作法雖然可以讓圖片在各種不同尺寸的螢幕中都有很好的效果、但是卻需要載入多餘的檔案、增加網頁載入的時間、也浪費傳輸量。

新的HTML5 <picture>標籤

<picture>是一個新的HTML5標籤、不需要JAVASCRIPT也不需要CSS、單純HTML5就可以達成響應式圖片的設定。

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img src="default_landscape.jpg" alt="My default image">
</picture>

 使用<source>為<picture>指定載入圖片資訊

<picture>本身只是一個容器、沒有自己的屬性。而被包含在其中的<source>則是用於載入圖片,相關的設定如下:

srcset (必要)

指定替代圖片的路徑

media

用法與CSS中的媒體查詢相同。(e.g. max-width, min-width, max-height, min-height, orientation)

sizes

指定圖片的尺寸。(e.g. sizes="100vw") 或是同時指定媒體查詢及圖片尺寸。(e.g. sizes="(max-width: 30em) 100vw")

type

指定替代圖片的格式,(e.g. type="image/webp" or type="image/vnd.ms-photo")

<source>的順序很重要、瀏覽器會直接使用第一個符合的 <source>而忽略掉後續的標籤。

在<picture>結束前指定一個<img>

最後再指定一個<img> 元素作為<picture>標籤中的預設圖片、當瀏覽器不支援<picture>標籤或是沒有符合的<source>時,則直接顯示<img> 。

<img>一定要放在最後、因為瀏覽器會忽略掉所有在<img>之後的<source>。
關於<picture>的詳細說明可以參考:http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-picture-element

Picturefill

<picture>是新的html5標籤,目前支援瀏覽器只有 chrome 38+ , Firefox38+ 和Opera27+。我們可以使用Picturefill來讓一些還不支援<picture>標籤的瀏覽器也能支援它。
Picturefill的使用很簡單、只要在<head>標籤裡載入Picturefill就可以了。

<script src="picturefill.js"></script>

針對IE9有一個小bug需要處理、我們需要在<source>外再加一個<video>標籤。

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

 

套件名稱:Picturefill
套件網址:http://scottjehl.github.io/picturefill/

 

文章來源:http://blog.shihshih.com/how-to-use-html5-picture-element-to-achieve-responsive-image/

2 Responses

  1. Dear, 感謝您分享我的文章,我有注意到您提供了文章的出處,請將文章來源連結回我網站的文章好嗎?
    • 陳俊偉
      好的,抱歉我馬上補上喔

Leave a comment