如何一步步把网站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屏幕上以黑体类表现为好，宋体和楷体则在网页上没有太多优点。各位能够好好斟酌。

更多字体的选择: Web Fonts

好在各位可使用Web Fonts来避免由于确实字体而用文字图片堆砌在网页的尴尬。对于英文字体来讲，它们字体文件比较小，因此咱们能够索性嵌入字体。免费的Google Fonts和部分收费的Typekit都是很好的选择。

记住最后一点，高清屏幕下网页风格显得更加突出，因此要慎重选择网页的风格。如今都流行走扁平化风格，扁平化色彩元素在高清屏幕下焕发光彩：它们简约干净，并且很是不消耗资源。因此说扁平化风格能够说是Retina优化网页的福音。