Magento resize() image quality: dirty white background
Asked Answered
H

7

9

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?

Herringbone answered 5/12, 2011 at 11:34 Comment(1)
Here is how the problem looks: github.com/opencart/opencart/issues/3734, see attached images.Sprang
M
22

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.

Maltase answered 6/12, 2011 at 9:23 Comment(3)
Perfect! Thank you so much! This removes the background noise. However I still have problems with color loss - thumbnails appear much duller than the original file that was uploaded Any ideas with this?Herringbone
No, I think there will always be a bit of that quality loss. If the color is drastically different make sure that the photos you upload are RGB and not CMYK as they get converted to the RGB color mode.Maltase
It works really good. We have just problem with performance. It takes time to process image with bigger dimension.Enteritis
V
6

try following example

echo Mage::helper('catalog/image')->init($product, 'small_image')->resize(180, 210)->setQuality(50);
Vacuva answered 9/9, 2012 at 18:52 Comment(3)
This worked great for me. Just a heads up for people who se this, I used a Varien_Image object and had to use just ->quality(50) instead of ->setQuality(50).Chance
setQuality(50) and setQuality(100) didn't worked great for us, but setQuality(95) did worked well.Anatomize
This is NOT a overall compression artifacts question, this is a "grey dirty lines on white background" question. This answer should go here: #10841736Sprang
H
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);
Herbivorous answered 6/12, 2011 at 14:27 Comment(0)
P
1

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.

Prospective answered 5/12, 2011 at 12:56 Comment(0)
G
0

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);
Gregoire answered 5/12, 2011 at 13:5 Comment(2)
I have already set these to 100% and still no change. I suspect this is something to do with the GD2 plugin hosted on the server, rather than something to do with Magento.Herringbone
well you can check your zend library gd options where these files call their methods onGregoire
H
0

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 !

Homerus answered 23/11, 2012 at 10:38 Comment(0)
R
-1

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.

Reside answered 19/6, 2014 at 17:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.