视网膜分辨率
Digital content creators are abuzz about “high DPI” and “Retina” displays: how they are changing the nature of the web and complicating the design process. Before telling you how to develop images for these new devices, it makes sense to understand the basics of the technology: what is high DPI, and why is it significant?
数字内容创建者对“高DPI”和“ Retina”显示感到不安:他们如何改变网络的本质并使设计过程复杂化。 在告诉您如何为这些新设备开发图像之前,有必要了解该技术的基础知识:什么是高DPI,为何如此重要?
Very simply, “high DPI” and “Retina” mean the same thing: a device with a high pixel density. “Pixel density” is the number of pixels a display can fit into a fixed distance. This is different from “resolution”, which is a simple count of the number of pixels across the entire width and height of a device.
很简单,“高DPI”和“视网膜”含义相同:设备具有高像素密度。 “像素密度”是显示器在固定距离内可以容纳的像素数。 这与“分辨率”不同,“分辨率”是对设备整个宽度和高度上像素数量的简单计数。
For example, the resolution of an iPhone 4 is 640 x 960 pixels. All of these pixels – a pixel being the smallest dot of color that is possible to show on a screen – are crammed into a display that is two inches across.
例如,iPhone 4的分辨率为640 x 960像素。 所有这些像素(一个像素是可能在屏幕上显示的最小颜色点)都塞入了两英寸宽的显示器中。
If we compare that to an old VGA desktop monitor, the monitor will have a similar resolution, but a much larger physical size, and thus a significantly lower pixel density.
如果将其与旧的VGA台式机显示器进行比较,则该显示器将具有类似的分辨率 ,但是物理尺寸要大得多,因此像素密度也大大降低。
If we divide the physical width of the display by the number of pixels displayed horizontally, the result is the number of pixels per inch (ppi, also commonly referred to as dpi).
如果将显示器的物理宽度除以水平显示的像素数,则结果是每英寸的像素数 ( ppi ,也通常称为dpi )。
Most current desktop monitors display around 96 to 110 DPI, with laptops coming in slightly higher. “High DPI” is generally acknowledged to be any device with a display density of 200 pixels per inch or greater.
当前大多数台式机显示器的DPI约为96到110,而笔记本电脑的显示器要稍高一些。 通常认为“高DPI”是显示密度为每英寸200像素或更高的任何设备。
Display type | DPI | Example device |
---|---|---|
Desktop computer | 100 ~ 110 | iMac |
Standard laptop | 100 ~ 135 | Standard Macbook |
Standard Tablet | 130 | iPad 1 |
Standard smartphone | 160 | HTC Wildfire |
HDPI Android tablet | 216 | Nexus 7 |
Retina laptop | 220 | Retina Macbook |
Retina iPad | 264 | iPad 3 |
Retina iPhone | 326 | iPhone 4S |
显示类型 | DPI | 示例设备 |
---|---|---|
台式电脑 | 100〜110 | iMac |
标准笔记本电脑 | 100〜135 | 标准Macbook |
标准平板电脑 | 130 | iPad 1 |
标准智能手机 | 160 | HTC Wildfire |
HDPI Android平板电脑 | 216 | Nexus 7 |
视网膜笔记本电脑 | 220 | 视网膜Macbook |
视网膜iPad | 264 | iPad 3 |
视网膜iPhone | 326 | iPhone 4S |
Traditional development practices have optimized web-ready graphics at the common denominator of 72 DPI. A “high DPI” device displaying such an image must double or even quadruple the number of pixels in the graphic to provide the impression that it is roughly the same size on a Retina display. Due to this interpolation – a fancy name for guesswork – the image quality suffers.
传统的开发实践以72 DPI的公分母来优化可用于Web的图形。 显示此类图像的“高DPI”设备必须将图形中像素的数量增加一倍甚至四倍,以提供与Retina显示器尺寸大致相同的印象。 由于这种插值法(即猜测的花哨名称),图像质量受到影响。
In reality, “Retina” displays are not as far as the technology can be taken: to paraphrase physicist Richard Feynman, there’s still room at the top for further improvement, although it is likely that subsequent advances will be more incremental in nature. It should also be noted that there is a similarly revolutionary leap in color range that is waiting in the wings.
实际上, “视网膜”显示器的技术还远远不够 :用物理学家理查德·费曼(Richard Feynman)的话来说,仍然有进一步改进的空间,尽管随后的改进在本质上可能会更多。 还应该注意的是,在机翼上等待着类似的色彩范围的革命性飞跃。
Once you understand pixel density, the issue is how to optimize your images for the new displays. For bitmap images, the most important point in this new web development process is one that I’ve continually emphasized here – always retain the very highest resolution version of your images.
了解像素密度后,问题便是如何针对新显示器优化图像。 对于位图图像,此新的Web开发过程中最重要的一点是我在这里一直强调的一点– 始终保留图像的最高分辨率版本 。
For far greater depth and detail on this subject, I would strongly recommend reading The Designer’s Guide to DPI, by Sebastien Gabriel.
有关此主题的更多信息,我强烈建议阅读Sebastien Gabriel撰写的DPI设计指南 。
翻译自: https://thenewcode.com/564/Understanding-Pixel-Density-Resolution-and-Retina-Displays
视网膜分辨率
今天的文章视网膜分辨率_了解像素密度,分辨率和视网膜显示分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/61290.html