iPhone 4 在硬件上的重要改进之一是令屏幕分辨率达到了 326 ppi，即在一英寸的距离上分布了 326 颗像素。在今年的 WWDC 主题演讲上，乔布斯用图示法解释了为什么像素数越多，显示效果越好。与此相关的另一个问题，是所谓的「防锯齿技术」（anti-aliasing）。或许你在科技类博客上见过这个术语和「亚像素」（sub-pixel，一译「次像素」）一类的词汇共舞齐飞，但却不明究竟。刚好前几天 @metaphox 分享的这篇短文对防锯齿技术和亚像素概念解释得比较简明易懂，译出与大家共享。—— 编者
防锯齿技术是一种很微观的技术，但对图像的整体形态会有很大影响。简单来说，防锯齿技术是一种视觉上的小骗术，可以让边缘不平滑的东西显得平滑。电脑屏幕上的一颗颗像素并不是一直在发光，而是根据屏幕上的内容时亮时灭。由于方形的像素颗粒是以网格矩阵形式排列，故很难呈现圆角的图像。为了欺骗人眼，让我们以为那些字母和图形是圆角的，防锯齿技术把像素颗粒的边缘涂成暗色。当你从远处看时，笔直的线条就产生了模糊感，整个边缘线条就显得圆滑了。
左为笔记本电脑的液晶屏幕上的亚像素，右为 iPhone 屏幕上的亚像素。可以看到后者的亚像素之间的空隙要小很多。（图像来自 noopia.com）
亚像素防锯齿则更进一步，把圆角效果做得更加完善。每个像素颗粒都是由蓝色、绿色和红色的三个亚像素组成（见上图左半），三个亚像素都可以分别点亮，这令我们能够用不同的颜色来对防锯齿技术进行更精细的控制。目前市面上的大部分屏幕（包括笔记本屏幕）都用到了亚像素防锯齿技术。
iPhone 的情况则不太一样（见上图右半）。虽然它是近两年的新设备，但却没有用到亚像素防锯齿技术，仅仅是在整个像素的层面进行了防锯齿处理。这是怎么回事呢？
如果仔细看上面的图，你会发现 iPhone 上各个亚像素之间的距离比普通屏幕小得多（所以像素之间的距离也小得多）。因此，iPhone 即便不用亚像素防锯齿也能取得不错得效果。它的屏幕分辨率高，肉眼基本很难分辨全像素显示和亚像素显示的区别。由于防锯齿技术涉及复杂的计算过程，用以计算相邻的像素或亚像素的颜色与暗色层级，iPhone 省去了亚像素防锯齿处理，也就节省了一些 CPU 资源。
iPhone 的屏幕还有其他的特别之处：横版和竖版之间的切换。这可能也是苹果不使用亚像素防锯齿的原因之一。如果用了，切换横竖版时对 CPU 的消耗可能会非常大。
最后这点我并不确定。像素之间的距离小或许是采用全像素显示的结果，而非原因。由于亚像素并非正方形，而是长方形，因此在横竖版切换时可能会造成图像失真，或许这就是 iPhone 的屏幕分辨率（每英寸的像素个数）远高于笔记本液晶屏的原因。
16 Comments so far
Leave a comment
Fields in bold are required. Email addresses are never published or distributed.
Some HTML code is allowed:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
URLs must be fully qualified (eg: http://apple4.us),and all tags must be properly closed.
Line breaks and paragraphs are automatically converted.
Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.
感觉这篇文章写得一塌糊涂，一看原文才发现很大程度上是 Lawrence 译拧了不少……Lawrence 终于在阴沟里翻船了。
其一：
“Because computer screens have grids of pixels which light up, rather than being continuous light, it is hard to give the appearance of rounded edges.”
似乎应该是
“因为电脑屏幕（在二维空间上）并不是连续发光的，而是拥有网格矩阵（栅格）的发光像素，所以很难显示圆滑的边缘。”
翻译不妥之二：
“anti-aliasing gives pixels next to the edges darker shades which, when zoomed out, give blur to the straight line and allow an edge to look rounded.”
应为
“抗锯齿技术让靠近图形边缘的像素显示更浅的色调，这样一来，从远处看的时候边缘的模糊就会让它看起来圆滑。”
其实感觉这篇文章写得挺糟糕的……原文写得也是一塌糊涂。比如关于亚像素抗锯齿的那一段就把这个技术描述为屏幕（硬件）上的技术了。
“Because these three different sub-pixels can be lit or darkened independently, it gives even greater control over anti-aliasing by use of different colours.”
应为
“因为每一像素包含的三个亚像素是可以分别亮灭的（我的天哪这写的是什么……如果不能分别控制，连彩色显示都没有了，搞得好像亚像素的存在就是为了抗锯齿），这使得我们能通过不同的颜色（这里根本就没说清颜色和亚像素和亚像素抗锯齿之间的关系）来对抗锯齿进行更好的控制。”
把“rounded”译为“圆角”不妥，似乎“圆滑”更合适一些，事实上原作者本应用“smooth”这样的形容词。
把“shade”理解为“暗色”是一个比较严重的失误。这里的“shade”指的是“色调”，或者换句话说，“图像或色彩的浓淡程度”。
“Whole-pixel vs sub-pixel rendering for the iPhone may be a result of the pixels being close together in order to deal with the swivel screen, rather than the reason. Being able to swivel the screen between landscape and portrait surely presents some interesting problems because the sub-pixels of the screen aren’t square, but rather rectangular.”
大致意思其实是
“使用全像素抗锯齿而不是亚像素抗锯齿，或许是像素紧密排列的结果而不是原因，这是用于应对可切换横竖的屏幕的。”
这篇原文写得实在太糟糕了。不知作者是真不懂技术还是试图不谈技术，反正结果是缺乏基本的技术原理这事根本就没讲清楚。而且文章结尾还一通畅想，想到这么无聊的假设，除了把读者带到沟里去没什么别的好处。
梁海~~~~~~~~~你是神，你是神！！！！！！
槑不是在讽刺吧……
另外，凌晨试图理解这篇译稿的原文的时候确实比较头大，语言有些过火，请 Lawrence 尽量不要介意……
似乎主要问题就出在原文的逻辑混乱上。这原文写得就不太好，而且翻译的时候容易出错（这篇英文 Lawrence 都能理解错，足以证明写得多糊涂……）。
防锯齿技术就是反走样技术。简单的说，屏幕的每个像素并不是一个没有面积的理想的点而是一个长方块。用于显示一个边缘平滑的形状时，边缘不可能和像素完全对齐。所以像素中只有部分面积在形状里。为了显示平滑效果，需要按照面积比例显示相应的亮度。
亚像素技术就是微软很早宣传的ClearType技术。对LCD屏幕的三个RGB亚像素分开考虑。这个技术的缺点是受屏幕RGB排列的影响。所以把屏幕竖起来时，横向排列的RGB基本上没法做到亚像素的防锯齿或者需要更复杂的算法（原理上不可能）。大家可以在自己的桌面显示器上试试，就知道了。所以苹果不用我猜是因为1本身屏幕分辨率高。2.手持设备横竖使用很频繁，亚像素防锯齿基本没用。
@agrafish
说“亚像素技术就是……ClearType 技术”不太合适吧，只能说 ClearType 是微软的一个亚像素抗锯齿技术，因为在 ClearType 之外还有别的实现。
你说亚像素的长轴处于水平位置时“原理上不可能”做到亚像素抗锯齿，这也不太靠谱。不论三个亚像素怎样排列，利用 RGB 亚像素来提高抗锯齿效果都是可行的，只是算法不一样而已。
@梁海
第一条你说的对，ClearType是微软的一个亚像素的实现，其他实现也是可能的。
第二条不同意你的说法。如果像素在屏幕上以RGGB的正方形排列（像CCD)，那么在水平和垂直方向看都有亚像素导致的更高分辨率因而可以实现亚像素抗锯齿。但现在如果一个像素的RGB只沿数平方项排列，那么垂直方向的亚像素分辨率等于像素分辨率，这样是没法在垂直方向做亚像素抗锯齿的。或者说，只能做到和像素级一样好。原理上，六边形的像素形状是最均匀的平面分布。欢迎你的批评指正！
发现：1最近APPLE4US的博文更新有点少啊。
2出了不少系列的博文
3明日报告：阅读的未来好像没完吧，却无了音讯。
APPLE4US的读者很高兴看到你们关于未来的思考，希望你们持之以恒，不断给大家带来有质量的博文。
@Henly:
感谢您的长期关注，是的，最近大家都有点忙碌，我们会尽快恢复原来的更新频次。
阅读的未来系列还剩下三篇文章，其中两篇早就完成了（有一篇有些版权上的问题需要厘清），还有一篇需要编辑，我们会在一周内全部刊出。
再谢，顺祝夏安。
如何在你的网站用时间检索文章呀？ 比如， 我想看2009年4月的文章， 谢谢指点
@agrafish
哦在第二个问题上我们好像都没理解对方的言论……
你在 2010/06/14,13:53 发出的这条评论内容清晰，我完全同意。这是在讨论标准 LCD 亚像素排列状况下的水平和垂直方向上的亚像素抗锯齿贡献。当然可以说在垂直方向上对亚像素的控制没有提升抗锯齿效果。
但其实我在 2010/06/13,16:07 发出的评论针对的是你于 2010/06/13,10:26 发出的评论，可能我也没说清楚自己的观点。这是在讨论标准 LCD 亚像素排列状况旋转 90 度后的亚像素抗锯齿可行性。
针对“所以把屏幕竖起来时，横向排列的RGB基本上没法做到亚像素的防锯齿或者需要更复杂的算法（原理上不可能）”这句话，我当时没真正明白，而现在我对这句话的理解是你只考虑了一半，即：把屏幕（即亚像素排列方向）旋转 90 度后，水平方向（原来的垂直方向，或者说每个亚像素的长轴方向）上没法做到亚像素抗锯齿。
这一半理解是没有问题的，但此时新的垂直方向上却有了通过亚像素来提升抗锯齿效果的能力，因为新的垂直方向上亚像素分辨率成了像素分辨率的三倍。就是说，在默认的 LCD 状态下（iPhone 的“portrait”），只有水平方向上存在亚像素对抗锯齿的贡献；而在旋转 90 度之后的 LCD 状态下（iPhone 的“landscape”），只有竖直方向上存在亚像素对抗锯齿的贡献。于是在两种情况下，都可以通过对亚像素的控制来提升抗锯齿效果，只是所需的算法不同。
那么，iPhone 不用亚像素抗锯齿的原因就不再是因为“landscape”下不能实现亚像素抗锯齿，而是别的原因了。比如计算量过大。
We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. – Knuth
随着技术的进步，很多优化观念都改变了。比如以前的编译速度优化是用空间（binary size）换时间（run speed），CPU缓存到了2Mb之后，变成了空间就是时间。次像素平滑随着PPI的增加肯定也没有以前那么大的作用了。设计师们的做法是，先用没有平滑做个原型，效果不可接受再做局部调整。
@梁海 2010/06/14,17:07
完全同意你上面的评论。也谢谢澄清！
只有一点更多的猜想：
当屏幕旋转时，为保证和水平显示时效果一样，可以想象这时亚像素抗锯齿很难做。水平的时候做的越好，垂直的时候越难做。那么最好的办法是增大像素分辨率，然后不做。
实话实说，亚像素抗锯齿这个方法属于“Trick”, 在不均匀的像素分布时很难做。看看微软的ClearType，在屏幕竖起来显示的时候的效果，就知道这个时候还不如关闭亚像素抗锯齿。
@agrafish
嗯我确实忽略了屏幕旋转前后亚像素抗锯齿的效果差别，只注意到了它们都可以实现。确实，如果屏幕上的文字随着屏幕的旋转出现若有若无的诡异变化，会让消费者疑惑的。现在新的 iPhone 的无敌分辨率真是干净漂亮地解决了抗锯齿问题，威武！
new mac mini