18

The JPG compression on Magento 2 is very strong, so that the quality of product images get really bad in Catalog and Product view. How can I change the Image compression for JPG's in Magento 2?

14

This solution works for me :

File : {Vendor}/{Module}/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Model\Product\Image" type="{Vendor}\{Module}\Model\Product\Image" />
</config>

File : {Vendor}/{Module}/Model/Product You can set the quality to whatever you want. Then flush image cache.

namespace {Vendor}\{Module}\Model\Product;

class Image extends \Magento\Catalog\Model\Product\Image {

    protected function _construct() {
        $this->_quality = 100;

        parent::_construct();
    }
}
  • what is the path to put this file in your custom theme? i cant figure out M2s filing structure. M1 was sooooo much easier – styzzz Jul 20 '17 at 15:18
  • In app/code/{Vendor}/{Module} – Papamike Jul 21 '17 at 18:02
  • but wont that get overridden during upgrade? i thought you would have to put it in your theme. no? – styzzz Jul 22 '17 at 20:00
  • 1
    No, the {Vendor} folder must be replaced by you namespace (could be styzzz by example). It won't be overridden. Ex.: /app/code/styzzz/ImageCompression/... – Papamike Jul 31 '17 at 16:37
  • If you have PNG image for product, the compression level is hardcoded in the GD2 adapter : vendor/magento/framework/Image/Adapter/Gd2.php:167 to 9 (max) – Franck Garnier Aug 30 '17 at 15:54
2

inside - vendor/magento/module-catalog/Helper/Image.php

You will find the generic:

public function setQuality($quality)
{
    $this->_getModel()->setQuality($quality);
    return $this;  
}

If you grep for its usage you will find a method of the same name in:

magento/module-catalog/Model/Product/Image.php

and inside that file:

/**
 * Default quality value (for JPEG images only).
 *
 * @var int
 */         
protected $_quality = 80;

It is this value - that needs setting to 95.

This will reduce the compression and artefacts in the site.

Your guys will i assume have to make this modifications with a suitably deployed code override - i.e. not by modification of this core file. Im not a magento developer otherwise i'd have a crack....

  • 3
    Actually, changing any values in the Core (vendor) will be overwritten with the next update, so changing core files is in general a bad idea – Marcel Hauri Sep 22 '16 at 8:19
2

The answers here are pretty wrong IMO. It's not the quality you should be changing first hand, it's the size of the images. Why?

Well the thing is when compressing an image to get the smallest possible file size then the compression rate is the most beneficial in achieving that goal. The second one is the dimensions of the image. Also you should always compress the original source image before downsizing it (I haven't checked how magento handles this) to get the file size down as much as possible whilst preserving details.

On retina screens you need 2x the displayed size. So in order to get a sharp image displayed at 250x250 pixels, then the image needs to be 500x500 pixels.

So I'd start with changing in the themes view.xml to double the displayed size. If the image still doesn't look good then I'd consider upping the quality setting. If you have time you could implement responsive images as well (so doubled sizes are only loaded on retina screen devices).

You can also get the size down by removing all meta data from the image, not sure if magento does that by default or not. It's usually a part of good image compressing services.

  • 1
    Thank you for explaining this mate! I knew there must be a logical reason for magento's image tomfoolery! I'm still a bit confused about implementation though. So, say my products are displaying on the product page as a 700px square, then I would need to create an image that is 1400px square, then change the corresponding setting in the view.xml file to 1400px as well? I have been playing with this, as well as the override mentioned in other answers, but the quality is always lower on the product page than it is when I click on the image to enter the 'zoomed' view. – Joshua Flood Jun 15 '18 at 11:03
  • @JoshuaFlood I think the zoomed image has it's own entry in view.xml with a bigger size, can't remember exactly what key it has or what size it is though – OZZIE Jun 18 '18 at 5:50
  • No worries I sorted it. Thanks for the tip! Not sure exactly what did it but I had forgotten to replace the 'small' images with the double-sized ones, so the problem could be there. – Joshua Flood Jun 18 '18 at 14:04
  • This is not a good answer. What you should do is use responsive images and the srcset attribute - not just provide a larger image in general that will be downscaled whenever necessary. – fritzmg Aug 22 '18 at 10:51
  • @fritzmg "first hand" "If you have time you could implement responsive images as well".. which part do you find difficult to understand? – OZZIE Aug 22 '18 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.