针对 iPad Pro 显示屏优化的网络图像分辨率答案

【问题标题】：Optimized web image resolution for iPad Pro display针对 iPad Pro 显示屏优化的网络图像分辨率
【发布时间】：2016-04-24 07:33:40
【问题描述】：

我正在为响应式网站创建标题图像（全屏宽度）。

在 12.9 英寸 iPad Pro 上仍然看起来不错的最佳分辨率是多少？

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

规格显示它的分辨率为 2732 x 2048，每英寸 226 像素。

我不希望它在 iPad Pro 上以横向模式查看时看起来像素化。

【问题讨论】：

标签： ios image ipad responsive-design photoshop

【解决方案1】：

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

这意味着如果您想要在 iPad Pro 屏幕上占用 100 像素的图像，您需要使用 72 dpi 的 200 像素 (2x) 图像来获得视网膜清晰度。或者，226dpi 的 100pt（点）图像。

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

我团队中的人经常发现以 1x 进行设计很有用，但要确保文档中的所有光栅图像都转换为智能对象，这样它们就可以在不损失质量的情况下缩小到 2x，然后以 72dpi 输出以利用Photoshop 中的（现在为旧版）Save for Web 工具

【讨论】：

我是否需要提供同一张图片的两个不同版本？还是简单地为所有设备提供最高分辨率的图像？如果我没有按照 iPad Pro 的规格提供全分辨率图像，它是否仍会缩放我的图像而不会失真？
您需要提供的图片数量取决于您的使用情况。由于这是 Web 最佳实践，因此在您的 HTML 中使用一个使用 srcset 属性的 img 元素。这使您可以将适当大小的图像提供给适当的设备。请注意，手机上没有人想下载 2732x2048 图像！如果您在 CSS 中声明您希望 img 为 100px X 100px，它将以 100px x 100px 显示。不同之处在于，如果您使用 100 像素或 1 倍的图像，它在 iPad Pro 上会显得模糊。要非常清晰，它将是 100 像素 X 100 像素图像槽中的 200 像素 X 200 像素图像。
对于支持 2x 的设备，srcset 属性是否替换了src 属性？由于我没有 iPad Pro，有没有办法在 Chrome 中调试它以确保加载正确的图像？
srcset 与 src 结合使用。不支持 srcset 的浏览器，他们只会回退到使用 src。支持它的浏览器将从您在每个图像之后添加的描述符中查找与使用最相关的声明图像。至于调试，有人可能会纠正我，但我认为你需要访问某种视网膜设备。不能代表 Chrome，但如果您无法使用视网膜笔记本电脑，Safari 开发人员工具对于在手机/平板电脑上进行调试非常有用。我强烈推荐使用 srcset，您的用户将受益于带宽优化和图像质量！
您可以将分辨率设置为 300 dpi，这不会改变任何事情。像素就是像素。在您决定打印图像之前，浏览器不会关心 dpi。