如何一步步把网站Retina优化

随着高清屏幕、高分辨率屏幕越来越流行,例如MacBook Retina机型、iPad Air系列,这些新生机器有着很高的PPI,对网页的清晰度要求很高,所以越来越多的站长都不得不面临一个问题,那就是把自己的网站做到高分辨率适配 (Retina-Ready)。因为低清的网页在高分辨率屏幕上看起来很糟糕,对用户体验是一个很大的损害。相反,高分辨率适配的网站看起来则更加美观清 晰,对用户体验有很大的提高。所以随着科技的发展,Retina适配 (Retinafy)是一种必然趋势,各位不妨现在就做好这个准备。

指引 / 跳至

Retina 适配的优势

网站为高清屏幕优化有什么优势呢?首先有大量的网站没有Retina优化,并且有着越来越多的互联网流量来自平板和手机电脑,这些机型都是非常提前就拥有高清屏的。

之所以广大的站长还不动心Retina优化自己的网站,大多因为他们管理网站所用的电脑还不是高清屏幕,所以暂时没有体验到高清屏下低清网页的模糊感觉。但是如果能在现在就鹤立鸡群,把自己的网站做到高清优化,是非常尊重用户体验的,可以获得更多的回头客和满意度。

下面就来从网站的一些基本角度出发,来展示如何一步步的让网站Retina优化。

图片和CSS背景

使用图片的情形一般是这两个,一个是img标签,另一个是CSS背景。前者比较直接,是最常用的方式。要在img标签实现Retina优化,你只需提供一个图片的双倍尺寸版本,并以50%的大小贴在网页里。

例如,你有一张大小为100X100px的名为picture.png的图片,曾经以

<img src="picture.png" />

的形式贴在网页上,现在为了Retina优化,你需要制作一张同样清晰的但是大小是200X200px的双倍大小图片,名字最好也取为[email protected],并以

<img src="[email protected]" width="100" height="100" />

的形式贴到网页上。这样一来,原本200px的大小以100px显示,在高清屏幕上就得到了Retina优化到效果。

Retina 图片命名规范

这种专为优化而生的图片有一套现在常用的命名规范,那就是在后面加一个@2x后缀。例如[email protected]将会是pic.png的优化版本,它的大小将会是后者的两倍,但是我们希望它是以原大小的比例来显示出来。

CSS Background 图片

另 一个常见的情形是以CSS背景图形式来展示图片。通常人们用它来显示LOGO,按钮背景或者某个边栏的背景。img更多的在正文出现,CSS背景则与网页 布局和整体外观联系紧密,所以实际上我们做的Retina优化在图片这一块,更多的是指CSS Background这一块。和上面的方法一样,优化方案是将一个两倍于原大小的背景图以原大小比例显示出来。例如我们对下面的CSS代码进行优化

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

并且假设这个logo.png是100X100px大小,现在准备一张同样清晰的大小为200X200px大小的[email protected]图片,经过优化,CSS应该这样写

#logo{
background: url(‘[email protected]‘) 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([email protected]);
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优化网页的福音。

如何一步步把网站Retina优化

时间: 2024-10-10 12:23:21

如何一步步把网站Retina优化的相关文章

分享企业网站SEO优化思路

现在网络也成为了大部分企业的营销工具,网站SEO优化对企业的效益明显突出来了.下面介绍企业网站SEO优化思路. 一.域名检测 为了了解网站目前的状态,需要检测各项指标对网站当前的状况进行综合评估,即域名检测.检测的内容一般包括网站当前的PR值.ALEXA排名.百度和谷歌等SE的收录情况.PV.IP.反向链接数等. 1) 域名注册时间 2) 域名PR值 3) ALEXA排名 4) 百度收录 5) 谷歌收录 6) PV数 7) IP数 8) 反向链接 二.网站结构分析和优化 1)网站框架 按照网站的

如何进行网站性能优化

如何进行网站性能优化 雅虎Best Practices for Speeding Up Your Web Site: content方面 减少HTTP请求:合并文件.CSS精灵.inline Image 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件.方法:DNS缓存.将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 避免重定向:多余的中间访问 使Ajax可缓存 非必须组件延迟加载 未来所需组件预加载 减少DOM元素数量 将资源放到不同的域下:浏览器同时从一个域下载

网站速度优化的一般方法

