iPad Pro显示屏的优化网页图像分辨率

Question

我正在为响应式网站创建标题图像(全屏宽度).

什么是最佳分辨率,在12.9"iPad Pro上看起来仍然不错？

我的正常工作流程是在Photoshop中以72 PPI创建图像.

该规范表明它的分辨率为2732 x 2048,每英寸226像素.

在横向模式下在iPad Pro上观看时,我不希望它看起来像素化.

Answer 1

iPad Pro实际上有2732 x 2048像素用于显示屏幕,但我们用户将其视为1336x1024显示器.

所以这意味着如果你想要在iPad Pro屏幕上占用100px的图像,你需要在72dpi使用200px(2x)图像来获得视网膜清晰度.或者,226dpi的100px图像.

因此,对于iPad Pro的全尺寸图像,您需要以72dpi的2732x2048输出图像

我的团队中的人经常发现以1x进行设计是有用的,但要确保文档中的所有光栅图像都转换为智能对象,这样它们可以缩放到2x而不会丢失质量,然后以72dpi输出以利用(现在遗产)在Photoshop中保存Web工具

您需要提供的图像数量取决于您的使用情况。由于这是 Web 最佳实践，因此在 HTML 中使用带有 srcset 属性的 img 元素。这使您可以将适当大小的图像提供给适当的设备。请注意，没有人愿意使用手机下载 2732x2048 的图像！如果您在 css 中声明您希望 img 为 100px X 100px，它将以 100px x 100px 显示。不同之处在于，如果您使用 100px 或 1x 图像，它在 iPad Pro 上看起来会很模糊。为了清晰起见，它将是 100px X 100px 图像槽中的 200px X 200px 图像。 (2认同)
您可以将分辨率设置为300 dpi,这不会改变任何事情.像素是像素.在您决定打印图像之前,浏览器不会关心dpi. (2认同)