如何使用视网膜产品图像？

Question

您如何在Magento中实施Retina产品图像？我在网络上看到了一些商业主题，但是我不确定如何。

使用类似的东西 Retina.js 对于产品图像和静态块图像都不适用。

Answer 1

视网膜图像不仅仅是像素密度较高的图像吗？您可以通过检测到此密度来检测并切换

var retina = window.devicePixelRatio > 1;
if (retina) {
 // the user has a retina display 
} 
else {
 // the user has a non-retina display 
}

为了使其清洁，您可以制作常规名称图像和图像映射，就像您可以获得图像SRC，添加-Retina并将SRC放回原处。

按照蒂姆的建议将其作为答案。

Answer 2

您可以使用以下JS进行操作；

https://github.com/leonsmith/retina-replace-js

每当任何模板文件都有内联图像时，您都会添加数据属性 data-retina="true" 要标记，即；

    <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img data-retina="true" src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>

对于CSS背景图像，您可以创建两个版本的同一文件，一个尺寸两倍，并使用 _2x 命名惯例，将它们保持在同一目录中，即；

myimage.png
myimage_2x.png

如果您的产品查看页面也使用Cloudzoom之类的JS，则可能会遇到内联图像的问题 - 但是该技术将处理网站中大多数图像的视网膜图像（要查看如何处理产品视图，则应购买产品视图视网膜准备就绪的主题，看看他们如何处理）。

Answer 3

请看看通用 iphone Magento主题。它已经准备就绪。

Answer 4

我不喜欢替换每个图像源的JavaScript解决方案，因为当时用户正常地需要下载这两个图像，尤其是在移动设备上，您不会保存所有数据字节。

但是我发现这个免费扩展： http://www.magentocommerce.com/magento-connect/retina-product-images.html它仅通过PHP为高分辨率设备提供视网膜图像而无需更换。

Answer 5

您可以使用 srcset 因为成为后备。

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

请参阅此链接中的文档：

https://webkit.org/blog/2910/mprevord-support-for-high-resolution-displays-with-the-srcset-image-image-attribute/

兼容性：

http://caniuse.com/#feat=srcset