<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