Organizing Galleries on SmugMug ...

Update: Shortly after posting this I saw an example that handled the problem of an "All Galleries" page somewhat differently, and later found a tutorial that describes a clever method.  I have it working now, and will post an update when I've worked out more of the kinks.

As part of setting up Time-Light-Distance, one of the first things I did was upload some albums or galleries to SmugMug.

I really wanted to have a single page for all my galleries that was separate from my SmugMug home page.  In order to do this I created a single master category called "All Galleries". Under that are subcategories such as "Events" and "Music" where you will find the actual albums.  In addition I created a separate "Smart Gallery" called "Favorites".  In order to group it with the other subcategories I had to put it in its own Favorites sub-category.

Now there are a few problems with this scheme that will become more evident as time passes.  For one thing, you only get two levels of categories on SmugMug.  So by creating a single top-level category for All Galleries I've wasted one level of the hierarchy -- I won't be able to create sub-subcategories.  This prevents having a category structure like "Travel/Hawaii2009", or "Events/HardlyStrictlyBluegrass2009" which I would use to organize multiple galleries from the same trip or event.

The other problem is that instead of navigating directly to the Favorites gallery, you have to go through the Favorites sub-category.  I could fix this by putting the Favorites gallery directly in the "All Galleries" category instead of in a sub-category.  But then it wouldn't appear with the sub-categories, I'd have to have a separate page element with the ugly name of "All Galleries Galleries".  Bleah!

Getting Consistent Color on the Web (Windows)

Every photographer's bane: you carefully adjust your pictures to look great and publish them with pride to your favorite photo sharing site. Then you're appalled to find them looking more reddish and saturated in most browsers.


Regardless of your current browser, you should see a difference between the two slices above (if not, your monitor has serious color issues and you can stop reading here).  The image is a single screenshot showing the same image as rendered in Firefox 3 (left) and Chrome (right) on Windows Vista.  I could just as well have compared Safari and Internet Explorer and you'd see the same difference.

The point isn't whether one is better than the other, the point is that they are different.  The browser on the left is interpreting the ICC v2 color profile embedded in the image, while the browser on the right is ignoring it.   For that matter many other programs, such as Picasa, also ignore color profiles.

I'm not using an "unusual" color profile such as Adobe RGB in my image. I'm using the accepted internet standard profile sRGB (IEC 61966-2.1) and have been under the impression that browsers render using this profile by default.  So why are the results different?

Chris MacAskill of SmugMug once advocated saving images without embedded profiles in order to get consistent results across browsers.  But that wouldn't actually solve my problem, it just makes all browsers consistently "wrong" relative to the colors I saw when editing the photo.

What I need is consistency between my photo editing software and the universe of web browsers.

My Problem: Incorrect WCS Settings

Eventually I discovered a problem in my Windows Color System (WCS) settings (Control Panel::Color Management).  At one time I had set up my system workflow for Adobe RGB, which included setting the WCS default device profile.

Don't do that.  Instead set your default device profile to sRGB IEC61966-2.1 like this:

You can (and should) still use your calibrated monitor profile.  For a while I was afraid that I would have to set it to the default sRGB profile as well, but no:

You shouldn't have to restart your computer, but you will need to restart color managed applications, such as PhotoShop, Safari and Firefox before you can see the change.

Results

Here's a comparison of the image after the change. The left-most image is PhotoShop, showing the PSD file rendered in sRGB 8-bit color.  I saved that image as an 80% JPEG with the embedded sRGB profile, then displayed it in various browsers.   These look really close to me.

From left to right: (1) PhotoShop (PSD file, sRGB 8-bit), (2) Safari (color managed), (3) Chrome (not color managed), (4) IE 8 (not color managed).

I wondered just how close they really were so did another screen capture of just the ear at 100% in all four programs.  Then using PhotoShop I compared the average RGB values of an 11x11 region:

The results ...

PhotoShop (original)	rgb(220,176,154)
Safari (managed)	rgb(220,176,154)
Chrome (unmanaged)	rgb(221,177,156)
IE 8 (unmanaged)	rgb(221,177,156)

Very close indeed.

If You're Interested ...
The International Color Consortium (ICC) has a handy web page for checking whether your browser supports color management and, if so, whether it supports v4 or just v2.

Chris MacAskill of SmugMug has written several popular blog posts on this subject.  His conclusion that embedded color profiles are spawn-of-devil may be controversial, but it does represent some practical thinking in the real world of publishing photos on the web.

• "SmugMug Alters My Colors - Updated" (May 2008)
• "SmugMug Alters My Colors" (June 2005)

On the separate-but-related topic of color gamuts, SmugMug also has a clearly written explanation of sRGB versus Adobe RGB that I found highly informative.  For even more details see this tutorial at Cambridge In Color. I used to think Adobe RGB was superior for the wider gamut, but not only is there little to gain, but the limited precision of 8-bit color channels will result in greater quantization errors.  In short, always use sRGB for 8-bit color.

Microsoft's Windows Color System (WCS) was introduced with Vista and provides a lot more control than older versions of Windows.  But it's easy to get it slightly wrong, as I did.

Introducing Time-Light-Distance

I've been keeping a personal blog for a few years now.  While it is reflective of my diverse interests -- careening between Literature, Music, Philosophy, Photography, Computer Technology and more -- the lack of any coherent theme makes it difficult for anybody else to follow.

So lately, as I've been posting more about photography, I have been thinking about creating a separate, specialized blog as the new home for all my photo-related posts.  And I was still thinking about it when, a couple of weeks ago, Trey Ratcliff (StuckInCustoms.com) challenged his readers to consider trying out SmugMug.  Well, I'd been thinking about that too.

So I decided to do both at the same time.

The result is Time - Light - Distance.  As much as possible I am trying to integrate the SmugMug photo sharing site with Blogger.  My goal is not only to offer a better photo and video sharing experience, but also to give myself a forum to discuss my work.

So, for anyone who finds the things I'm doing helpful or interesting, I hope T-L-D will make it easier to follow.  For myself, I hope that the sharper focus will make a difference in the quality and quantity of my work.