# 1-Retina 裝置對應圖片的內容重點
(4K 裝置放 1080 片源影片)

# 2-使用的硬體工具與 Retina 的圖片關係
– imac 27 吋 hidip 與一般 dip 的顯示差異
– 軟體設定 (低解析度打開) 對效能、截圖與畫面呈現上的影響
– 效能與取得圖片上的切換方式
https://github.com/Eun/DisableMonitor

# 3-Adobe XD 針對切版的圖片輸出設定重點
– Adobe XD ios @x 設定差異
Adobe XD 官方說明文件
https://helpx.adobe.com/tw/xd/help/export-design-assets.html
https://helpx.adobe.com/cn/xd/help/export-design-assets.html
Adobe XD导出图片模糊？设置错误啦（切图详解）
https://xd.94xy.com/xdjiaocheng/217.html
– 入圖時的圖片 (1000px[實大] => 500px[畫版])
– 針對 @x 準備圖片素材的重點 (倍率的換算)
@x2 *2 =>
@x3 *2*2 =>
– 色彩與失真與像素補點

# 4-網頁開發針對 img 標籤的處理方式

## 4-1-HTML5 Tag
– bg-img-set
– bg-img-webkit-img-bg
– imgPictureTag
– imgTagSrcset

## 4-2-jQuery Plugin
– imgRetina
http://imulus.github.io/retinajs/
https://github.com/strues/retinajs
窗口變化時不會針對 img 重新渲染與運算，會以第一次運算的高度固定後，直接圖片變化寬度，在 img Tag 是直接寫入 @x 的高度寬度的數值。

相關資源與參考資料

Retina and Responsive HTML5 Images
https://brianflove.com/2014/08/07/retina-display-images/

03noBLOG-srcset 支援
https://blog.othree.net/log/2012/12/02/srcset/

用 srcset 屬性做簡單的 Responsive Image
http://blog.zhusee.in/post/248199/basic-responsive-image-with-srcset-property