how to use retina product images?

Question

How are you implementing Retina product images in Magento? I've seen a few commercial themes on the web doing it, but I'm not sure how.

Using something like Retina.js hasn't worked either for both product images and static block images.

Answer 1

Aren't retina images just images with a higher pixel density? You could detect and switch it by detecting this density

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

To make it clean you could make a regular name image and the image-retina, like that you could get the image src, add -retina and put the src back.

Posted this as an answer as Tim suggested.

Answer 2

You can do it using following JS;

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

Whenever any template file has an inline image you would add the data attribute data-retina="true" to the markup, ie;

    <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>

For CSS background images you create two versions of the same file, one twice the size in both dimensions and use the _2x naming convention, keeping them in the same directory ie;

myimage.png
myimage_2x.png

You'll likely run into problems with the inline images if your product view page is also using JS like CloudZoom - but this technique will handle retina images for most of the imagery in the site (to see how to handle the product view you should buy a retina ready theme and see how they've handled it).

Answer 3

Please take a look at generic iphone Magento theme. It is already Retina-ready.

Answer 4

I don't like Javascript solutions that replace the source of each image, because the user then normaly needs to download both images and especially on mobile devices you wan't to save every byte of data.

But I found this free extension: http://www.magentocommerce.com/magento-connect/retina-product-images.html It provides retina images only for high-resolution devices via php without replacing.

Answer 5

You can use srcset for be a fallback.

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

See the documentation in this link:

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

Compatibility:

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