http://www.cnblogs.com/enjoyeclipse/archive/2011/06/16/2082266.html 由于网站最重要的用户体验就是速度,特别是对于电子商务网站而言. 一般网站速度优化会涉及到几个方面: 1. 数据库优化 — 查询字段简历索引,使用数据库连接池和持久化,现在还有种趋势,就是选择使用No SQL作为补充: 2. 数据缓存 — 使用Memcached等; 3. 负载均衡 — 使用ngnix等 4. 页面缓存 — 将.aspx, .jsp等动态页面缓存或

web前端之网站seo优化学习笔记

这两天因为一些公司业务上的原因,学习了一些关于网站seo优化的方法和技巧. 之前在码代码的过程中其实还没有考虑过对于网站导流和优化网站关键字搜索排名的问题. 在了解了一些这方面的资料之后,觉得这是一个很有意思的领域.把这几天的学习笔记记下来. 个人理解是在一个项目基本上完成主要需求后需要运营需求加入的时候,此时seo优化就非常重要.所以在网站开发的最开始有经验的前端coder们在搭架子的时候就应该提前把以后运营汪们可能会提出的运营需求,特别是一些针对影响关键字排名和与搜索引擎相关的部分就可以考虑

然后我就去网上搜索“如何写网站SEO优化方案

这段时间属于网站的策划阶段,网站的定位.网站的布局以及关键词的选定 首先,需要确定自己建设一个什么样的网站.,我们当然是企业网站,然后,确定网站的关键词,确定关键词可以参考自己的竞争对手,也可以通过关键词挖掘工具选择合适的关键词,选出的关键词一定符合用户的搜索习惯,并且有一定的搜索量.最好是能够有明确转化意向的关键词. 关键词确定后,需要设计网站的整体布局,比如说首页应该放置哪些板块,你的客户最关心的是哪些内容?最想了解的是哪些信息?,这时就需要对你的客户进行分析了,比如我们做的是工业品,客户比

网站性能优化:动态缩略图技术实现思路

在网站开发过程中,大家都是如何解决多尺寸图片缩略图问题的呢?犹为典型的是电商网站,据了解,淘宝的图片缩略图是直接存储多张缩略图的方式,以满足各种情况下使用,因为它有牛逼的开源+自主开发的海量图片存储架构作支撑.但是,我们在做网站时,并不可能直接搬牛逼的架构过来,就可以达到预期的效果,况且各种成本投入也是有限的.所以一般性能优化的原则大都是这样:先考虑软件的优化,再考虑硬件的升级,当然土豪客户则除外. 很多网站可能没有对图片进行缩略图处理,上传时图片可能几百KB,在页面也是直接加载几百KB的图片大

网站性能优化你需知道的东西

本文提到的网站性能指网站的响应速度,这也符合绝大部分人对于网站性能的理解:访问快速的网站性能好,反之,访问速度越慢,则网站性能越差.本文总结的优化方法是宏观的工程层面的方法,并不包含微观的语言语法层面的方法,例如,JS.CSS的语法优化,这一部分同样影响网站的性能,但语言语法层面的优化更多的是取决于开发人员的编程水平. 什么样的网站响应速度快呢?其实很容易想到,网站加载资源的速度越快,网站响应速度越快:网站需要加载的资源越少,网站响应速度越快.这就分别对应网站性能优化的两大方向:资源缓存.资源合

Yahoo! 35条网站性能优化建议

Yahoo! 35条网站性能优化建议 分类: 网站性能优化2014-03-08 17:18 212人阅读 评论(0) 收藏 举报 网站性能优化 Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是旨在提高网站性能.原版猛戳:Best Practices for Speeding Up Your Web Site, Excetional Perfo

网站seo优化

现在一些中小型的电商网站,在优化上存在以下几点难度:1.中小型电商通常产品数量较少:2.有针对性的关键词扩展难:3.网站内容缺乏.网站用户体验建设是网站seo优化的王道,就象我们每个人的性格一样,性格影响一生,网站用户体验好,网站访客都喜欢这个网站,就算搜索引擎把你的网站 全部k光,对你来说也不会有很大的影响.网站的用户体验好坏反映在两个指标上,第一是网站的跳出率,第二网站的访问时长.那我们应该怎么样做才能降低网站的跳出率,增加网站的访问时长呢?今天跟大家谈谈几点体会: 网站跳出率就是网站访客到