Image Optimisation

[Jonathan0292]

Hi, I wonder if you could help me with a few queries?

I’m trying to optimise my images to speed up my Magento site v1.9. I’ve seen that base image, small image & thumbnail image for a product should all be sized separately. I believe around 600x600 base image, 460x460 small image, 50x50 thumbnail however if someone wants to click onto the thumbnail to view another image of the product other than the base, the product is then very blurry due to its size. How do I combat this?

Also when I’ve changed the thumbnail to an image 100x100, If someone browses over our product image in category, the product image goes really blurry (almost as if it’s pointing to the thumbnail)

Also what’s the file size I should try stick to as a max for each base image, small image & thumbnail? 20kb?

Please can someone advise what’s the best practice I would be extremely grateful.

[Tom Robertshaw]

The blurriness sounds like a theme bug more than an image optimisation problem. It sounds like your theme is using the thumbnail image as the main image when clicked on. You'll want to make sure it's using the larger image version of the thumbnail.

Magento will automatically resize images to the size that it needs for different locations in the theme. So you don't have to worry about uploading the exact sizes in advance, especially as they're all the same aspect ratio. 

Magento's resizing isn't "optimal" though, so more advanced solutions might completely replace the image system in magento, e.g. Cloudinary.

20kb sounds great in terms of size! If you manage to keep it that low you're doing really well. I'd use this as well as the total page weight and ensure those together are within a certain budget. 

[Jonathan0292]

Hi, thank you for your response, am I correct in thinking uploading certain image sizes for base image, small image & thumbnail is the correct thing to do for page rendering?

[Tom Robertshaw]

It's worth running through an image compression tool before upload but resizing for each type (image, small image, thumbnail) probably isn't worth the time unless you actually want to have different photo for the image in different places, not for performance. As Magento will already resize to the size it needs. 

[Jonathan0292]

Ok thanks very much.

[kgerasimov]

Use PageSpeed server extension to opimize your images on the fly - https://developers.google.com/speed/pagespeed/module/ . It does the job well.

[Amasty]

Hi @Jonathan0292

You can try to achieve that with Google Page Speed Optimizer module. It will help to compress images with no loss in their quality as well as minify JS and CSS (you've asked about CSS in another thread as far as I remember).

As a result, the extension helps to speed up a Magento site.