The section where the image should be renders an empty div:
<div class="product-img-box" style="width:277px;">
</div>
Make sure you don't have an extension that changed your media.phtml file, or if nothing is commented in that file.
Also check the var/log folder for errors.
Turn on template path hints to see what template should be rendered in that section.
I don't think the problem is related to server misconfiguration. It's code issue.
This is an issue caused by Gd2 library, there is an ImageMagic adapter that can help:
https://github.com/magento-hackathon/Perfect_Watermarks
If you want you can also try to fix Gd2:
Just copy lib/Varien/Image/Adapter/Gd2.php to app/code/local/Varien/Image/Adapter/Gd2.php
And then find the following code inside the resize function:
// resample source image and copy it into new frame
imagecopyresampled(
$newImage,
$this->_imageHandler,
$dstX, $dstY,
$srcX, $srcY,
$dstWidth, $dstHeight,
$this->_imageSrcWidth, $this->_imageSrcHeight
);
And add this code after:
// Clean noise on white background images
if ($isTrueColor) {
$colorWhite = imagecolorallocate($newImage,255,255,255);
$processHeight = $dstHeight+$dstY;
$processWidth = $dstWidth+$dstX;
//Travel y axis
for($y=$dstY; $y<($processHeight); ++$y){
// Travel x axis
for($x=$dstX; $x<($processWidth); ++$x){
// Change pixel color
$colorat=imagecolorat($newImage, $x, $y);
$r = ($colorat >> 16) & 0xFF;
$g = ($colorat >> 8) & 0xFF;
$b = $colorat & 0xFF;
if(($r==253 && $g == 253 && $b ==253) || ($r==254 && $g == 254 && $b ==254)) {
imagesetpixel($newImage, $x, $y, $colorWhite);
}
}
}
}
The credit goes to: https://stackoverflow.com/questions/8384678/magento-resize-image-quality
Best Answer
Aren't retina images just images with a higher pixel density? You could detect and switch it by detecting this density
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.