How to Resolve Magento 2’s Blurry Product Images?

This article covers:

1. How to change default product image sizes in Magento 2 product image cache
2. How to resolve Magento 2’s aggressive image compression

The server environment:

1. Apache 2.4, Ubuntu 18.04
2. Magento 2.2.6 upgraded to 2.3.0
3. Used imagemagick instead of GD2

After realising Magento 2 has such an aggressive image compression method, I’ve spent quite a bit time 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.

Step 1 – Increase Maximum Allowed Image Size

Firstly you need to understand 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 1920×1200. 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 5120×2880 (as a revenge!), but all my product images are 1600×1600.

Step 2 – Adjust Product Image Size in view.xml

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 a more significant impact on image quality.

Step 3 – Adjust Image Compression Level

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

Above is incorrect because it never worked! 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

Once I figured out how to write a module instead of modifying core files, I will update this article accordingly.

Conclusion

Magento team should consider making image compression level adjustable in admin, just like they did with the max image size in the 2.3 release. There are plenty of store owners out there have no issues with spending bucks on the 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?