Product Image sizing

[charlez]

Hi
We have run our site through the https://developers.google.com/speed/pagespeed/insights.
The main issue this reports is regarding the size of images and that they are not optimised.
We currently use the same image for base image, small image and thumbnail.
We have looked at optimising images for use with thumbnails and small images, but have found that our magento
site automatically resizes images into the server side image cache for delivery as small and thumbnail images.
When looking through a web browser for example at the home page of our site if you download some of the product images
individually when you examine the links they are indeed resized images from the main image we uploaded in the back end.
However, the google developer tools still seem to complain about these images being delivered as full size images.
Can someone please advise what should be best practice regarding images as there seems little point in resizing images
in the back end if magento automatically does this.
Thanks,
Charlie.

[Stuart M]

Resizing images and optimising images should not be confused.

Optimising means reducing their physical file size without impacting the size or quality of the image through compression.

This can be done server-side using gzip or using some of the many online tools like Yahoo SmushIT.

Run your website through this website to get a better idea of what images should be optimised and by what amount:
http://gtmetrix.com/

[charlez]

Hi Stuart
Many thanks for your reply. 

I have run our site through http://gtmetrix.com/ And whilst it offers sugestions, the overall score is very good. 

I can see where the difference is, when I run the image through gtmetrix the cashd image is this /media/catalog/product/cache/1/small_image/296x296/9df78eab33525d08d6e5fb8d27136e95/1/3/13219100000156_1_wid_600_amp_3bhei_600.jpg

as you can see image size states 269x266 this image is 15kb 

The same Image through google

media/catalog/product/cache/1/small_image/592x592/9df78eab33525d08d6e5fb8d27136e95/1/3/13219100000156_1_wid_600_amp_3bhei_600.jpg

As you can see its still refencing the small image but the image size has changed. this image is 48kb

Any insight would be greatly appreciated

Kind regards

Charlie

[JLHC]

Charlie,

I think you are still misunderstood. Resizing Image is different from Optimizing Image. 

You can read more about this here:-

https://developers.google.com/speed/docs/insights/OptimizeImages

When you Optimize an image, the resolution stays (For example: 100x100) the same but the quality drops* so the image size is reduced from say 100kb to 30kb. 

* The drop in image quality is not something like your eyes can differentiate.

You can Google around for tools to optimize images and you can find tools to do them online or download a software to do it in your computer. I use ImageOptim for Mac OS X but there are a lot of such softwares for all OS.