How display product Image in best quality

Question

The small images I upload to my site seem to have a quality problem in the catalog. I attached images, In the image Its little bit hard to see but there is a big different in the images. I need the image in the site to look the same like the image I upload.

One thing strange that in my local test site (in mamp pro and with the same code) the images in the site are in very good quality, the same like the images I upload. why there is a different from my mamp local site to my site in the server?

this is the code I call the images from the template:

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->setQuality(100); ?>" />

Answer 1

You can set quality of images on this way:

Mage::helper('catalog/image')->init($product, 'small_image')->resize(180, 210)->setQuality(100);

or if you using a Varien_Image object:

/* Varien_Image */
$image->quality(100)

However, their problem appears to be related to GD2, that the class magento used to make manipulation of images.

I've had problems with GD2 in Magento and managed to solve through the given solution this question (see the answer marked as a solution): https://stackoverflow.com/questions/8384678/magento-resize-image-quality

If you can not solve, you can use another class to handle the images: https://github.com/magento-hackathon/Perfect_Watermarks

Answer 2

For the best results load the image twice the needed size. So if you need an image that is 300px x 300px, load it at 600px x 600px. After that shrink the image to 300px x 300px with CSS width:300px;height:auto. This way it will look good on retina displays.