2018 年图像 DPI 应该是 72 像素/英寸吗？
Should image DPI be 72pixels/inch in 2018?
首先是一些 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 图像应该用于网络吗？
Apple 认为他们会对这个主题有疑问，并发布了几个指南/建议来处理它。
- About Proper Image Delivery on the Web
- Serving Images Efficiently to Displays of Varying Pixel Density
这一切都归结为提供 2x 图片的网站 IF 客户端浏览器 CAN 支持它——否则默认返回降至 72 DPI 标准。
Should image DPI be 72pixels/inch in 2018?
是的。支持更高分辨率的设备相对较新，尚未达到 100% 的市场饱和度。
Should 300 DPI image be used for web?
300 DPI 可能有点矫枉过正。该分辨率的图像将具有非常大的文件大小，并且与稍微像素化的图像相比，用户可能会因较长的加载时间而更加推迟。您需要设计符合您的业务需求的合理平衡。
What can I do with that in 2018?
我的两分钱...
探索 JPEG 以外的其他格式。探索用于艺术线条图形的 SVG。 WebP 也值得探索照片。
默认为 72dpi，并可选择更高的 DPI。使用媒体查询和许多流行的现代 CSS/JS 框架，设备只需很少的努力就可以通过低分辨率默认值加载 2x 资源。的确，您需要以不同的分辨率渲染相同的图像资源，但这可以自动化。
时间。即使到了2018年，这玩意儿还在变，厂商们都在争这个HDRspace。期待 -webkit、-moz 和 -ms 前缀，直到达到标准（如果尚未全部准备好）。
首先是一些 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 图像应该用于网络吗？
Apple 认为他们会对这个主题有疑问，并发布了几个指南/建议来处理它。
- About Proper Image Delivery on the Web
- Serving Images Efficiently to Displays of Varying Pixel Density
这一切都归结为提供 2x 图片的网站 IF 客户端浏览器 CAN 支持它——否则默认返回降至 72 DPI 标准。
Should image DPI be 72pixels/inch in 2018?
是的。支持更高分辨率的设备相对较新，尚未达到 100% 的市场饱和度。
Should 300 DPI image be used for web?
300 DPI 可能有点矫枉过正。该分辨率的图像将具有非常大的文件大小，并且与稍微像素化的图像相比，用户可能会因较长的加载时间而更加推迟。您需要设计符合您的业务需求的合理平衡。
What can I do with that in 2018?
我的两分钱...
探索 JPEG 以外的其他格式。探索用于艺术线条图形的 SVG。 WebP 也值得探索照片。
默认为 72dpi，并可选择更高的 DPI。使用媒体查询和许多流行的现代 CSS/JS 框架，设备只需很少的努力就可以通过低分辨率默认值加载
2x资源。的确，您需要以不同的分辨率渲染相同的图像资源，但这可以自动化。时间。即使到了2018年，这玩意儿还在变，厂商们都在争这个HDRspace。期待
-webkit、-moz和-ms前缀，直到达到标准（如果尚未全部准备好）。