4

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.

4
  • 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 } Jun 21 '13 at 17:20
  • Not a bad methodology, though, using a background image would allow you to do this with CSS and media queries rather than JS.
    – philwinkle
    Jun 21 '13 at 19:33
  • @ToonVanDooren, why not post it as an answer? ;)
    – user487772
    Jun 23 '13 at 14:55
  • @philwinkle how would you do this for every single product image? You could indeed give for example a classname with the productname in it but filling in all te images in css will require alot of work or generating the file wich would be sloppy. Jun 23 '13 at 20:31
2

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.

2
  • Im marking this as the answer. Next up is actually writing some code to look for the @2x and change the image src out when a Retina device is used. This is pretty much what Retina.js is doing, but I cant get it to work in Magento. Jun 25 '13 at 13:48
  • @BransonWerner just comment here if you need more help with that Jun 25 '13 at 14:37
0

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

0

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

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.