Magento – How does Magento 2 process & compress product images

imagemagento2product-images

Im looking for a complete explanation on how Magento 2 processes and compresses product images.

  1. How does Magento 2 compress JPG & PNG product images?
  2. What compression methods does it use?
  3. Which image processing adapter setting is better, ImageMagick or PHP GD2?
  4. Which specific files in the magento core are responsible for setting the compression levels for product images.

8 Bit PNG Images

If 8bit PNG images are uploaded they become very pixelated by Magento, with both the PHP GD2 or ImageMagick image processor configured.

I have found that in vendor/magento/module-catalog/Model/Product/Image.php the jpeg image quality is set to 80 by default. 

protected $_quality = 80;

And in vendor/magento/framework/Image/Adapter/Gd2.php the quality is set to 9.

switch ($this->_fileType) {
    case IMAGETYPE_PNG:
        $quality = 9;   // For PNG files compression level must be from 0 (no compression) to 9.
        break;

Although when I change the png compression level to 0 from 9 (for testing purposes only) I see no change, even after clearing cache, flushing the catalog images and removing cached and generated directories. With xDebug on I can confirm this line is being called, but it has no noticeable effect.

Following setting the quality, it's added to the $functionParameters which also holds the image processor adapter type, and image destination path. Can other parameters be added.

$functionParameters = [$this->_imageHandler, $fileName];
if ($quality) {
    $functionParameters[] = $quality;
}

Best Answer

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?

Related Topic