0

首先是一些 DPI 统计数据：

Mack Book Pro 13.3" 具有227 DPI（2560x1600 像素/13.3 英寸）。

iPhone 6s 具有326 DPI（750x1334 像素/4.7 英寸）。

索尼 Xperia Z 平板电脑具有224 DPI（1920x1200 像素/10.10 英寸）。

但是，当我为 Web 保存 JPEG 图像时，它具有72 DPI，并且只有当我将容器分辨率设置为比图像分辨率低 2 倍时，图像才会看起来不错。

例如，

<img src="200x200px_72dpi_image.jpg" width="100px" height="100px">

为视网膜显示器（iPhone 6s、Mac Book Pro 13.3" 等）和

<img src="100x100px_72dpi_image.jpg" width="100px" height="100px">

产生不好的结果。

2018年我能用它做什么？300 DPI 图像是否应该用于网络？

4

1 回答 1

1

Apple 认为他们会对这个主题有疑问，并发布了一些如何处理它的指南/建议。

如果客户端浏览器可以支持，这一切都归结为提供2x图像的网站——否则默认回到 72 DPI 标准。

2018年图像DPI应该是72pixels/inch吗？

是的。支持更高分辨率的设备相对较新，尚未达到 100% 的市场饱和度。

300 DPI 图像是否应该用于网络？

300 DPI 可能是矫枉过正。该分辨率的图像将具有非常大的文件大小，并且与稍微像素化的图像相比，用户可能会因较长的加载时间而被推迟。您需要设计一个符合您业务需求的合理平衡。

2018年我能用它做什么？

我的两分钱...

  • 探索 JPEG 以外的其他格式。探索 SVG 以获取艺术线条图形。WebP对于照片也值得探索。

  • 默认为 72dpi，并选择加入更高的 DPI。借助媒体查询和许多流行的现代 CSS/JS 框架，设备只需很少的努力就可以2x通过低分辨率默认值加载资源。诚然，您需要以不同的分辨率渲染相同的图像资源，但这可以自动化。

  • 时间。即使在 2018 年，这些东西仍在发生变化，供应商也在这个 HDR 领域展开竞争。Expect -webkit, -moz&-ms前缀，直到达到标准（如果不是全部准备好）。

于 2018-12-05T11:45:46.910 回答