Magento resize() image quality: dirty white background

问题

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?

回答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.

回答2:

try following example

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

回答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);

回答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.

回答5:

quick grep shows that you are able to set this on product_image object

app/code/core/Mage/Catalog/Helper/Image.php:105:     * Set image quality, values in percentage from 0 to 100
app/code/core/Mage/Catalog/Helper/Image.php:107:     * @param int $quality
app/code/core/Mage/Catalog/Helper/Image.php:110:    public function setQuality($quality)
app/code/core/Mage/Catalog/Helper/Image.php:112:        $this->_getModel()->setQuality($quality);
app/code/core/Mage/Catalog/Model/Product/Image.php:38:    protected $_quality = 90;
app/code/core/Mage/Catalog/Model/Product/Image.php:88:     * Set image quality, values in percentage from 0 to 100
app/code/core/Mage/Catalog/Model/Product/Image.php:90:     * @param int $quality
app/code/core/Mage/Catalog/Model/Product/Image.php:93:    public function setQuality($quality)
app/code/core/Mage/Catalog/Model/Product/Image.php:95:        $this->_quality = $quality;
app/code/core/Mage/Catalog/Model/Product/Image.php:100:     * Get image quality
app/code/core/Mage/Catalog/Model/Product/Image.php:106:        return $this->_quality;
app/code/core/Mage/Catalog/Model/Product/Image.php:331:                'quality' . $this->_quality
app/code/core/Mage/Catalog/Model/Product/Image.php:387:        $this->_processor->quality($this->_quality);

回答6:

I had the same issue with some of my images, later i realized that those images with lower resolution were getting distorted, try using an image more than 1100 X 1100 and it should work just fine !

回答7:

Upload the images as PNG's. They may not be as small as JPG, but it allowed us to avoid some image quality issues created by Magento's resizing functionality.

来源：https://stackoverflow.com/questions/8384678/magento-resize-image-quality-dirty-white-background

标签

magento

thumbnails

gd2