对于网页设计，必须将图像保持在72DPI吗？

我已经设计网页横幅超过一年了，但从未考虑过DPI。

我使用默认的72DPI，但现在我想知道是否有必要在72DPI中创建网页设计？如果我们使用更多的东西，例如200DPI，该怎么办？

我知道更多的DPI意味着质量更高的图像，这就是为什么我要使用高DPI的原因，但是最近我在某处读到，对于网络横幅，我们应该使用72DPI。我只是想知道它是否是强制性的，并且在任何方面都会产生负面影响吗？

Web图像中不使用PPI（每英寸像素）设置。网络上的图像，视网膜显示或其他图像均以像素尺寸（宽度和高度）显示，而不是任何PPI / DPI设置。实际上，许多Web图像（例如png，gif，jpg）甚至可能甚至不在其内部数据中存储ppi设置，而是依赖于宽度和高度设置。

不管任何PPI / DPI设置如何，一个100像素x 100像素的图像都将在网络上显示。

这就是为什么用于视网膜显示的图像以2倍大小而不是增加的ppi设置保存的原因。视网膜显示器的像素密度较高，但是，无论屏幕状态是基于图像的宽度和高度（不是基于任何PPI设置），它们仍会显示图像。

实际上，自从1980年代初到中期以来，还没有发现使用像素密度为72ppi的监视器。72ppi的精度已经有将近30年了。实际上，由于Windows使用默认的96ppi像素密度，因此对于Windows系统从来都不是准确的。

不相信我吗？自己尝试一下。在Photoshop中创建两个100像素乘100像素的图像。将一张图片设为72ppi，将另一张图片设为300ppi。将它们都保存为网络。在网络浏览器中它们是否有所不同？不。它们仍然是100px x 100px的图像。

DPI（每英寸点数）设置仅在打印图像时适用。DPI与用于屏幕的图像无关。DPI是指印刷机在一英寸内放置的墨点/点的数量。由于地球上没有显示器使用墨水，因此DPI是用于与显示屏相关的任何东西的不正确术语。

请注意，一些移动制造商选择使用术语DPIx或xDPI，有时将其简称为DPI。这不是首字母缩写的传统形式，制造商只是在很大程度上混淆了水域。如果您看到DPI与移动屏幕分辨率有关，那么他们在谈论有效的PPI，而不是真正引用每英寸点数。xPPI或PPIx是更合适的首字母缩写，因为像所有显示器一样，​​移动屏幕使用像素而不是墨水。

Web图像使用什么ppi设置没有任何区别。重要的是图像的（像素）宽度和（像素）高度。

处理多个图像时，保持一致很重要。您希望将所有图像设置为相同的ppi，以避免在图像之间移动片段时调整尺寸和缩放方面。您选择使用72、96、200还是145.8 ppi都没有关系，但是所有图像都应设置为相同。

我将通过示例详细介绍“ dpi”的实际含义。这样，您可能会自己看到答案。：

简而言之，您的图像由彼此相邻的彩色点组成。但是在任何物理意义上都没有大小。

现在，当您在屏幕上显示图像时，通常只需将图像的点色放入屏幕可以显示的彩色矩形栅格中即可。请注意，我在这里所说的“点”和矩形都称为“像素”-但是仔细看它们是不同的。

如果我们以自然的方式在屏幕上显示图像，则可以测量其大小。
例如，我们的图像是500个点宽，我们将它们放入屏幕上的彩色矩形中，然后看到它是5英寸宽。然后，我们每英寸有100个矩形，每英寸显示100个点。
也就是说，我们的图像在屏幕上具有100dpi。
但是我们甚至都没有查看图像文件中的dpi值！

现在，如果我们查看文件，则很可能会说图像为200dpi！dpi值大约是每英寸屏幕宽度或高度可以看到多少个色点。因此，图像中的dpi值告诉我们，图像在显示时将为 2.5英寸宽- 这只是承诺，而不是事实。

当我们将图像点分配给屏幕时，我们什至都不在乎，因为我们只是显示了它，并测量了图像在屏幕上的实际物理dpi。
因此，正如您所看到的，诺言只是完全错误的。没有人在乎！因为这无关紧要。

该文件很有希望-通过说200dpi-将“显示时为2.5英寸宽”。然后，我们使用了一个显示为5英寸宽的屏幕-我们之所以知道是因为我们知道实际的屏幕是什么。
通常，我们甚至不知道最终用户将使用什么作为显示，因此无论如何我们只能猜测，

因此，现在很有意义：

• 我们不知道屏幕上显示的图像的dpi，因为我们不知道屏幕。
• 但是我们有一个想法，看起来应该是这样，“大约这个大小...好，那么我们需要大约200dpi左右。” 并将“ 200dpi”保存在文件中
• 后来，我们看了看屏幕，发现它实际上是100dpi；

而且，不仅可以在一个屏幕上显示图像，而且它们的大小可能不同，因此在创建图像文件时甚至无法知道真实的dpi值。

另请参阅我对“像素”到底是什么的回答？。

直接基于上面的问题：

当您在图像文件中指定dpi时，这并不会直接影响到最终显示的图像的质量。
但是它可能用于传达图像质量-意图：您可以说“我希望将此图像显示在200dpi的屏幕上”。

如果要显示此图像，我可能会注意寻找一个200dpi的屏幕。或者我只是使用可能在桌上的旧的75dpi屏幕。图像将很大，我必须滚动-但这是我的问题，而且：您甚至都不会发现真正使用的内容-200dpi的值并不能控制图像质量 -它只是传达了如何显示图像 “正确方式”，如果我在乎。

尽管PPI绝对无关紧要-对于Web和应用程序设计而言，像素尺寸至关重要，但在使用设计应用程序和混合PPI设置时应格外小心。原因如下：

但是，如果您打算为每个文档使用Photoshop和不同的像素密度，则在文档之间拖动图层并复制图层样式将缩放图层样式-将图层从326PPI Retina iPhone文档拖到264PPI Retina iPad文档将意味着所有图层样式都会缩放20％（然后四舍五入到最接近的整数）。那可能不是您想要的。同样，无论您如何设置，OS X的预览版都将以正确的大小显示72PPI图像。

每英寸像素数只是一个标签

出于这些原因，我将72PPI分配给我的所有设计文档，建议您也这样做。要在不调整图像数据大小的情况下更改Photoshop文档的像素密度，请打开“图像大小”对话框，取消选中“调整图像大小”，然后键入所需的像素密度。

我只是测试了用Photoshop制作的图像的两个副本。但是，我将其中一个设置为72 dpi，将另一个设置为720 dpi，以查看我使用的浏览器是否会在屏幕上呈现不同的尺寸。

在除一个浏览器之外的所有浏览器上，它们看起来都是相同的-在尺寸和质量方面。但是，使用谷歌浏览器后，一台72英寸的浏览器看起来不错，但一台720英寸的浏览器却非常小-尺寸只有1/10。

真是的 这看起来像是将所有独立的（不受网页限制的）图像都设置为72的论点。几乎我所有的图像（数百个中的数字）均为120 dpi。即使它们在Chrome上看起来仍然足够大，也许考虑到该浏览器，我还是应该将它们全部设置为72。也许在Chrome的首选项中有一些不错的解决方法。