如何一步步把網站Retina優化

時間 2019-11-08

原文原文鏈接

隨着高清屏幕、高分辨率屏幕愈來愈流行，例如MacBook Retina機型、iPad Air系列，這些新生機器有着很高的PPI，對網頁的清晰度要求很高，因此愈來愈多的站長都不得不面臨一個問題，那就是把本身的網站作到高分辨率適配 (Retina-Ready)。由於低清的網頁在高分辨率屏幕上看起來很糟糕，對用戶體驗是一個很大的損害。相反，高分辨率適配的網站看起來則更加美觀清晰，對用戶體驗有很大的提升。因此隨着科技的發展，Retina適配 (Retinafy)是一種必然趨勢，各位不妨如今就作好這個準備。css

指引 / 跳至html

Retina 適配的優點

網站爲高清屏幕優化有什麼優點呢？首先有大量的網站沒有Retina優化，而且有着愈來愈多的互聯網流量來自平板和手機電腦，這些機型都是很是提早就擁有高清屏的。css3

之因此廣大的站長還不動心Retina優化本身的網站，大多由於他們管理網站所用的電腦還不是高清屏幕，因此暫時沒有體驗到高清屏下低清網頁的模糊感受。可是若是能在如今就鶴立雞羣，把本身的網站作到高清優化，是很是尊重用戶體驗的，能夠得到更多的回頭客和滿意度。web

下面就來從網站的一些基本角度出發，來展現如何一步步的讓網站Retina優化。瀏覽器

圖片和CSS背景

使用圖片的情形通常是這兩個，一個是img標籤，另外一個是CSS背景。前者比較直接，是最經常使用的方式。要在img標籤實現Retina優化，你只需提供一個圖片的雙倍尺寸版本，並以50%的大小貼在網頁裏。app

例如，你有一張大小爲100X100px的名爲picture.png的圖片，曾經以svg

<img src="picture.png" />佈局

的形式貼在網頁上，如今爲了Retina優化，你須要製做一張一樣清晰的可是大小是200X200px的雙倍大小圖片，名字最好也取爲picture.@2x.png，並以post

<img src="picture.@2x.png" alt="" width="100" height="100" />字體

的形式貼到網頁上。這樣一來，本來200px的大小以100px顯示，在高清屏幕上就獲得了Retina優化到效果。

Retina 圖片命名規範

這種專爲優化而生的圖片有一套如今經常使用的命名規範，那就是在後面加一個@2x後綴。例如pic.@2x.png將會是pic.png的優化版本，它的大小將會是後者的兩倍，可是咱們但願它是以原大小的比例來顯示出來。

CSS Background 圖片

另一個常見的情形是以CSS背景圖形式來展現圖片。一般人們用它來顯示LOGO，按鈕背景或者某個邊欄的背景。img更多的在正文出現，CSS背景則與網頁佈局和總體外觀聯繫緊密，因此實際上咱們作的Retina優化在圖片這一塊，更多的是指CSS Background這一塊。和上面的方法同樣，優化方案是將一個兩倍於原大小的背景圖以原大小比例顯示出來。例如咱們對下面的CSS代碼進行優化

#logo{
background: url('logo.png') no-repeat;
}

而且假設這個logo.png是100X100px大小，如今準備一張一樣清晰的大小爲200X200px大小的logo.@2x.png圖片，通過優化，CSS應該這樣寫

#logo{
background: url('logo.@2x.png') no-repeat;
background-size: 100px 100px;
}

其中，background-size: 寬度高度; 部分能夠把圖片背景強制以想要的規格顯示出來，這樣就能夠達到Retina效果。

僅Retina屏幕顯示優化的CSS背景圖

咱們知道雙倍的圖片大小意味着更大的儲存空間和流量，那麼，咱們能不能實現若是不是高清設備，則只是加載低清圖呢？CSS3提供了這樣的特性。

如今只需這樣寫

