研究点儿技术问题还是挺花时间的。昨晚突发奇想，想起为本站增加retina支持（谁让我自己也用上rmbp了呢？）。结果一搜索，还真是比较麻烦的，简单说说吧。

基本原理

所谓Retina屏幕，其实就是在一定尺寸的屏幕内放进去了更多像素点，也就是分辨率更高，从而让图像看起来更清晰、锐利。操作系统（特别是Apple的MAC OS X）已经有非常好的支持，而且为了照顾字体大小（你不会愿意盯着个高清屏幕看芝麻大小的文字吧），一般将纵横各2个像素点当成1个来显示。但对图片采用同样的方法时，就会发现总有那么一点糊。而且如果你在RMBP上做截屏，直接放到网页上给普通屏幕电脑看，那图片又会变得离奇的大（准确的说是4倍，长宽各翻一番）。

所以，为了同时照顾retina和非retina屏幕，实际上我们需要不同大小的图片，只是让网页去判断究竟给读者呈现哪张。事实上，现在OS X和iOS上的App也是这样处理，会同时做Picture1.jpg和Picture1@2x.jpg两张图，其中@2x就是Apple的一个命名规则。

说回网页的问题，现在对retina的处理还没有一个标准，所以不同的浏览器有不同的处理方式。但多数浏览器通过window.devicePixelRatio的值来判断是否retina屏幕，最新的Safari、Chrome都支持CSS中-webkit-device-pixel-ratio和-webkit-min-device-pixel-ratio，此外W3C计划在HTML5中增加srcset特性（仍然是草案）。具体的情况可以参考这个WiKi页面。

因此，目前较为常用的方式，是通过JavaScript判断window.devicePixelRatio，然后选择推送哪张图片；后面涉及具体选项的时候再说其他模式。

插件

对wordpress来说，最省事的方法是安装WP Retina 2x插件。怎么装，就不提了；启用以后，在仪表盘——设置下面会多出一个WP Retina 2x，进去可以看到基本和进阶设置。

这个插件是配合WordPress媒体库来用的，当我们在媒体库里上传一个图片，插件可以自动（或手动，就看你对下面这个选项的配置）生成retina图片。听起来很神奇，怎么有所谓retina图片呢？下面简单看个例子。

假设原始图片（test.png）是800×800的分辨率，上传到媒体库时，WP首先会自动生成比如300×300的预览图，一般命名是test-300x300.png（这一点和插件无关），WP Retina 2x插件还额外生成一个test-300x300@2x.png；于是我们至少得到三个图片，它们的大小是这样的：

• test.png 800×800
• test-300×300.png 300×300
• test-300×300@2x.png 600×600

当我们在帖子里插入图片时，可以选择用大、中、小缩略图或者原图（完整尺寸），test-300x300.png一般对应中等。假设用了这个中等设置，那么

• 当用普通屏幕下的浏览器看，和一般的处理方式没有什么不同，直接用了test-300x300.png
• 当你用retina屏幕下的浏览器来看这张图，会使用data-at2x特性来呈现test-300x300@2x.png这张图，于是实际上一幅600×600的图在你的浏览器上看起来的物理尺寸（而不是分辨率）和普通浏览器上一幅300×300的图一样大，也就是说，不同浏览器看起来图片的长宽没发生改变，只是retina屏幕下像素更丰富、图片更清晰。

上面实际上就是这个插件的基本原理，所谓自动生成@2x的图片，就是对原始图片做缩略图时的分辨率有所不同。搞明白这个，原始素材的问题就搞明白了。每次发帖需要图片的时候，我们可以直接在RMBP上截图什么的，然后通过WP媒体库上传，让插件自己判断大小生成对应版本的缩略图，最后在发帖时选择适当大小就行了。这里需要注意的就是，你没法用完整尺寸、也就是原图。因为原图并没有@2x版本啊。如果你自己先做一个很大的图，然后命名为test@2x.png，再另存为更低的分辨率test.png（BTW，用Skitch挺方便），那等于是你手工做了上述插件的自动过程，对吧。

所以，Basic里的设置就很容易理解了，无非是问问你，如果有些缩略图太小，是否就不需要做@2x版本了，还有，是否每次上传图片都自动转换。如果没有勾选，那么可以自己在媒体库——Retina里点Generate。

好，说明白基本的使用过程，来说说Advanced里的设置。刚才解决的是图片素材问题，这里主要的四个选项是控制我们的浏览器究竟怎么知道需要推送@2x图片呢。

1. 仍在草案阶段的srcset特性，经我测试，似乎Chrome下管用，Safari没有效果；
2. 强制改写HTML，重载，实际的过程仍然是浏览器先加载网页，然后判断是否retina，之后加载时优先使用@2x图片；实际使用中，必须重复刷新你的网页才会变成retina版；
3. 最稳妥的方式，用retinajs，通过JavaScript激活data-at2x特性。实际使用中，浏览器会首先载入普通分辨率的图片，然后再加载retina图片，也就是流量占用比较大，网页载入速度会有影响。但这个的兼容性最好，Safari、Chrome什么的都OK。
4. Retina-Images方法。这个法子和前面主要靠客户端浏览器不同，而是利用加载cookies，让服务器知道对端的需求。这是需要在你的网站主机上安装Retina-Images处理程序的。

现在仔细观察我上面截图的载入时延和变化，就知道了吧，本站暂时用着retinajs方式，看看具体进展再考虑其他吧。插件的介绍就大致到这里啦。

自己用Javascript解决

就和插件的方式三是一样的原理，看这个帖子吧：WordPress不用插件切换Retina（视网膜）图片

图床怎么办

上面用插件提到了，利用的是WP自带媒体库，那很多用外面图床的咋办呢？因为我之前用得比较多的是Flickr，所以也花时间搜索了一下：Making my WordPress blog Retina Display friendly 还得用Flicke的API，说实话，太复杂了。

小结

总的来说，retina屏幕还是个新生事物，以至目前没什么非常完美和统一的解决方案，想想吧，身边还有人在用IE 6呢，所以，也可以理解了。无论如何，WP Retina 2x插件算是最自动化的一个方法了。从后台数据看，我这小站的主要受众用着Safari和Chrome，多数选择MAC OS X操作系统，所以，慢点就慢点吧。如果还有什么更好的方案，欢迎告诉我。

其他参考链接

WP Retina 2x插件作者写的教程http://www.totorotimes.com/news/retina-display-wordpress-plugin/

Retinajs项目：https://github.com/imulus/retinajs/

---

© ern for Read ERN, 2014. | Permalink | No comment | Add to del.icio.us
Post tags: @2x, retina, retinajs, wordpress, 分辨率, 软件推荐

Feed enhanced by Better Feed from Ozh