«

»

Mar
25
2013

JPG file size optimization without compromising the quality

Here is a small tip which could significantly improve the performance of your website just for paying attention to a small detail, the jpg file compression quality. We always tend to save the jpg images to its maximum quality (90-100%) assuming that we get the best looking visual.

However the 10% compression quality difference could make almost minimal visual difference yet a significant file size difference.

Let’s study the case below:

 

 

 

Jpg Quality at original size (not optimized)

In Original Quality (100%), File Size – 134 KB

 

JPG compressed to 90% of original Quality

90% of Original Image Quality, File Size – 57 KB

 

JPG compressed to 80% of original Quality

80% of Original Image Quality, File Size – 37 KB

 

JPG compressed to 50% of original Quality

50% of Original Image Quality, File Size – 37 KB

 

If you compare the image is in full quality (100%) against the 80% or 90% its really hard to make out any difference visually, yet you will notice the file size is reduced significantly. However below 80% you will start noticing the quality difference.

So always save (compress) your jpg images in 80% or 90% of its original quality (most of the image editors have the capability for adjusting compression quality). This will hardly make any difference with visual quality yet would improve the loading performance significantly for your applications/websites.

 

Did you find this post useful? Feel free to share your feedback in the comments area.

You can find more interesting posts from us on the??posts index??section

If you are interested to be notified for the new posts from us, then you can make use of the subscribe option available on the right sidebar.

Help us to improve our search rating by recommending this post to Google using the button below

 

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>