Magento – How to increase the quality of product photos JPG (Magento 2)

After realising Magento 2 has such an aggressive image compression method, I've spent nearly a week trying to figure it out how to improve image quality. So far I was able to get the results I wanted, so sharing what I've learned here.

Firstly you need to understand there are two factors come into play to image quality:

1. Maximum Image size allowed
2. Image compression

Not until Magento 2.3.0, developers were able to configure maximum image size in admin as previously was set to 1920x1200. Which means if you have image taller than 1200px, the quality will firstly take a toll on the cropping.

So I had to update to 2.3 to increase the maximum image size which applies to both WYSIWYG editor as well as product images. I set mine as 5120x2880 (as a revenge!), but all my product images are 1600x1600. Product image sizes are controlled in your theme file (one of the many good reasons why child theme is a must have for Magento 2):

{vendor}/{child_theme}/etc/view.xml

After the first step, I noticed my 238kb product image was heavily compressed into 70.1kb (full screen gallery), and 32kb (main product image), which is outrageous! So compression rate has the bigger impact on image quality.

Now here comes the most confusing part: in most threads out there people recommend to change or rewrite this core file:

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

This is incorrect because it never worked for me!!!

I found changing the settings from 80 to 100 in below file finally killed the beast:

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

Unfortunately I don't know how to write a module instead of modifying this core file, so if anyone is more tech inclined in this area, please help!

Magento team should consider to make image compression level adjustable in admin, just like they did with the max image size in the 2.3 release. There are plenty store owners out there have no issues with spending bucks on server, and they certainly don't want the eCommerce platform itself to become the limitation for user experience. What's more important than high quality product images? It's hard to argue, isn't it?

The quality of image is set in Magento\Catalog\Model\Product\Image at line no 39 protected $_quality = 80;

You can override this in you module.

File : CompanyName/ModuleName/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="CompanyName\ModuleName\Model\Product\Image" />
</config>

File : CompanyName/ModuleName/Model/Product You can set the quality to which you want to set. Then flush image cache.

namespace CompanyName\ModuleName\Model\Product;

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

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

        parent::_construct();
    }
}