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

时间:2015-05-27 20:03:52

标签: html ios image resolution pixels

不太关注分辨率和图像尺寸的工作原理。

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

换句话说,如果我在网站上的应用程序或框中有图像视图或者500x500像素的东西,那么任何小于该图像的图像如果我将其拉伸以适应该图像将会失去质量,但任何500x500px以上不会失去任何品质?

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

3 个答案:

答案 0 :(得分:1)

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

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

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

所有这些都说,我猜你是在担心视觉质量,而不是图像质量。每英寸像素与此讨论无关,因为它只是屏幕尺寸和分辨率的定义。您的图像在1ppi屏幕上看起来与1000ppi屏幕相同,只是物理尺寸的1000倍。

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

缩小尺寸时,对于iOS设备,您还可以获得设备图形硬件的优势,从而为每个图像点大小提供更多像素。如果您拍摄500px乘500像素的图像并将其显示在250磅×250磅屏幕空间矩形的视网膜设备上,您将在屏幕上显示完整的500px乘500px图像质量。在非视网膜iDevice上,您将获得屏幕上显示的该图像的缩小版(缩小版)。

所以回答你的问题。获得图形最佳视觉质量的方法是使图形成为您想要显示的精确像素尺寸。然后你没有放大并失去视觉质量,你没有缩小失去图像质量。有时这需要为不同的屏幕硬件制作不同分辨率的多组单个图像。这是获得最佳质量的成本。您需要找到满足您需求的最佳性能/质量。

答案 1 :(得分:0)

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

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

因此,如果你有1920x1080的视网膜,你应该提供3840x2160像素的图像。如果您需要支持不同类型,则应使用更多不同大小的图像。

答案 2 :(得分:0)

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

你的问题实际上是关于光栅图形;保存为像素网格的图像。如果你试图在20像素宽的空间上表示10个像素,那么它必须构成10个这样的像素(如果你在一个轴而不是另一个轴上添加像素,显然会有拉伸)。经验法则是不要在任何方向上将图片扩展10%以上。在压缩格式中使用更大的图像通常比拉伸更小,更高质量的图像更好(压缩保持像素的数量,它只是使用一些偷偷摸摸的数学来存储它们更有效率,有时会造成自己的扭曲。)

我们尚未触及的一件事是" vector"图形。这些图像基本上是"重绘"你需要的任何尺寸。所以,如果我绘制一个小圆圈,并且我决定需要一个大圆圈,我不会放大小圆圈(那就是数码变焦;只是放大倍数),我画了一个新的,更大的圆圈。当然,我们定期处理的所有图像类型(jpeg,png,bmp,gif,tiff等)都是光栅图像。

我希望有所帮助!

<强>附录

您可能会发现这很有用(至少在栅格上有部分)。请记住:dpi只是在一英寸区域内表示的分辨率。这就像一个城市的密度&#34;它的人口面积是一平方英里。重要的是有多少人/像素,如果你需要用你没有的人填充空间(分辨率/土地),事情就会变得奇怪。 http://www.youthedesigner.com/graphic-design-tips/how-to-explain-raster-vs-vector-to-your-clients/