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?

Improve this question

4 Answers 4

Reset to default
15

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();
    }
}
Improve this answer
8
  • 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, 2017 at 15:18
  • In app/code/{Vendor}/{Module}
    – Papamike
    Jul 21, 2017 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, 2017 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, 2017 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, 2017 at 15:54
14

As for Magento 2.3.2 it's possible to set image quality without changing the code:

Stores > Configuration > Advanced > System > Images Upload Configuration > Quality > 100

XML config path is:

system/upload_configuration/jpeg_quality
Improve this answer
4
3

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.

Improve this answer
6
  • 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.
    – Muckee
    Jun 15, 2018 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, 2018 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.
    – Muckee
    Jun 18, 2018 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, 2018 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, 2018 at 14:05
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....

Improve this answer
1
  • 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, 2016 at 8:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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