Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

What color profile settings should be used in Photoshop for web design? Does monitor calibration effect save for web images?

I keep my monitor calibrated with a colorimeter and want to make sure my colors will be consistant acros all major browsers.

I use my calibrated monitor profile for my workspace, color management off and don't embed a profile for save for web and try to use .png 24 whenever possible. Is this the best practice?

Color settings

enter image description here

Save for web

enter image description here

share|improve this question
1  
Possible supplementary question point - while you've explained web is your use case, are the above settings 'safe' if you did need to edit someone else's CMYK art occasionally? –  e100 May 26 '11 at 18:13
    
Good point. I don't have much print or CMYK experience so I wouldn't know. –  Chris_O May 26 '11 at 18:17
add comment

4 Answers

up vote 4 down vote accepted

"Color Management" and "web development" should never be used in the same sentence, unless qualified with "don't bother," "waste of time" or "fuggedaboudit." The reasons lawndartcatcher outlined are correct. I have yet to see an office (other than a graphic design studio) where any two monitors displayed the same colors. Home computers are at least as bad.

If you work primarily on the web, then sRGB must be your default, because that is the standard for the Internet, and is what all user agents (browsers) are built to display.

DO NOT embed a color profile in images for websites. They add size to the image, but don't add any useful information, so all you do is make your pages heavier. When you Save for Web and Devices from Photoshop, be sure to uncheck "Embed Color Profile." As a safety measure, keep "Convert to sRGB" checked (in case you're dealing with an image that's in some other color space and you forget to convert it).

To answer your other questions: Monitor calibration does not affect SfW images except when you use you monitor profile as the color profile for the image (which you should never, ever do for any reason or for any purpose other than perhaps personal desktop wallpaper).

PNG-24 is useful for images with transparency. If there's no transparency involved, jpeg usually gives a smaller file for the same image quality, and for simple images with few colors, and especially if they have hard edges (logos being the classic example) .gif is often the best choice.

share|improve this answer
add comment

Well, the big problem is that you're going to be spending a lot of time and care in calibrating and choosing colors (good for you!) and they're most likely going to be viewed by folks who can't even work the "Brightness" buttons on their monitor. My (non-design) coworkers all have two screens, and none of them even match each other. So if you're asking "Is there any way this particular red that my client requested will always look correct based on the painstaking calibration I performed?" the answer is sadly going to be:

No.

But (and this is a pretty big but) all of the care you take is important. By keeping a consistent profile all of your pages / colors will look the same on the same monitor. Just remember that not everyone's not using the same monitor you are, so it won't always look the same.

By not embedding a profile it may leave the door wide open for a browser to override the current profile. If you can get the major browsers to agree on color handling there's probably some kind of Nobel prize in it for you.

Long story short, yes - all the care you're taking is important and the settings you are using are good (although I would personally look for a little more generic RGB profile). But there's only so much control you're going to have once your design leaves your machine and goes out into the great wide world of unknowing web users.

share|improve this answer
    
Very helpful thanks! I guess my biggest concern is that if I use an graphic I created as color #172550 in Photoshop that my #172550 in CSS matches the graphic on any monitor. –  Chris_O May 26 '11 at 18:11
    
you can also work with web safe colors –  Jack May 26 '11 at 18:22
2  
Web safe colors are one good way to "limit the damage" but unfortunately color #172550 is going to look different across the board only because the vast majority of people don't ever calibrate their monitors. If you were working in print this would be easier as professional printers work off of Pantone standards so they know what #172550 looks like. –  lawndartcatcher May 26 '11 at 18:24
2  
Browsers use sRGB. That is the W3C standard. Using any other color profile for an image guarantees that it will be different when viewed in a browser. –  Alan Gilbertson May 26 '11 at 19:19
2  
Web-safe colours are irrelevant here (and everywhere else: graphicdesign.stackexchange.com/questions/40/…) –  e100 May 27 '11 at 11:02
show 3 more comments

+1 Chris this is really a good question,exactly i don't know that deep but when i took interest by this question i found some articles on the same, might be they help you as i changed my setting according to them, please take a look, it might gonna solve you curiosity as well.

  1. color management by ivan
  2. Tips fo Managing color in Photoshop for web
  3. Color Management to Match Colors Across Multiple Devices
  4. this Settings nobody should use for photoshop

Hope at lest this should help a bit.......

share|improve this answer
    
I remember the Smashing Magazine article and debate that followed. The last article makes the most sense. Thanks! –  Chris_O May 26 '11 at 18:31
    
always welcome... –  Jack May 26 '11 at 18:32
add comment

My honest feeling about web color management mirrors those expressed above, but with some caveats.

Generally speaking, it DOES makes sense to maintain a color managed workflow on your end so that you can at least have a good starting point—if you're designing outside of a color managed workflow, and your monitor/software combo happen to be way out to lunch (unintended color casts, gamut and gamma problems, etc.), you increase the risk that another uncalibrated end-user's equipment is out-of-whack an equivalent amount in the opposite direction, and winds up seeing something that's twice as badly displayed than if it were designed within a color managed workflow in the first place, based on the biased color decisions you made.

In addition, while I don't ever tag graphic images (headers, navigation, backgrounds, etc.) for websites and website templates (since this can lead to ugly mismatches between hex-specified colors and color managed images that wind up getting color managed in the few browsers that actually respect color profiles), I do often tag photographs. Particularly higher-resolution images. In the rare-ish occasion that the end-user is viewing the content in a color-managed browser, the profiles ensure that the user is seeing the photograph as it was shot, and that human skin tones, skies, water, etc. are represented properly.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.