# HTML5 <picture> 使用方法 ## picture 讓瀏覽器判斷螢幕尺寸並提供不同的圖片，省去寫 css/js 來控制 rwd 圖片，若瀏覽器不支援 `<picture>`，則以`<img>`作為圖片來源。 **常見使用案例：** - 圖像方向（art direction）： 根據不同的 media 狀況裁切或調整圖片（例如在較小的螢幕上，載入原本有複雜細節圖片的較簡單版本圖片） - 提供替代的圖片格式：以應對某些特定格式不被支援的情況 - 節省頻寬並加速頁面載入速度：透過針對觀看者的裝置載入最適當的圖片做到這點 > [name=Alvin]很方便新標籤，特別是使用外掛(ex:slick)或層級複雜時，省去了用 js 或 css 去切換圖片，但要注意不相容IE瀏覽器。