How to Resolve Magento 2’s Blurry Product Images?

No Comments

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, 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

There are many different ways, and we figured it out that changing the settings from 80 to 100 in below file stops Magento image compression.

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

If time allows you should always consider create your own module when rewriting Magento core files.

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. After all displaying blurry images is bad user experience.

To many, a business is a lifetime commitment. It's easy to start one yet difficult to make it successful. Attitude, skills, experiences and dedication help hone the craft along the way, but it's often the great vision and resilience to remain focused wins the game. Read more about me here

More from Our Blog

See all posts