Image Size Optimisation Without Increasing Website Loading Speed

I am currently in the middle of changing some images for a website; I want to know what an optimal size I would be looking at reducing my files to help load speeds.

I have all the tools at my disposal to reduce the file size, but I want to know what roughly the best range is?

A straight export in Photoshop to JPEG gets me to 269kb without any reducing or DPI reductions for a 500x500px image.

I just don’t know if that would be acceptable, or if thats relatively large? I don’t really have any reference!

I feel like I could really reduce it down, but not sure if I’d be trading image quality for speed, which I would like to avoid if possible.

Is there a particular optimum range that is small enough to be fast loading but a still be a good quality image?

Hi SGI,

Below is a short summary of a good article on this subject, " How To Increase The Page Loading Speed Of Your Mobile Website Design ".

We use Google page speed load measuring tool, PageSpeed Insight. We use it to measure how effective our image size and corresponding memory size is vs how it looks. The Google page speed loading measuring tool will let us know if we have optimized the picture or whether it still needs further optimization. It is a great tool, we use the desk top version which we installed from the Google Chrome store, it is named PageSpeed Insights Checker for Mobile.

We also use ImageOptim (free ) to compress our images after we have the desired size and format exported from Photoshop. Once you export from Photoshop run it by ImageOptim.

Good luck,

Braulio

So instead of just going on image size alone, you upload images of various sizes and just check if it affects page load speed. Which makes complete sense for making sure you can have the best quality of image.

I didn’t think of that!

Thanks for the links :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.