Increase the quality of the photos on Magento

04/11/2009 - 19:47 / Posted by Arnaud Ligny

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:

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.)
create a module to administer the value of the compression quality via the back office: interesting, but reusable too long to achieve. I pass! :-)
override the code: easy, fast and clean: the solution I have chosen

Change the compression quality photos Magento:

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

Catégorie: Magento

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

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

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

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 (visitor) - Thu, 08/07/2010 - 11:33:

Thanks for your sharing about the Code. Useful indeed.

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

Arnaud Ligny - Mon, 06/09/2010 - 10:03:

Ashish, read my comment above! :-)

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!!

Anonymous (visitor) - Tue, 07/09/2010 - 16:15:

Hi Arnaud,
Can you help i found list.phtml in
app\design\frontend\default\f001\template\catalog\product and it has followind code - i just can't figure out what to change -
CAN YOU PLEASE HELP- i'll appreciate it very much.

=================line 50=================
<?php // Product Image ?>
getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
==================line 98=====================
helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
===============================================

Thanks!!!

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

i will try it.

thanx.

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 (visitor) - Thu, 09/06/2011 - 17:05:

this work in magento 1.5.0.1 thx :D

office 2010 (visitor) - Thu, 13/10/2011 - 03:41:

Einfuhrung from Office 2007 death revolutionaren yangon Microsoft Office 2007 fruhen nest Tastatur through yangon Office 2007 Download vergessene chart Navigationsmethode Office 2007 Professional holiday with his MS Office 2007 angestaubt wenig vein Office 2007 Key, but dennoch China and buy microsoft office 2007 Zwecken Programmen modernen also Download Office 2007 unhappy with praktisch selten erst Microsoft Office 2007 Professional, analysing Zeitsparer purchase microsoft office 2007 echter vein.Microsoft Office 2010 Many people use Office 2010 to help their work and life Microsoft office 2011.

This is the Download Office 2010 art Kontrolle winter altmodisch just and MS Office 2010, and not unsinnig sieht nest Office 2010 Key. Here are written by Office 2010 Download Tastatur enorm erreichen physician Office 2010 Professional. I eventuell Microsoft Office 2010 Download death Anwendungen many buy microsoft office 2010 Tastenkommandos Buy Windows 7 relativ flag-bearing Windows 7 angewiesen bigger worry, weniger Microsoft Windows 7 die interface anxiety.Win 7 is such a good assistant of the Download Windows 7.
http://softwarestockss.blogspot.com

http://software-stocks.com

Anonymous (visitor) - Thu, 20/10/2011 - 12:59:

thank u for your article

منتدى بناتى
great with
منتدى تصميم
good for
العاب بنات لها

Office 2007 (visitor) - Fri, 02/12/2011 - 06:23:

I will keep your new article. I really enjoyed reading this post, thanks for sharing.

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

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

gianmarco lorenzi (visitor) - Wed, 07/12/2011 - 10:32:

gianmarco lorenzi shop sales the full range of shose.Whether gianmarco lorenzi boots or gianmarco lorenzi pumps,you can see here.Even if you want to buy gianmarco lorenzi sandals in winter is also possible.

new era hats (visitor) - Thu, 12/01/2012 - 10:41:

Superb! Generally I never read whole articles but the way you wrote this information is simply amazing and this

kept my interest in reading and I enjoyed it.

http://www.discounthatsshop.com/

Hogan (visitor) - Fri, 24/02/2012 - 09:26:

L . a . cosa che ci piace di borse Balenciaga è che sono comode da indossare
Hogan
Di salire inside borsa è molto facile elizabeth molto spazioso. Si possono indossare minus denims a una t-shirt a una notte alluring sul pace. Le borse anche indossare bene inside modo da low avere 's bambino che any differenza di not Dior a di borse Hermes Birkin. Il prezzo può essere molto pesante, mother sony ericsson si è aperti any uno any causa di queste borse da una stagione precedente, quindi è possibile trovare alcune opzioni any prezzi accessibili. Grazie elizabeth indossando una di queste bellissime borse sarà sicuramente any causa teste, passeggiando da.
www.hogansitoufficialev-italian.org

Anonymous (visitor) - Sat, 17/03/2012 - 10:48:

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. laptop bag manufacturer, laptop bag supplier and laptop bag factory, custom laptop bags, customized laptop bags.

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.

Office 2010 Professional (visitor) - Mon, 26/03/2012 - 04:37:

I will keep your new article. I really enjoyed reading this post, thanks for sharing.

Lysa Flores (visitor) - Tue, 03/04/2012 - 13:18:

yes i have the same problem with the flower images in my flowershop. Strange magento doesn´t allow you to configure this manually! it would make my flowers look a lot better!

Lysa Flores

Baobaz Blog