对背景图像使用 CSS 媒体查询非常棒,但是常规的嵌入图像呢?
www.retinajs.com和www.retina-images.complexcompulsions.com很棒,但我对它们都有一个问题。它们为所有视网膜设备提供视网膜图形,无论大小。例如,iPhone 不需要为其提供视网膜图形,因为它无论如何都会缩小图像。在具有(可能)和慢速连接的 iPhone 上提供双分辨率图像是一种浪费。
有人对此有解决方案吗?
对背景图像使用 CSS 媒体查询非常棒,但是常规的嵌入图像呢?
www.retinajs.com和www.retina-images.complexcompulsions.com很棒,但我对它们都有一个问题。它们为所有视网膜设备提供视网膜图形,无论大小。例如,iPhone 不需要为其提供视网膜图形,因为它无论如何都会缩小图像。在具有(可能)和慢速连接的 iPhone 上提供双分辨率图像是一种浪费。
有人对此有解决方案吗?
Matt Wilcox 构建了http://adaptive-images.com/来解决这个问题。不过,它需要一些服务器端代码。
此外,W3C 正在研究<img srcset="big.png 1100w, medium.png 500w, small.png 200w">
,但我不确定它是否已被纳入标准(存在很多分歧),或者 webkit 是否曾开始实施它。
正如@OllyHodgson 所建议的那样,自适应图像是一个非常好的解决方案, johannheyne提供的扩展脚本更能涵盖您的确切问题,控制应该作为视网膜图像的内容和方式。希望这可以帮助!