视网膜显示屏的图像

Question

可能重复：
Showing retina display image with pure css

我一直在做关于视网膜显示媒体查询就可以提供更高质量的图像为那些谁拥有视网膜显示一些阅读。 。我的问题是，我是否将相同的图像两次保存在我的资产中（例如，一种药品质量和另一种高质量），然后根据设备是否视网膜准备一个或另一个。

或者我是否有一个图像，然后使用媒体查询以最高质量在视网膜设备上提供图像。

我的第二个问题是如何将我告诉浏览器服务于最优质的所有图像，如果用户有

任何建议表示赞赏，并表示歉意视网膜功能的设备，如果这是一个基本的问题

Answer 1

国际海事组织，你必须根据设备分辨率提供不同的图像 - 主要原因是小型设备可能有较低的带宽连接和较少的资源（考虑本地缓存）等 - 所以较低分辨率的图像（较小的尺寸）将是更好的选择。

无论您是创建静态资产还是使用某些工具/处理程序来动态创建它们都是一个不同的问题。例如，Adaptive Images是基于PHP的解决方案，需要稍后的方法。

编辑
关于你的第二个问题，如果您使用的媒体查询，然后浏览器会做出这样的决定每一次 - IMO，不会有其他的，而不是说使用媒体查询申请整个CSS文件中的任何解决方案意味着该设备。但我认为这与绩效观点不会有任何显着差异。

Answer 2

您是否尝试过在网络上搜索某些解决方案？你有尝试过什么吗？

例如，你有没有试过Retina.js？

所谓的“视网膜”显示器的问题在于，设备浏览器对您的分辨率有所谎言，并且会对您网站上的每个图像和每个其他尺寸进行缩放。如果这些只是高分辨率的显示器而没有说谎，那么就不会有这样的问题，standard responsive design techniques和responsive IMGs tricks就可以工作。

遗憾的是，情况并非如此，现在你的设计必须处理：

1. 宽度（什么是屏幕的宽度）
2. 设备宽度（什么是真正的屏幕的宽度）
3. 所述设备宽度乘以“视网膜”缩放因子（什么是真的真屏幕的宽度）