optimization view: magento scales down images to the proper size, what if we have large images,can it hurt the website?

Question

Suppose that our thumbnail image is 1000x1000 pixel although it should be 133x100 pixel, magento automatically will re-size it and show the re-sized image on the page, I know that it can slow down the website when we have large images, but I want to get an official answer of:

Yes, it slows down the website even when magento has re-sized images.

I need to know the reasons why it is best to have the images smaller. the reason which I can think is that the KB of an image even when the re-sizded one has been shown is more than when it is smaller, moreover resizing make magento to process the resize which means adding load on the website.(I don't know if it will be processed once or each and every time?)

Does the resizing happens once when we are uploading the image or does it take place everytime we need to see the image on the page?

as an example I have uploaded one large image which has been resized in a static block, when I go to the image url although I am seeing the resized one, I can see that the source URL still has the bigger image which means it can lower the performance of the website.

I need to bring more reasons to convince our team to go through thousands of products and update the images,I appreciate any help on this.

Answer 1

Magento will always cache after re-sizing an image.

Image optimization is vital to keep load times to what most customers expect which is very small ~1-3 seconds without avoiding people abandoning and going else where. If full size images are being used that are not optimized for the end users consumption it would be considered bad practice and may alienate potential customers.

Simply referencing a 1000 x 1000 image and letting the browser scale it down is bad practice as well, as a image of that size vs the size the browser has scaled it down to will vary significantly.

It is best to scale down to multiple levels, which Magento does well already, usually this is a thumbnail, small image, and a larger image. Keeping the sizes consistent in your markup or references to the images can help prevent new scaled images being created.

Source Images uploaded for your catalog is okay to be of the largest size, and is recommended to help Magento scale down the images to any size you need and cache it for later use, vs trying to up scale a small image which will obviously pixelate.

Also consider CDN (Content Delivery Networks) for your Images to help with loading times.

Hope this helps.

Answer 2

Magento does not resize the images when you upload them, it does so when you call the resize() method on these images. This is done for example in catalog/product/view/media.phtml or catalog/product/list.phtml. As far as I know, though, this is only for product images which explains why it didn't work in your static block. BTW, here is an extension that can do this for category images: https://github.com/dbashyal/Magento-resize-category-images

Also, the process does not happen on every page load. Magento caches the resized images. Look at the folder media/catalog/product/cache/ to find the images that are currently stored. You can delete this cache at System -> Cache -> Delete Image Cache (bottom left corner). When you call the resize() method in a template, Magento checks if a cached image for this size exists, and then only resizes your image if it doesn't exists.

Also, you ask if you should upload bigger or smaller images. Well, the default Magento-setup comes with image (used on product page), small_image (used in product listings) and the thumbnail (used in the cart). You can add more image attributes, and you can also use them in different positions.

So, for your question:

Yes, it slows down the website even when magento has re-sized images.

Images that are resized manually may make your faster to a very small degree. If you are at a very late stage in performance optimisation, it may help. But I doubt that it's worth the effort in most cases. So, as far as I am concerned, this statement can be considered not true or at least irrelevant.