Saturday, February 7, 2015

Photoshop Color Settings for web design


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



Answer



"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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...