This article covers:
- How to change default product image sizes in Magento 2 product image cache
- How to resolve Magento 2’s aggressive image compression
The server environment:
- Apache 2.4, Ubuntu 18.04
- Magento 2.2.6 upgraded to 2.3.0
- 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:
- Maximum Image size allowed
- 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.
To Change Settings go to: Store -> Configuration -> Advanced -> System -> Images Upload Configuration
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. Merchants should always strive for best image quality possible, if speed becomes an issue we should consider utilising CDN rather than using low quality images.
