当前位置: 首页 > 知识库问答 >
问题:

图像大小、移动设备和dpi

王彭薄
2023-03-14

这是一个关于移动设备的图像及其大小的问题。

所以假设我想要一个全手机屏幕的图像。我这里假设屏幕是320*480,这似乎是一致的。

当我在Photoshop或MS Paint中制作图像时,我可以选择像素/英寸(好吧,也许不是油漆,但你明白我的漂移)。默认值是72像素/英寸,这是要一直保持的吗?

一些设备具有更高的dpi——我认为“默认”是160 dpi——因此,对于一个240dpi的设备,为了显示我的相同图像,我应该:

  1. 将图像从 320*480 缩放到 480 * 640(即大小 = oldSize*240/160)或
  2. 转到我的图像并将像素/英寸更改为72 * 240 / 160?

鉴于Android的大小如下:

xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp

(来自此http://developer.android.com/guide/practices/screens_support.html)

我认为,通过向上/向下缩放图像并将其随机排列到正确的位置,我可以获得跨设备的兼容性。

接下来,与其增加图像大小,不如制作一个非常大的图像并根据需要缩小它?

对于iPad和iPhone来说,这是完全相同的问题,只是数字不同!手机是320x480,视网膜是640x960,iPad是1024x768,视网膜再次是四倍大。

那么是图像放大还是Photoshop中的像素/英寸放大?

我想最后我会问:< br > Photoshop中图像的推荐像素/英寸是多少?< br >是该数字改变了,还是图像尺寸改变了?< br >假设图像用于Android,h、m、l文件夹中的图像大小应该是Android规格中的最小值,还是刚好低于最大值?

共有2个答案

张亦
2023-03-14

我还发现了关于整个“ppi”问题的有趣讨论:

dpi的神话,它假设“ppi”本质上是一个糟糕的问题,因为在72 dpi下,300 px * 100 px的图像与144dpi时的300 px * 100 px具有相同的像素。

因此,在为网页设计时,适当地设置像素大小是最重要的——dpi可以是144或1或10亿,它不会影响计算机显示图像的方式。

广晔
2023-03-14

位图要求类似于准备用于打印的图形与 Web。如果您有任何印刷生产经验,您就会知道72 PPI的图像在放大和打印时看起来非常像素化和模糊。相反,您需要将图像重做为矢量图像或使用高分辨率照片,然后将文件的分辨率设置为300 PPI左右,以便在不损失图像质量的情况下打印它。Android的屏幕密度工作原理类似,除了我们不改变文件的分辨率,只改变图像的大小(即标准的72 PPI就可以了)。

不要在photoshop或gimp中增加任何分辨率来更改图像,只保留72ppi。

只需从基线缩放图像,即mdpi=1。

75 × 75 for low-density screens (i.e. ×0.75); 
100 × 100 for medium-density screens (our baseline);
133 x 133 fpr TVDPI (1.33)(no need to supply graphics android will auto scale from hdpi) 213/160=1.33125
150 × 150 for high-density screens (×1.5);
200 × 200 for extra high-density screens (×2.0). 
 类似资料:
  • 如何反应本机文本和图像响应? 我只知道Flexbox可以使布局响应,但似乎不能应用于文本和图像。 e、 g.让我的文字和图像在iphone 4s中变小,在iphone6中变大 谢谢

  • 我开始使用响应图像,我有点怀疑。 我有一个图标。我的网站上的图标总是有两种尺寸:一种是74像素宽的小版本,另一种是94像素宽的大版本。 我使用imgix为大图标创建了这个srcset。我检查了这些图像,并以正确的方式调整了它们的大小,1x是94像素宽,2x是188像素宽。 我修正了94的大小,因为在大版本中,图像总是94像素。 现在我的问题是:对于74像素版本,所以小图标,我必须使用74px来重新

  • 我有一个div的背景图像看起来在桌面上非常好。但是当我切换到mobile时,图像从上到下被拉伸,在内容和轮播本身之间产生了很大的空间,而轮播本身都在div中。 下面是滑动器代码: 注我将高度设置为固定的550px,我知道这是问题所在。我的问题是如何使高度的东西,而在移动,使它可以看起来一样,在桌面。 下面是我正在使用的特定轮播的javascript: 这里的截图向你展示了我的网站上正在发生的事情。

  • 我有一个图像,我正在尝试缩放,因为屏幕大小减少。在桌面上,1336x625分辨率的图像可以正常工作,但一旦屏幕缩小到500x625时,图像就不能适当缩放,边缘也会被削减。我试着把最大宽度和位置。但还是没用。我需要改变什么才能让它工作。 Css代码 Html代码:

  • 我有一个全屏PNG我想显示在飞溅。只有一个错误,我不知道每个可提取文件夹(、、和)的大小。我的应用程序应该在所有的手机和平板电脑上运行良好和漂亮。我应该创建多大的尺寸(以像素为单位),以便在所有屏幕上显示好的飞溅?

  • 我在网站的首页上有一张封面照片,它在桌面上看起来很好,随着浏览器大小的变化,它的尺寸也在变化,但在移动设备上打开时看起来绝对可怕。