Saving Images for Web Presentation

Background:

When I started using a web page to present my CCD images, I was always dissatisfied with how the image appeared in a web browser.  Some people made suggestions to convert the image to the sRGB color space for web presentation.  This worked better then any other method I had done, but I still was unhappy with the result.  My images tended to still brighten when viewed on the web compared to in Photoshop.

Finally one day I had enough and did some experimenting.  I found that if I converted the color space of my image to the color profile that my monitor calibrator generated and then saved it as a JPG that the images matched exactly!  I was very excited and have been using this technique and sharing it with others.

So here is how to do it:

Procedure:

  1. With your final image open in Photoshop (currently assigned to Adobe RGB or any other color profile), select Image->Mode->Convert to Profile.
  2. In the convert window, select the color profile that was generated by your calibrator.  For conversion options I use Perceptual and check black point compensation.
  3. Click Ok.
  4. Now use the Save For Web function to create your JPG.

If you do not calibrate your monitor:

Results:

R Jay GaBany was kind enough to let me showcase his wonderful M51 image as an example.  Below you will see his original image as he presented it on the web.  This JPG was generated from a file that was in the Adobe RGB color space.  R Jay embedded the Adobe RGB color space in the JPG, but that Internet browsers ignore that information.
(Please wait for all the images to load - they are not compressed much to preserve the differences visible)

M51
Original Image in Adobe RGB color space
Image converted to sRGB color space
Image converted to Monitor color space


Move your mouse over the text above to see differences between the three configurations.  The image converted to the Monitor color space is how R Jay thought his image was going to look.

Note:  This applies to Grayscale images too!  You should convert your grayscale image to RGB and follow the directions above for the best web presentation!

I hope this is useful to some of you!
-Matt

Back        Home