【酷！視網膜屏幕技術在網頁設計中的運用】

推薦關注翻譯哥：@張二杏 ?? 會有很多一手熱門資訊從他那里翻譯：）

隨著蘋果產品的不斷創新和增加，(Retina)視網膜屏幕技術的使用也越來越廣泛。如今，我們有具備視網膜屏幕的iPhone，iPod，ipad和 Mac。這些產品擁有大量的用戶，就像您周圍看到的，這群龐大的用戶正逐漸深入到人們的生活。
接下來，咱們就看看如何把這項技巧運用在網頁設計當中，讓你的作品也看起來更加銳利，清晰。

為什么要支持視網膜屏幕？

起初，我覺得視網膜屏幕并沒有多大的用戶基礎，畢竟這是個新技術, 然而，當我瀏覽了一下軟件分析數據，發現蘋果的所有設備都已經支持了視網膜屏幕技術，包括Macbook 13寸和15寸的使用者，再加上Chrome， firefox，IE瀏覽器的支持，使得視網膜屏幕技術的使用者越來越龐大起來，所以作為網頁開發者不得不重視他們的視覺體驗了。

如何制作圖片

你會猜測視網膜技術是把圖片存儲成高分辨率的，提高單位面積的像素率 ？呵呵，這可不是關鍵。其實，你只需要做一步，把你的圖片存成他的像素的兩倍大小，也就是把一張200x200的圖片存成400x400的。然后把大圖的尺寸改成小圖的，這樣你的圖片就會在高分辨率屏幕上看起來犀利很多。
上面的方法聽起來很簡單，但是我們如何去做呢？

AI里的圖片

矢量圖片是最佳途徑。假如我們有個logo是AI的或eps的，這樣我們改起來很方便，因為我們可以隨意的調整他的大小，無論是在AI里還是在PS里，然后導出就可以了（在ps里可以粘貼成適量對象，我覺得這很廢話，相信各位都會）。

Photosho里的矢量工具

但是，我們如何用photogshop做呢？photoshop不是矢量軟件，這不表示ps不能做矢量圖片，形狀圖層就可以制作出完美的矢量圖像，放大兩倍完全不是問題。

快速處理圖片

現在有個關鍵問題，設計師們放大或縮小圖片不是什么問題，但是如果你 已經做好了你的網頁，然后你想讓這個頁面也支持視網膜屏幕，我想你也不能毫無辦法的把頁面上的圖片去重新做一份兩倍大小的吧。
盲目的放大 又會產生鋸齒。下面就是我的辦法：在圖像—圖像大小里面有個選擇叫“鄰近”。 這個操作對于小圖標和單色圖像很有用處，雖然不如矢量圖片放大兩倍之后 的效果好，不過在時間緊急的時候是個不錯的選擇。

將大圖縮小成小圖的辦法是否可行？

你也許會問我做一張大圖，然后縮小一倍，這樣不行嗎？ 理論上來說，在印刷領域這是沒啥問題的，不過在網頁設計當中，是以像素為基礎的，以至于我們縮小圖片之后，也會產生鋸齒，而且圖片越小鋸齒越明顯！

將圖片用代碼的方式表現

當我們把這一大一小兩張圖片都準備好了，就可以把他們加到網頁里面了， 我們首先重命名一下那些大圖，比如s.jpg。

Javascript這樣做

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

第一是很簡單的，把圖片關聯到retina.js.script，如上所示：

CSS這樣做

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
	header h1 a {
		background-image: url(images/blogspoon-logo@2x.png);
		background-size: 164px 148px;
	}
}

然后，手動的添加css樣式，添加代碼：(如上) min0-device-pixel-ratio:2，是看設備是否是高分辨率的視網膜屏幕 background則是設置背景圖片的尺寸。

HTML這樣做

<img src="images/snarf@2x.jpg" width="300px" height="150px" />

上述的css辦法對背景圖片來說很給力，但是對于頁面的圖片來說，你需要去調整一下<img>標簽。調整圖片的高和寬的數值，使圖片大小成為標準大小 （如上）

好嘞！完成以上操作，您就可以讓訪問者通過他們的視網膜屏幕更清晰銳利的訪問您的網頁作品了，是不是很酷？趕緊來改造您的頁面吧。

轉摘請附上優設地址和翻譯人信息，謝謝。
譯文：http://www.czdes.cn/create-retina-graphics/?????????? 譯者：@張二杏?
原文：http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs