Magento Image Cache: How can we Save Gigabytes?

Magento Image Cache

You should read this article because will be exploring a lot related to saving huge space for Magento image cache. Read along with us If you frequently run out of storage space and someone tells you that you have many images but in fact, you don’t, this is a red flag.

Or, if you’ve already bought a second HDD for photographs, and it’s almost full, but you don’t understand why. Disclaimer! Your website will not function if the disc space runs out.

Your website will cease working and your customers will see a 503 Error Page if a database server is situated on the very same drive as the website and the media files. The server logs will also show that there is “No Space Left On Device” if this happens.

This is the tale of how we avoided caching scaled photographs on a hard drive, which allowed us to save 250GB of disc space over time.

Data For The Input

The online store now has 20864 products visible under “Catalog, Search.” This is what is obtainable and discoverable. In other words, customers notice these things and most likely have seen photographs of them.

– The values below are quite typical:

– Each product has five photos;

The image is roughly 3.5 MB in size.

As a result, it requires 365120 MB to 356 GB on average.

This number makes sense to us logically. I have a lot of pictures, and they take up a certain amount of room. But there’s a significant nuance! Your website might contain photographs of various sizes.

For instance, if the desired size for a popup or cart page is 100×100 pixels, it would be absurd to load a picture with a source size of 1000×1000 pixels. The user’s traffic will be used, and a page would load slowly.

Entrance To The Problem – Calculation Of Added Disk Space

Consider a typical website with the following pages: the homepage, category pages, product pages with the quick view and cart popup features, cart pages, checkout pages, thank you pages, and alerts that may contain product photos.

Take the 20002000 pixels image you posted to a product, for instance. This picture is the original one. This would be essential to publish the same image on one of the pages in a 500×700 pixels size, so Magento will use special capabilities to resize the image and save it in the Magento image cache. The next time we require a picture of this size, it will be loaded from the cache rather than being produced from scratch because it is saved in a specific folder.

In order to optimize, it operates in this way. An older version of the media would be used going forward to speed up image resizing, which consumes time and server resources.

Webpage Images Use Options And New File Creation Process 

• Homepage

– A banner or advertising merchandise use a 1000 x1000 pixels photo

– For a new file of a successful item use a 300×500 pixels image

– A slider banner (8 best-selling products) uses 250×300 pixels

• Category

– New files for a Product Grid use 200×250 pixels photo

– New files Top Selling Products use 250×350 pixels photos

• Product Page

– The main image shows that everything is in order

– For a carousel with thumbnails use a 50×50 pixels photo

– For the Customers also buy carousel use a 250×310 pixels photo

• Elements/windows

– Shopping Cart for shopping. 40×45 pixels photo.

– For a Quick view use a 500×500 pixel photo.

You will have a lot newer picture files if you add any further promotional sections, carousels, or blogs, and export your products to a feed (like Google, Facebook, etc.) that contains image sizes. Additionally, keep in mind email alerts if they contain product photographs. So, I assume you get my position.

You will receive roughly 20 to 30 extra image sizes for each product based on this incomplete list. Given the variety of products on the website, you can have a sizable number of other files.

Magento Image Cache – How Do You Avoid Having A Full Memory Space

For a wide variety of blocks and pages, you can use a number of universal sizes. A 200×200 pixels image, for instance, might be appropriate for

– Shopping basket

– Feeds

– If photos are utilized, the Category Page or Menu

– Home page sliders

– Notifications via email

How To Identify A Problem And Its Solution?

Design. Theoretically, developers should take a variety of picture sizes into account and possibly give developers a guide for using photos on the website, noting that certain pages, such Homepage, Category, and Cart, allow the usage of single image size. There is little difference in size between these photographs, so you don’t need to adjust them and make new files. Yes, 3 picture sizes won’t be enough to properly display on your website.

However, you could still specify an appropriate size explicitly in HTML code using a few universal sizes as well as the width and height properties.

The design was given to a contractor or development firm, but neither checked the layout nor looked for bottlenecks. Perhaps you weren’t questioned about the number of products you intended to list on the website or the potential number of photographs each product might have. Or perhaps no one asked if you intended to utilize CDN and they failed to mention any potential benefits.

The Solution The Problem

The sizes of the photographs should be uniform. For examples of sizes that can be combined, see the view.xml file.

You don’t even have to adjust the parameters of functions like init($product, “related products list”) or write any code. ?> getUrl()

The issue can be fixed at the view.xml level. Simply examine the file to see which image sizes are appropriate for your situation. Change sizes from larger to smaller, but not the other way around. Maintain a standard size. For instance, if your list of sizes includes 100, 200, 300, and 350 pixels, you should keep 300 or perhaps swap it out for 250.

The image will be the ideal size and appear beautiful at both 100 pixels and 350 pixels. Avoid keeping image sizes too small, since they will appear terrible at larger sizes.

If you already use CDN, that’s excellent, but if not, you should deploy it immediately. Although it would cost you little money, now you know why it’s worthwhile.

Files, especially photos, are cached by CDN services. Therefore, you don’t need to keep updated or cached copies of the photographs on the drive! In other words, you have to create photos that are the right size because they won’t be saved to your computer but instead transmitted immediately to CDN.

If your Magento webstore uses CDN, then the action of saving a changed image to the drive (Magento saves changed images to a particular folder /pub/media/catalog/product/cache/) is unnecessary and you’re just wasting money, as CDN service keeps images and they won’t be loaded from your server.