In the article we are going to take a look at how Magento manages product images, where there is room for improvement and what can be done about it. If you're looking to reduce your product image cache size, workout why your product image is so large or remove product images that aren't used this article is for you. This module will work regardless of you being on MDOQ managed Magento hosting or not.
If you're not interested in the why please feel free to jump to the bottom for installation and usage instructions for the media clean up module.
Why
A question you might be wondering is, why I need to cleanup/maintain my product images? Here are a few key points that should help you answer this question.
- Reducing the overall size required to store images can reduce your hosting costs quite significantly.
- Reducing the size required to only what you need will lower your disaster recovery time, it takes a lot less time to restore 50GB of media data then it does to restore 100GB.
- Improve back up speed and lower the load on your server. The fewer files to backup, the less time and effort it takes for your server to back these up.
- Reduce virus scanning time, the fewer files you have to scan the quicker virus scanners can run.
How Magento Handles Product Images
When maintaining product images for a Magento site, there are 3 main areas to focus on:
Each of these has their own logic and each has a few steps we can do to improve.
Original Product Images
This one is pretty simple, when you add an image to a product, Magento stores this image in the `pub/media/catalog/product` directory. It takes the first 2 characters of the file name and uses them as directories. This is to spread the images out over a few directories, as having a few thousand files or more in the same directory is very hard to mange.
For example lets so you upload the the image "example.jpg" Magento will put this image at `pub/media/catalog/product/e/x/example.jpq` it will then store this path in the database. The means Magento can quickly look up and serve the image when needed.
However if you delete the product, the image is left on the server. The odd file here or there doesn't really make a difference, but as you can imagine this builds up relatively quickly.
To Fix this we simply need to look for all files in the media/catalog/product directory that aren't in the database and remove them. Fortunatley this is a single command with the module, see how.
Product Image Variations
You may or may not know that when a module or theme uses and image on your Magento site, it will declare all variants of the image it needs. For example it may declare it needs:
- "Thumbnail" - The image 45x45px
- "Main Image" - The image at original size, but with a watermark.
- "Related Image" - The image 150x150px for a related products section.
When the module does this, Magento creates all these variations and stores them in the `product/cache` directory. If this were the only module installed, you would then have 4 copies of the same image, just at different sizes; The original product image, the "Thumbnail", "Main Image" and "Related Image".
To distinguish these images from one another, Magento creates a hash from the image parameters (how the theme/module wants the original image changing) and stores is in the `pub/media/catalog/product/cache` directory. Following on from our previous example, if the product in question has the `example.jpg` image. The file structure on the server would look like:
Next imagine we have another module (Module B) that declares it needs:
- "Thumbnail" - The image 46x46px
- "Detail Image" - The image at original size
- "Slider Image" - The image 150x150px
Here Magento would create a new image variation for Module Bs "Thumnail" because there isn't a variation already at 46x46px.
Magento would also create a new image variation for Module Bs "Detail Image" because there isn't a variation already at original size without a watermark.
When looking at Module Bs "Slider Image" Magento wouldn't need to create another variant because there is already an image create at 150x150px.
At this point the file structure would look like:
This good because it means we don't end up with needless duplicates (copies of the exact same image). However there is sure room for improvement. Do we need the image at 45x45px and at 46x46px? Unlikely. Unfortunately there isn't a way to see these variations in a way to spot vsimilar ones.
This is where media cleanup module comes in, there is a built in report command that shows these declarations in a easy format, see how. Once identified, you can update these declarations, reducing the number of variations to only those required.
Resized Product Images
As we saw in the previous section Magento populates the `pub/media/catalog/product/cache` directory with variations of the original image. When these variations change or the product is removed, Magento doesn't clean up the old declarations. This can quickly lead to the cache directory building up quite a lot.
Again this is where the media cleanup module comes in, there is a command to report and cleanup stale image variations, see how.
Installation
To install the media-utils module:
composer require zero1/media-utils
Before running any commands in a production environment you should first test in a development/staging environment.
Usage: Identifying Image Variants
To report the image variations you can run
php bin/magento zero1:media-utils:product-image-variation-report
This report displays two tables. First the image configurations that are declared, this includes:
- the themes they belong to
- the store IDs they are applicable for
- the name of the image configuration
- the parameters of the image
This can be useful to identify configurations that are similar can that can be updated to make them the same, reducing the total number of image resize operations required.
Secondly how each of these variants map to a cache directory. This allows you to see which image declarations are the same.
Usage: Clearing Stale Cache Images
To report and clean up stale/old cache images you can run
php bin/magento zero1:media-utils:product-cache-clean [--dry-run]
Passing the `--dry-run` flag stops the process from deleting any images, and will only output a report.
Here you can see 3 runs
- Run in report only mode
- Run and remove stale images
- Run again to confirm there are no more stale images
Usage: Removing Old Product Images
To report and clean up stale/old images you can run
php bin/magento zero1:media-utils:product-clean [--dry-run]
Passing the `--dry-run` flag stops the process from deleting any images, and will only output a report.
Here you can see 3 runs:
- Run in report only mode
- Run and remove old images
- Run again and validate there are no images to clean.
Thanks to tree.nathanfriend.io for the directory diagrams.