在以前的網頁製作上需要針對不同的裝置來搭配製作不同解析度的網頁，但現在有了響應式RWD來設計網頁只需要製作一份網頁，即可以將網站以符合各種裝置的解析度來呈現方便性相對的提高，已無需再進行製作各種解析度的網頁，但如果是原本符合電腦版的橫向的圖片，想要轉換到手機上時使用直式的圖片，這邊該如何去實現呢？在HTML5中有新的<Picture>標籤可以來使用，可以藉由判斷解析度的裝置來進行載入不同的圖片又可以節省載入時間。
<picture>標籤的使用規則：
- 描述的順序：當瀏覽器讀取到符合條件的描述時、就會直接忽略之後的描述。
- 在<picture>結束前放上一個標準的<img>：為了避免舊版瀏覽器無法使用<picture>也能正常的顯示圖片。
- 可支援<picture>的瀏覽器：Firefox 38， Chrome 38，Opera 27。
<picture> 使用範例：
<!-- 分手機版與電腦版的圖面 設定值1000PX以上 -->
<picture>
<!------- 區分裝置設定圖片(手機或電腦) ------->
<!-- 手機裝置 -->
<source srcset="assets/styleguide/Straight_banner.jpg" media="(max-width: 1000px)">
<!-- 電腦裝置 -->
<source srcset="assets/styleguide/Titlebanner.png" media="(min-width: 1001px)">
<!-- Default設定值 -->
<img class="img-fluid d-block mt-5" width="100%" src="assets/styleguide/Titlebanner.png">
</picture>
Picturefill.js 使用範例如下：
如果要讓舊版瀏覽器也能支援<picture>，這邊可以使用Picturefill.js，直接在網頁中加入picturefill.js即可使用。
<script src="picturefill.js"></script>
<picture> IE9解決方案 ：
另外因為IE9無法判別在<picture>裡的 <source>標籤，所以必須要在多加一層<video>標籤，IE9才有辦法讀取到<source>的資訊。
<picture>
<!-- 區分裝置設定圖片(手機或電腦) -->
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="assets/styleguide/Straight_banner.jpg" media="(max-width: 1000px)">
<source srcset="assets/styleguide/Titlebanner.png" media="(min-width: 1001px)">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<!-- Default設定值 -->
<img class="img-fluid d-block mt-5" width="100%" src="assets/styleguide/Titlebanner.png">
</picture>
延伸閱讀：