Increase the quality of the photos on Magento

I was recently confronted with problems of quality photos on Magento.

At first, I vainly sought an option to resolve this with the Magento backend... I finally get to the obvious: this is not possible (at least until version 1.3).
I then studied the source code to determine how the framework manages and generates mainly the different sizes of pictures (on the page list, thumbnails, etc..) products.

I discovered that Magento uses GD2, with a quality setting to 80% by default (not changeable via configuration, back-office or XML). A value 80/100 quality is good in most cases. Nevertheless in e-commerce have known that a very good picture quality can make the difference.

The idea is to push the compression quality (jpeg) to 90%, the possible options are:

  1. modify the PHP code found above: No, you should never directly edit the code from the core of Magento! (just as one shouldn't cross the streams.)
  2. create a module to administer the value of the compression quality via the back office: interesting, but reusable too long to achieve. I pass! :-)
  3. override the code: easy, fast and clean: the solution I have chosen

Change the compression quality photos Magento:

  1. Step 1

    Copy the file "/ lib/Varien/Image/Adapter/Gd2.php" to "/ app/code/local/Varien/Image/Adapter/Gd2.php" by creating the missing directories if necessary.

  2. Step 2

    Open the file Gd2.php (copy, not original) at about line 80 and substitute:

    call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName);

    by:

    if ($this->_fileType === IMAGETYPE_JPEG) {
        call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName, 90);
    } else {
        call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName);
    }

    In the code above, I opted for 90, but you can change this value from 0 to 100 quality.

  3. Step 3

    Finally, don't forget to empty the cache of images via System> Cache Management.

That was simple, effective and reusable on any project, from the time you work with images in jpeg format (which format most common with digital photography) and your server supports GD2.


Original post published on Narno.com

10 comments on "Increase the quality of the photos on Magento"

Rodrigo's picture
Rodrigo (visitor) - Tue, 15/12/2009 - 18:58:

Merci, Arnaud. Nice piece of code. It works great and helps a lot

Arnaud Ligny's picture
Arnaud Ligny - Mon, 07/06/2010 - 12:36:

It should be noted that since Magento CE version 1.4 and EE 1.8, there is no need to duplicate the adapter.

Indeed, a new method called setQuality has been implemented and can be used directly in templates.

For example:

echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(42, 50)->setQuality(90);

imitation jewelry's picture
imitation jewelry (visitor) - Thu, 08/07/2010 - 11:33:

Thanks for your sharing about the Code. Useful indeed.

Anonymous's picture
Anonymous (visitor) - Sun, 05/09/2010 - 05:59:

Hi,
I just can't find the code in v1.4.1.1 can someone please elaborate what we need to change in the new version.
I'm really stuck as the thumbnail quality really sucks.
Thanks
Ashish

Anonyme's picture
Anonyme (visitor) - Mon, 06/09/2010 - 11:15:

Hi Arnaud,

Sorry but i did not understand what do you mean by -
================
there is no need to duplicate the adapter.
Indeed, a new method called setQuality has been implemented and can be used directly in templates.

For example:
echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(42, 50)->setQuality(90);
================

Can you please clarify in what file we need make the change? Is it app/code/local/Varien/Image/Adapter/Gd2.php?

If yes then i can find the above code you have given in example - where do i add this code?

It would be of GREAT help if you can provide step by step guide. My images have shadow in them and magento is really destroying the thumbnails.

Thanks for your help!!

fotograf's picture
fotograf (visitor) - Sat, 02/10/2010 - 23:39:

i will try it.

thanx.

Magento designer's picture
Magento designer (visitor) - Tue, 10/05/2011 - 15:07:

i was knowing that we can increase the quality of the photograph in magento but i was not knowing how thanks for the share this helped me a lot in magento development

Anonymous's picture
Anonymous (visitor) - Thu, 09/06/2011 - 17:05:

this work in magento 1.5.0.1 thx :D

Beebond's picture
Beebond (visitor) - Tue, 06/12/2011 - 11:14:

There is plenty of information on magento forums too about this problem.

Ken's picture
Ken (visitor) - Sat, 24/03/2012 - 22:59:

Hi, unfortunately this solution is not good enough if someone wants accurate color/saturation/gamma as well as contrast -- haven't you guys noticed that no matter what, the photos in Magento are washed out? I can't figure out how to solve this problem. It is not affected by setQuality -- I have used values of 10 and 100 and noticed that there is a big difference between the two, and so I know that I am putting the code in the right place. The problem is that it only affects image compression/noise, it doesn't solve the problem of the contrast and color being changed from the original jpg.

Anyone have any idea on how to get around GD2 completely? I don't need to resize, I can just do that in photoshop and upload multiple images. I just don't know how to tag them in the back end (small? base?) and how to display them in phtml without any modification to the image. This is truly awful.