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?

Victor Sergienko
  • 13,115
  • 3
  • 57
  • 91
digiwig
  • 621
  • 1
  • 9
  • 21

7 Answers7

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.

Jasuten
  • 1,570
  • 12
  • 20
  • 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? – digiwig Dec 07 '11 at 14:13
  • 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. – Jasuten Dec 07 '11 at 23:29
  • Perfect solution. Thank you (bow) – Jaro Jul 15 '15 at 09:01
  • It works really good. We have just problem with performance. It takes time to process image with bigger dimension. – Jaro Aug 04 '15 at 08:46
6

try following example

echo Mage::helper('catalog/image')->init($product, 'small_image')->resize(180, 210)->setQuality(50);
Alex
  • 769
  • 1
  • 11
  • 18
  • 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)`. – Natalie Hedström Aug 21 '15 at 11:35
  • `setQuality(50)` and `setQuality(100)` didn't worked great for us, but `setQuality(95)` did worked well. – Kalpesh Sep 18 '15 at 18:20
  • This is NOT a overall compression artifacts question, this is a "grey dirty lines on white background" question. This answer should go here: http://stackoverflow.com/questions/10841236/how-to-deal-with-image-quality-in-magento – Victor Sergienko Mar 16 '16 at 13:26
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,012
  • 7
  • 32
  • 53
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.

vsushkov
  • 2,445
  • 1
  • 19
  • 28
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 !

mayurvir
  • 337
  • 4
  • 14
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);
Anton S
  • 12,750
  • 2
  • 35
  • 37
  • 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. – digiwig Dec 05 '11 at 15:40
  • well you can check your zend library gd options where these files call their methods on – Anton S Dec 05 '11 at 20:05
-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.

NateFriedman
  • 530
  • 4
  • 9