網頁圖片達到高低解析度交換的作法Retina

Retina這最早的由蘋果公司(apple)設計和委託製造的顯示器(Retina display)所出現的名詞，特色是具有足夠高像素密度而使得人體肉眼無法分辨其中單獨像素點的液晶螢幕 而網頁的圖片的運用上，怎麼實現高解析度的圖片呢，網路上開發源始碼可以看看retina.js(http://retinajs.com/)是怎麼運用?

運作原理為：當使用者到達網頁頁面時，retina.js進行為此頁的每張圖片進行檢查在Server端是否有相對應的高解析圖片，如果高解析圖片存在，則retina.js將進行將原圖與高解析圖片進行下載交換，以達到高畫質的圖片。

例如在網頁上某一處的圖片語法為:

<img src="/images/lowImage.png" />

而在Server相同的資料夾下也有一張名為[email protected]的圖片

此時retina.js就會進行下載[email protected]取代lowImage.png。

實作說明：

一、請先下載retina.js放到Server上並建立連結，這樣就完成了。

<script type="text/javascript" src="/scripts/retina.js"></script>

(注意：需放在</body>前)