文章彙整

響應式圖片的解決方案:利用html5 標籤在不同裝置載入不同解析度圖片

By Ellen 3 years agoNo Comments
首頁  /  網站設計與開發  /  響應式圖片的解決方案:利用html5 標籤在不同裝置載入不同解析度圖片

常用的響應式圖片解決方案在製作響應式網頁使用圖片時,一般作法有二種

image01

一張圖片設定 max-width: 100%;以確保圖片不會超出畫面。

或是同時載入多張圖片,並在不同的解析度的裝置底下利用display的屬性來控制圖片的顯示與否。

這種方式的好處是可以針對不同的裝置設計不同的圖片,以期達到更好的視覺效果。

缺點就是資料量大增,載入的時間加長,對行動裝置的用戶來說更可能增加行動數據傳輸的費用。

<picture>

現在 html5 有了新的標籤可以使用、可以針對不同解析度的裝置、設定載入不同的圖片。既可以更符合設計、又可以節省載入的時間。

<picture>
    <source srcset="large.jpg" media="(min-width: 960px)">
    <source srcset="middle.jpg" media="(min-width: 720px)">
    <source srcset="small.jpg" media="(max-width: 480px)">
    <img src="default.jpg" alt="My default image">
</picture>

上面是一個基本的應用、依不同的螢幕解析度指定使用不同的圖片,設定方法就和css的media queries 一樣。

<picture>
    <source srcset="large.jpg, large-2x.jpg 2x" media="(min-width: 960px)">
    <source srcset="middle.jpg, middle-2x.jpg 2x" media="(min-width: 720px)">
    <source srcset="small.jpg, small-2x.jpg 2x" media="(max-width: 480px)">
    <img src="default.jpg" alt="My default image">
</picture>

上面的例子可以分辦高解析的螢幕<picture>

<picture>
<source type="image/webp" srcset="default.webp">
<img src="default.jpg" alt="My default image">
</picture>

上面的例子可以分辦瀏覽器是否支援webp格式、當瀏覽器支援webp格式就直接顯示default.webp,反之則顯示default.jpg。

 

<picture>的使用規則:

  1. source的順序很重要:當瀏覽器讀取到符合條件的描述時、就會直接忽略之後的描述。
  2. 在<picture>結束前放上一個標準的<img>:為了那些不支<picture>的舊版瀏覽器、也能正確的顯示圖片。

Picturefill

目前支援<picture>的瀏覽器只有:Firefox 38+, Chrome 38+, Opera 27+。為了讓舊版瀏覽器也能支援<picture>,我們可以使用Picturefill。Picturefill是一款專門讓舊版瀏覽器也能支援<picture>的js

picturefill

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

直接在網頁中載入picturefill.js就可以了!

因為IE9無法判別在<picture>裡的<source>,所以我們必須多加一層<video>,好讓IE9可以讀取到<source>的描述資訊。以下就是針對IE9 的解決方法。

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="large.jpg" media="(min-width: 960px)">
    <source srcset="middle.jpg" media="(min-width: 720px)">
    <source srcset="small.jpg" media="(max-width: 480px)">
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <img src="default.jpg" alt="My default image">
</picture>

現在你也可以在你的響應式網站使用<picture>標籤,你會發現他是多麼的簡單又好用。

歐斯瑞有限公司編寫製作

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。