Creating Retina Images for Website

最近在撰寫一個給 iOS UIWebView 用的迷你網站，在等待設計師繪製網站圖片的時候，好奇地看起來了一些關於視網膜螢幕 (retina display) 的資料。順便找了些用 CSS 顯示 retina image 的資料。

感謝行動平台上的瀏覽器對 CSS3 的普遍支援性，透過 CSS3 的 media queries 來分辨平台就可以切換內容了。

.navbar {
	background-image: url('../img/button01.png');
	background-size: 320px 49px;
}

/* -- for Retina Display -- */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and    (-moz-min-device-pixel-ratio: 2),
       only screen and      (-o-min-device-pixel-ratio: 2),
       only screen and         (min-device-pixel-ratio: 2) {
	.navbar {
		background-image: url('../img/button01@2x.png');
		background-size: 320px 49px;
	}
}

檔案命名依慣例在高解析度圖的檔名後面附加 @2x 文字做為辨識，小圖是 320px x 49px，大圖是 640px x 98px，後者指定為顯示一半大小。這樣的寫法會先累到設計師，各種圖示、影像，凡是要支援高解析度的素材都要準備兩套。要注意的是以上的寫法因為一般圖 (Line 1 ~ 4) 並沒有用 @media 包起來，所以要寫在 @media 前面，不然會因為 CSS 先後順序的關係造成只讀一般圖片。