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.
-
1Aren'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 }– Toon Van DoorenCommented Jun 21, 2013 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.– philwinkleCommented Jun 21, 2013 at 19:33
-
@ToonVanDooren, why not post it as an answer? ;)– Tim BezhashvylyCommented Jun 23, 2013 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.– Toon Van DoorenCommented Jun 23, 2013 at 20:31
Add a comment
|
5 Answers
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.
-
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.– user2461Commented Jun 25, 2013 at 13:48
-
@BransonWerner just comment here if you need more help with that Commented Jun 25, 2013 at 14:37
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).
Please take a look at generic iphone Magento theme. It is already Retina-ready.
answered Jun 23, 2013 at 14:53
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.
You can use srcset for be a fallback.
<img src="normal-image.jpg" srcset="better-image.jpg 2x">
See the documentation in this link:
Compatibility:
answered May 30, 2016 at 22:57
