Magento resize() image quality: dirty white background

Question

I have a client who is seriously unhappy with the way their product thumbnails are rendering on Magento.

The dodgy appearance is noticeable on two accounts:

• there is a dirty white background which has very light grey horizontal lines
• and secondly there is ever so slight color loss (loses contrast and saturation).

I have removed ALL compression, set ALL quality to 100%, flushed image cache, experimented, broken, and fixed it all dozens of times, and nothing seems to work.

This version of Magento is ver. 1.4.2.0

Is anyone out here experiencing the same problems, and if so have you managed to fix it?

Answer 1

The problem has to do with the php function imagecopyresampled in the resize function inside lib/Varien/Image/Adapter/Gd2.php, there are some rounding issues that occur to make a smoothly resized image.

My solution is to simply change any very light grey pixels in the image to pure white after the image has been resized. To do so first copy lib/Varien/Image/Adapter/Gd2.php to app/code/local/Varien/Image/Adapter/Gd2.php

Next find the following code inside the resize function (around line 312)

// resample source image and copy it into new frame
imagecopyresampled(
    $newImage,
    $this->_imageHandler,
    $dstX, $dstY,
    $srcX, $srcY,
    $dstWidth, $dstHeight,
    $this->_imageSrcWidth, $this->_imageSrcHeight
);

Then add the following code underneath:

// 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);
            }
        }
    }
}

Flush the images cache from the Cache management in Magento, and you should have nicer images for the new displays. Few things to note when implementing this, there is a small performance hit the first time you generate the images again, and images with shadows may have sharper edges as the very light greys have been removed.

Answer 2

try following example

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

Answer 3

You can put your own Gd2.php file in local (app/code/local/Varien/Image/Adapter/Gd2.php) and hard-wire the quality to 100%.

Quality is working for me so I have not done that.

You can also put an image convolution in there to sharpen your images, in that way you get the blur of a resize compensated for with a sharpen, e.g. put the following just inside the end of the 'resize' function:

    $sharpenMatrix = array(array(-1,-1,-1),array(-1,24,-1),array(-1,-1,-1));
    $divisor = 16;
    $offset = 0;
    imageconvolution($newImage, $sharpenMatrix, $divisor, $offset);

Answer 4

I had problems with images quality on one of projects. But the problem was not on back-end, but on the front-end. Images had bad quality because images width and height given in the CSS was not the same as the image file had.