2015-05-27 70 views
0

对分辨率和图像大小的工作方式不太感兴趣。屏幕分辨率和图像大小,如何正确

假设我有一个分辨率为1920x1080像素的屏幕。这是否意味着如果我将它缩小到适合该尺寸,那么我所拥有的比这更小的图像会失去质量?

换句话说,如果我在网站或500x500px的某个应用或箱子中显示图片视图,那么任何小于此尺寸的图片都将失去质量,如果我将其拉伸至适合该尺寸,但任何500x500px及以上的尺寸不会失去任何质量?

我只看到一堆不同的分辨率,每英寸的像素等,所以我不知道该做什么。谢谢。

+0

是的,任何时候图像拉伸质量都会丢失。 – zaph

+0

你如何建议一个500x500图像完全占用1920x1080的屏幕而不会丢失质量? – nhgrif

+0

这就是我在这里试图澄清的内容。 – CodeMark22

回答

1

这是一个有趣的提出的问题,稍微困难的答案。由于这与任何特定操作系统无关,所以我会在一般意义上回答。

拉伸图像(假设您保持纵横比)并不会降低图像的质量,但它在视觉上会比具有拉伸图像的原始分辨率的图像看起来更差。拉伸图像不会减少图像中存储的数据量,因此不会损失质量。如果你采用1px×1px的图像并将其拉伸到1000×1000,它将具有与1的原始分辨率1相同的细节。它可能看起来很糟糕,但是你并没有失去原始的质量。

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

所以,所有这一切说,我猜你是担心视觉质量,而不是图像质量。在这个讨论中,每英寸像素数目没有影响,因为这只是屏幕尺寸和分辨率的定义。您的图片在1ppi屏幕上与1000ppi屏幕显示完全相同,但实际上只有1000倍。

为了获得最佳的视觉质量,放大是一个坏主意,因为图像质量有限以填充额外空间,所以在放大时会立即失去视觉质量。缩小比较好,因为你不会失去视觉质量。缩小到1x1px的50x50px图像看起来与1x1px本机图像完全相同,但情况正好相反。

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

所以在回答你的问题。获得图形的最佳视觉质量的方法是使图形成为您想要显示的精确像素尺寸。那么你不会放大和丢失视觉质量,而且你也不会缩小图像质量。有时这需要为不同的屏幕硬件制作多组不同分辨率的单个图像。这是获得最佳质量的成本。您需要为您的需求找到最佳的性能/质量集合。

0

你正在使用iOS吗?你将这篇文章标记为iOS。

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

所以,如果你有1920x1080视网膜,你应该提供3840x2160像素的图像。如果你想支持不同的类型,你应该使用更多不同大小的图像。

+0

谢谢,这有助于。 – CodeMark22

0

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

你的问题真的是关于光栅图形;保存为像素网格的图像。如果试图在20像素宽的空间上表示10个像素,则它必须占据这些像素中的10个像素(并且如果在一个轴上添加像素而不是在另一个轴上添加像素,则显然存在拉伸)。经验法则是不要在任何方向上将图片扩大10%以上。通常以更大的压缩格式使用更大的图像比拉伸更小,更高质量的图像更好(压缩保留了“数量”的像素,它只是使用一些偷偷摸摸的数学来更有效地存储它们,有时会导致它自己的失真) 。

我们没有涉及的一件事是“矢量”图形。这些图像基本上以您需要的任何尺寸“重新绘制”自己。所以,如果我画一个小圆圈,而且我决定需要一个大圆圈,我不会放大小圆圈(这是数字缩放;只是放大),我画了一个新的更大的圆圈。当然,我们定期处理的所有图像类型(jpeg,png,bmp,gif,tiff等)都是光栅图像。

我希望有帮助!

附录

您可能会发现这很有用(在光栅至少部分)。记住:dpi只是在一英寸的区域内表示的分辨率。这就好比一个城市的“密度”是如何在一平方英里的区域内表达的。重要的是有多少人/像素,如果你需要填补空间(解决方案/土地)与你没有的人,事情就会变得很奇怪。 http://www.youthedesigner.com/graphic-design-tips/how-to-explain-raster-vs-vector-to-your-clients/