/* low-resolution devices */
#logo {
background-image: url(logo.png);
background-repeat: no-repeat;
}
/* high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#logo {
background-image: url(logo.@2x.png);
background-size: 100px 100px;
background-repeat: no-repeat;
}
}

就能夠實現僅僅是高清設備纔會載入高清圖片，節省流量了。

按鈕等頁面元素

除了圖片，咱們經常還在按鈕、提示圖片等一些小角落看到低清的不和諧圖片。有時候咱們爲了按鈕好看，就會在上面作一些圖片花樣。可就是這些小小的地方，若是Retina優化在這些小角落上沒有落實的話，用戶的眼光也會一會兒被吸引過去並抱怨。

要解決的這些問題，首先能夠像上述那樣使用高清圖片來實現Retina效果，可是更好的方式就是少使用圖片元素。如今瀏覽器主流都支持CSS3技術，而 CSS3能夠幫助你在不使用的圖片的狀況下，創造出可縮放的、原生高清的視覺效果，這樣一來能夠徹底不用擔憂Retina優化問題，還能加快載入速度。

例以下面的這些常見視覺設計手段，能夠徹底由純CSS製做出來，爲何用圖片勞累本身呢？

CSS3 在線製做資源

若是你對CSS3不熟悉，你能夠藉助http://cssarrowplease.com 網站來幫你製做一些箭頭和對話框；

藉助http://css3buttongenerator.com 來幫助你製做CSS的按鈕(Button)；

藉助http://css3generator.com 來幫助你製做一些其餘效果。

圖標字體 (Icon Fonts)

我要作的一些圖標icons比較小巧，並且數量較多，但CSS確實作不出來，難道我要一個一個的作，並且一個個的生成@2x圖片，而後一個個的按照上述的CSS編寫規則寫進去嗎？不用這麼麻煩。

圖標字體(Icon Fonts)就像是由一堆矢量圖標組成的字體文件同樣，它們嵌入在網頁裏，能夠隨意調用，隨意縮放。更好的是，網上有不少免費的現成的資源，或許你想要的已經免費在網上提供了。

例如http://weloveiconfonts.com 這個網站。

矢量圖 (例如SVG)

有時候你可能會注意到，若是直接把一個圖片，好比Logo，按50%尺寸顯示，可能會出現失真的狀況，因此你也能夠直接用SVG來製做一些簡單的但須要多處使用的圖片，這樣子你就能夠一個文件走天下，自由縮放到任意大小，沒必要再幸苦的去建立各類尺寸了。例如著名的TheNextWeb網站就採用了SVG做爲 logo，效果很棒。

Favicon 和 Apple Touch Icon

很多人忽略了網站書籤圖標favicon也須要retina優化。可是一張清晰標緻的favicon一定將會使用戶在收藏網頁時留下深入印象。優化 Favicon很簡單，你只需在原有的大小爲16X16px大小的icon基礎上製做一張32X32px大小的並打包爲一張favicon便可。

不用擔憂，http://www.xiconeditor.com 能夠免費幫助你完成這些！製做完成後上傳到網站根目錄便可。

Apple Touch Icon

另一個就是Apple Touch Icon，這主要是iOS設備在將網頁添加到主屏幕時要顯示的圖片。你能夠在網站首頁源代碼前加入如下內容

<link rel="apple-touch-icon-precomposed" href="/touch-icon-57×57.png" />
<link rel="apple-touch-icon-precomposed" sizes="72×72" href="/touch-icon-72×72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="/touch-icon-114×114.png" />

並按照上述去製做做相應的圖片便可，它們分別對應了不一樣尺寸和清晰度的iOS設備。

字體和網頁風格

另外一個值得考慮的地方就是，字體。一般來講，在高清屏幕上，由於毫髮畢現的顯示效果，醜的字體會更醜，漂亮的字體會更出衆。因此咱們不能再拘泥於默認字體了，而是要大膽選用字體。大多數的狀況代表，在高清屏下，對於網頁佈局來講，非襯線體要比襯線體更出衆，對於正文來講，襯線體則有閱讀優點。可是網頁風格最好強調統一，因此最好統一選用非襯線體比較好。

對於英文來講，常見的Helvetica Neue家族、Arial、Avenir等都是很是適合的字體，它們在高清屏幕上的表現不俗，它們不會讓你失望。Helvetica也是蘋果多年以來一直推崇的字體，他們最近把OS X系統默認字體也改爲了Helvetica字體，這和蘋果要全線Retina化相呼應。

對於中文來講，在Retina屏幕上以黑體類表現爲好，宋體和楷體則在網頁上沒有太多優點。各位能夠好好斟酌。