I upload my pictures at 864px by 864px. They look great on the product page (I also like that they no longer open a new window when clicked).
However, the first thing my customers see are the blurry new products images on the home page.
Using Chrome Inspect Element on the image, it appears to be resizing the image to 135, because I see these attributes: width="135" height="135"
However, chrome shows the image itself is 275x275 (actually, it says it is 274.844x275). So it seems the image is being resized to 135x135, then scaled up to 275x275 when displayed, thus making the image unnecessarily pixelated (blurry).
I've looked for the resize command that may be causing this, and found a potential culprit around line 50 in: app/design/frontend/default/my_theme/template/catalog/product/list.phtml
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
However, changing the width and height attributes to 275 and changing the resize(135) to resize(275) has no visible effect on the image.
Does anybody here know how to fix this problem?