Why does my compressed JPG have different colors from the original file?

Question

I have no idea at all, first of all, of image internal composition and color modes.

That said, I have a very strange problem.

These are the pictures:

Well, the ORIGINAL is more colorful in Firefox, but the second is like powered off (I dont know english word for that). It looks like the yellow-orange at the left center is changed.

I needed to slow the size from 1mb to about 300k, so I opened the original with Fireworks and Photoshop (ps is the second link) with the same results.

This is not a life matter, I am just curious why this happens.

If you go to http://tracker.fusiondev.com.ar and look at wrapper div with Firebug u will be able to change the background URL to the original.jpg and see what I am talking about.

Thanks!

EDIT: If you open both URLs in Firefox u will see the change inmediatly.

Answer 1

The reason why your images look different is because of the compression you applied to the second one. The higher the compression, the more the quality degrades.

JPEG is a lossy compression format, meaning there is loss of image information during the compression (a sacrifice needed to make the file smaller). For example, this is the same image saved with an increasing compression:

Notice that it's not just the sharpness that gets affected, the colors suffer as well. Unfortunately, the only way to not lose colors (at all) is to use a lossless compression format, such as PNG. But, this results in a much bigger image. You can still play around with the JPEG compression modes. Two thing you should try: Using sRGB as the colorspace (optimized for web colors), and Progressive compression. Depending on your final size, you could get somewhere decent with those.