屏幕分辨率和图像大小,如何正确

Screen Resolution and Image Size, how to be correct

不太了解分辨率和图像大小的工作原理。

假设我有一个分辨率为 1920x1080 像素的屏幕。这是否意味着如果我将其拉伸以适应该尺寸,任何小于该尺寸的图像都会降低质量?

换句话说,如果我在应用程序或网站上有一个图像视图或 500x500px 的东西,如果我拉伸它以适合它,任何小于它的图像都会失去质量,但任何 500x500px 及以上的图像不会损失任何质量?

我只看到一堆不同的分辨率、每英寸像素等,所以我不确定如何处理所有这些。谢谢。

你在和 iOS 一起工作吗?您将此 post 标记为 iOS。

如果是这样,那么在 iOS 中,您通常不计算像素而是点。并且该点在不同设备上的宽度和高度可以是 1、2 或 3 个像素(视网膜显示点是 2x2 像素,在 iPhone 6+ 上是 3x3 像素)。

因此,如果您的视网膜分辨率为 1920x1080,则应提供 3840x2160 像素的图像。如果你想支持不同的类型,你应该使用更多不同尺寸的图像。

几乎你说的一切都是正确的。任何提及分辨率的物理测量(例如英寸)都是无关紧要的;打印机决定一英寸 (ppi) 由多少点组成,并且每个具有相同分辨率的不同尺寸的屏幕每英寸的像素数都不同。

您的问题实际上是关于光栅图形的;保存为像素网格的图像。如果您尝试在 space 20 像素宽上表达 10 个像素,则它必须构成其中的 10 个像素(如果您在一个轴上而不是另一个轴上添加像素,显然会发生拉伸)。经验法则是不要将图片在任何方向上扩展超过 10%。通常以压缩率更高的格式使用更大的图像比拉伸更小、更高质量的图像更好(压缩保持 "number" 像素,它只是使用一些偷偷摸摸的数学来更有效地存储它们,有时会导致它自己的失真)。

我们还没有触及的一件事是 "vector" 图形。这些图像本质上 "redraw" 本身具有您需要的任何尺寸。所以,如果我画了一个小圆圈,我决定我需要一个大圆圈,我不会放大小圆圈(这就是数码变焦;只是放大),我会画一个新的更大的圆圈。当然,我们经常处理的所有图像类型(jpeg、png、bmp、gif、tiff 等)都是光栅图像。

希望对您有所帮助!

附录

您可能会发现这很有用(至少是关于光栅的部分)。请记住:dpi 只是在一英寸面积上表示的分辨率。这就像一个城市的 "density" 是如何用一平方英里的面积来表示它的人口。重要的是有多少 people/pixels,如果你需要用你没有的人填充 space (resolution/land),事情只会变得很奇怪。 http://www.youthedesigner.com/graphic-design-tips/how-to-explain-raster-vs-vector-to-your-clients/

这是一个有趣的问题,答案有点难。由于这与任何特定的OS无关,我将在一般意义上回答。

拉伸图像(假设您保持宽高比)不会降低该图像的质量,但它看起来会比具有拉伸图像原始分辨率的图像差。拉伸图像不会减少图像中存储的数据量,因此不会降低质量。如果您拍摄一张 1px x 1px 的图像并将其拉伸到 1000 x 1000,它将具有与原始分辨率为 1 x 1 时完全相同的细节。它可能看起来很糟糕,但您并没有损失原始图像的任何质量。

减小图像的物理尺寸确实会降低质量,但不会像拉伸那样在图形上看起来更糟。当您缩小图像时,显示器(图形硬件)需要切出像素并平均它们,以便它可以在屏幕上显示该图像。这不会像拉伸那样影响视觉质量,但会影响图像的绝对质量。

综上所述,我猜您担心的是视觉质量,而不是图像质量。每英寸像素数与本次讨论无关,因为这只是屏幕尺寸和分辨率的定义。您的图像在 1ppi 屏幕上与在 1000ppi 屏幕上看起来完全相同,只是物理尺寸大 1000 倍。

为了获得最佳视觉质量,放大是个坏主意,因为图像质量有限,无法填充额外的图像 space,因此在放大时您会立即失去视觉质量。按比例缩小更好,因为您不会失去视觉质量。缩小到 1x1 像素的 50x50 像素图像看起来与 1x1 像素原生图像相同,但反之则不然。

缩小时,对于 iOS 设备,您还可以获得设备图形硬件的好处,为您提供每个图像点大小的更多像素。如果您拍摄 500 像素 x 500 像素的图像并将其显示在视网膜设备上的 250 点 x 250 点屏幕 space 矩形中,您将在屏幕上显示图像的完整 500 像素 x 500 像素质量。在非视网膜 iDevice 上,您将在屏幕上显示该图像的缩小(一半)版本。

所以回答你的问题。获得图形最佳视觉质量的方法是使图形成为您想要显示它的精确像素尺寸。这样你就不会放大并失去视觉质量,也不会缩小图像质量。有时这需要为不同的屏幕硬件制作多组不同分辨率的单一图像。这就是获得最佳质量的成本。您需要找到最适合您需要的 performance/quality 设置。