Photoshop CS3 and Save for Web issues

  • strict warning: Non-static method view::load() should not be called statically in /home/tancredi/ on line 879.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/tancredi/ on line 589.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/tancredi/ on line 589.
  • strict warning: Declaration of views_handler_filter_boolean_operator::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/tancredi/ on line 149.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/tancredi/ on line 135.
  • strict warning: Declaration of views_plugin_row::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/tancredi/ on line 135.

I've recently begun using Photoshop CS3 and noticed that all of my saved 'Save for Web and Devices' jpgs were coming out differently than they looked in my workspace. I always disable colour management as I don't do any print work and I believe the simplest method for web development and design is to work in my monitor's colour working space. This was working fine in CS2 but for some reason my jpgs were looking different when I'd saved them. I discovered a setting in Save for Web and Devices that is on by default and converts the output to the sRGB profile before saving.

Below is a screenshot of my colour settings in Photoshop for reference.

Photoshop colour settings screenshot

Here is a screenshot of the offending setting, accessed from the menu that appears if you hit the small arrow button next to the presets drop down menu in 'Save for Web and Devices. In the screenshot my cursor is pointing to the menu button.

Save for Web and devices menu screenshot

You need to deselect 'Convert to sRGB' to ensure your jpgs and other exports look the same as your non-colour managed workspace.

I use an Apple Macbook Pro for my work which has a different gamma to Windows connected monitors. To roughly see how my images will look on a PC I have set up my 'Proof Colors' to be 'Windows RGB'. You can do this by selecting View -> Proof Setup -> Windows RGB from the main Photoshop menu. Likewise I imagine this would be useful for Windows users wishing to see how their images will look like in a Mac environment.

Now I know there are reasons why people should use colour management in Photoshop but I believe for web design work it is simplest to disable it. Most web browsers aren't able to display images with embedded profiles so it seems a little pointless to me. I could of course be very wrong and if anyone thinks otherwise please leave a comment.

Note: These days I work with everything in Photoshop in sRGB colour space which is arguably the most common (Windows) colour space for the web. Please see my comments below for details. The above no longer really applies to my workflow but may still suit yours.

Note: Comments have now been disabled.


Jump to comment form | comments rss


Tancredi08.01.08 / 10AM

Eric, what you are seeing in the browser is what other Mac users will see in their browsers as long as you or they haven’t altered your monitor’s colour profile. The standard colour profile provided on Macs uses a different gamma than Windows based computers. This is a decision that Apple made a long time ago but I don’t know the reasoning behind it.

If you want your graphics to look the same on your Mac as they do in Windows you’ll need to adjust your monitor’s colour profile (or your laptop’s) to change the gamma. You can piece together the process based on the comments in this thread, but basically to do it right you’ll want to calibrate your monitor using a professional device.

Soon I’m going to try and post another article about this process and how to use the sRGB colour space as a working profile for web design work.

Eric Fields08.01.08 / 5AM

So what’s the right thing for a mac web designer to do? I’m currently assuming that the Windows proof of my graphics is what 90+% of the world will see.

But colors still look washed out in browsers on my MacBook. I repeat, in the browsers. Photoshop proofs for Windows RGB and the SFW screen look fine.

Do I and others with Mac laptop screens just have to deal with this phenomenon? Anyone out there w/ a Cinema Display experiencing this, btw?

Thanks. This board has been great.

Tancredi06.01.08 / 8AM

Thanks for posting that link Hamish, that was one setting I hadn’t noticed and setting the preview to ‘Use Document Color Profile’ has solved the last piece of the puzzle for me. Images now look consistent throughout my workflow in my sRGB working colour space.

Hamish06.01.08 / 7AM

Live saver! CS3’s “Save for Web” settings were ‘killing me’, dark images indeed. -!enclosure=.3bc105ec
Nice one! Cheers.

Tancredi05.01.08 / 12PM

Agreed Jan, the browser support is only useful for times when you want to display a photographic image or an image where the colour representation needs to be accurate (skin tones etc). Even then it will only be displayed accurately on someone’s monitor if they’ve correctly calibrated it.

As for the different gamma values used by the different operating systems, I don’t know. I tried searching google and wikipedia but came up with nothing on the historical aspect of why these gamma values were chosen.

I set my main monitor (Dell 24”) to display the Windows gamma as I’ve decided that the sRGB space is the one to develop for seeing as the majority of web users are on Windows and Windows has the same gamma as the sRGB standard. I use my second monitor, my Macbook Pro’s, to see images in the Mac’s gamma and test them out before committing to web. I also use Photoshop’s ‘Proof Colours’ to view working designs in the Macintosh RGB space.

This gives me a fairly balanced view of what my images will look like on different monitors.

Jan Brašna05.01.08 / 11AM

Browser support won’t save the whole color-space issue as you more often than not have to align some sort of background color from the image to a CSS-specified color of an element.

Additionally the different gamma between Macs and PCs is quite painfull - is there a reason for that at all?

Tancredi25.12.07 / 9AM

Daniel, let me just check, you are using Photoshop CS3? In the newer Photoshops there is a new menu item in the File menu called ‘Save for Web’ or ‘Save for Web & Devices’ in CS3. Using this menu item will take you to the optimise window where you can choose the file types, the kind of compression, amount of compression etc.

If you get stuck I strongly suggest using the help files which come with Photoshop, there are pretty good and will cover the question you are asking about.

Daniel25.12.07 / 6AM

Does anyone know why I wouldn’t have the option to “Save for Web” at all? or the save as “PNG”? The .png is most important for me, but I’ve been using…..Photoshop 6….for years now (don’t laugh) and I don’t understand why I can’t save as a PNG. Can anyone help? Thanks in advance.

Tancredi19.12.07 / 16PM

For sure dude, the gamma just controls the png’s brightness, the alpha (transparency) is a completely different matter and won’t be effected by stripping the gamma information. Give it a try and report back with the difference.

kc19.12.07 / 0AM

ok and if i do that.. and part of it is transparent.. will it still work?

Tancredi18.12.07 / 10AM

kc, you’ll need to strip the gamma out of your pngs. This is a known issue with png graphics. I made a comment about this further up the thread. Get something like pngcrusher or gammaslammer and strip the pngs of gamma information. This will make them behave the same as gifs saved from Photoshop.

kc18.12.07 / 8AM

So far none of the solutions has solved my problem with the color variation when working on a mac, i ve tried every color setting, and on save for web… but all my .png files slightly look a bit lighter/washed out, and do not match the hex color i use in my css document… so i ‘m stumped .. should i just work on a pc? b/c this is kicking my ass trying to design graphics when they will not match the existing hex.. someone anyone give me a solution

Neon15.12.07 / 22PM

Thanks for this tip,

I’am convert raw images with Aperture and open with CS3 save jpeg for web work now.,


Sandee Pawan15.12.07 / 19PM

Hi there, I’m a french photographer who has just bought a mac book pro + CS3.
I just wanted to thank you all for the tips, I was turning crazy before I found you guys !! I had the same problem than Sean and thanks to his link, it’s now over… THANK YOU :)

Tancredi13.12.07 / 13PM

I agree Adam, there doesn’t seem to be a lot we can do other than to design for our target audience and try to understand as much as we can about the differences in colour set ups so that we can explain to clients or designers if asked.

Adam Norwood13.12.07 / 5AM

I missed the part about profile support being off by default. I wonder if that’s just for the beta testing, or if it will stay off (and hidden where no one will ever see it under about:config). It was a nice idea, anyhow.

I agree that this is all pretty frustrating. GIFs are limited to 256 colors (and I think you’re right about their lack of profile support), PNGs have the gamma inconsistency problem, and JPEGs with profiles are larger and most browsers don’t care about the profile anyhow. When the artists you’re building a website for want to know why their 1.8 gamma, AdobeRGB-tagged photographs and videos (there’s an entirely separate can of worms) look really weird between Safari on the Mac and IE on the PC, though, you can at least explain the problem to them and try to help correct for it :)

Chet Nichols III12.12.07 / 14PM

Thanks a lot for this tip. It was driving me insane, and a buddy of mine from work pointed out this entry. You rock.

Tancredi12.12.07 / 9AM

Hmm… it seems like colour management will be turned off by default in Firefox 3 which makes it a bit pointless as only those in the know will turn it on.

Tancredi12.12.07 / 9AM

Adam, I didn’t know Firefox 3 is supporting colour profiles, that is interesting.

I guess colour profiles are going to be great for jpeg images where the colour information is important, for instance on photographs and possibly for logos. Most of my sites make use of gifs for the visual elements as I find they generally offer the best file size and visual quality for smaller elements. I would switch to using pngs as they offer a slightly improved compression to gif but there is the issue of the gamma information in pngs making them look different from gifs and jpegs exported side by side. To the best of my knowledge gifs don’t support colour profiles.

Embedding the colour profile in a jpeg also increases the file size by around 4k so its not something I’d want to do unless its important to get the image looking consistent in every browser.

Does this make sense?

Adam Norwood12.12.07 / 6AM

Thanks for this discussion! I didn’t know about the new “Convert to sRGB” option in CS3, and probably wouldn’t have noticed or thought about it for quite some time. Having said that, though, I’ll second the endorsement of sRGB when creating images for the web.

I have all of my monitors and laptops calibrated to 2.2 gamma, and Photoshop set up basically as G. Ballard describes on the site that you’ve linked to. For photographic and print work I usually use Adobe RGB as my working space, which I then convert to sRGB as a last step before exporting for the web (and I guess that the new SFW option makes that step a bit redundant). That gets me reasonably close to color consistency, at least on my end and for any users who have a calibrated display.

My question is about embedding color profiles in web images versus stripping them out: with Safari on the rise, Firefox 3 supporting color profiles, and the IE8 team hard at work (though no word yet about color), what’s the best practice?

Tancredi10.12.07 / 0AM

Buko, I am using the sRGB colour space as I noted above a couple of times. Anyway, thanks for chiming in on this discussion, your views are most welcome. Anyone else with similar or differing views?

Buko10.12.07 / 0AM

Keep in mind that there is no such thing as no color management. color management is always on even if you think you’ve turned it off. You would be better off using sRGB colorspace that is the closest to no profile.

You say people don’t care about profiles working on web images that will soon change as more browsers become colormanaged. Don’t sell your self short by doing it wrong.

Using a colorspace that only you have access to is a sure fire way not to have consistency.

AS far as the compression I use its perfect for what I do, pages load fast and I don’t have a fine art website.

Tancredi09.12.07 / 22PM

Buko, I’m not sure if you read the post above yours where I explained that I’m experimenting with sRGB working profile in Photoshop? From what I’ve read it is the best working space to be using as the output is most similar to what is seen in Photoshop. This makes a lot of sense to me as a web designer, more sense than completely stripping colour information.

Anyway, I will consider removing or amending my advice once I’m sure that this is really the best way of working. I understand that people working in print care a lot about colour profiles because of needing things to look the same printed as they do on the monitor. Most people working in the web world don’t care about profiles, all they want is consistency between what they see in Photoshop and what is in their browser. Also remember that 90% of what we do as web designers is created in Photoshop. All we want is consistency. Pretty simple really.

By the way, compressing JPGs at 20% isn’t a good idea either. Why don’t you vary the compression depending on the image, trying to achieve the best balance between compression and quality?

Buko09.12.07 / 21PM

Think of it this way the monitor profile is the translator that Photoshop uses to display an image correctly that is in a known color space.

Buko09.12.07 / 21PM

In an ideal world everyone would have colour calibrated monitors, but they don’t. The average end user won’t have a clue about how to calibrate their monitor. So I think its pretty hard to know what colour will be displayed on someone else’s screen, especially as the browsers we use can’t handle the profile information.

You don’t have a clue what your images will look like on someone else’s computer. Since you have no control don’t worry about it. But your advice to use your monitor profile as a working space is not good. you really should remove it before beginners who don’t have a clue ruin their images because chances are they are not adjusting copies of their files but originals.

Photoshop uses the monitor profile to display the image that is in a known color space. Adobe RGB for example. so when I take my image to another computer with Photoshop or a color managed application like Safari the image will look the same on both computers. When you use your monitor profile as your working space it will look great on your computer and that’s all.

You may never have a perfect match when using save for web but then it doesn’t matter because of the reasons mentioned at the beginning of this post. Just like the early days of color TV when everyone had their TV set adjusted differently. I would find myself adjusting the color on them only to come back days later to find they had readjusted the sets to display over saturated green or orange faces.

What I do when working on web images.
Most of my images are in Adobe RGB, I do most of my work in this color space. My monitor is calibrated with an X-Rite EyeOne 2 every 2 weeks. When I save some thing for the web I make sure I have done all my editing and adjustments then save the file I’m working on. I never work on an original file. After saving the file I convert it to sRGB then I use Save for web. I use a compression of 20 in the SFW dialog. this high a compression changes the look a bit too but the images load fast and that’s what we want. Also keep in mind that gif only supports 256 colors so trying to get a perfect match with a gif is impossible.

Most of what I do is for print so I have to have my images look the same on the printing plants monitors As well as the finished product. I would not have any consistancy if I used my monitor profile as my working space.

You really should consider removing the bad advice you have given.

Tancredi09.12.07 / 13PM

Frank, thanks for your comment. Today I attempted to decipher G. Ballard’s site (great information - truly awful HTML), a collection of information on web graphics, Photoshop and colour profiles. I think I managed to grasp his point and am currently experimenting with using sRGB as my working colour space. I’ll attempt to explain why and how I’ve implemented it:

Most end users have an unmanaged colour monitor, 90% of whom use Windows and most of whom will be using Firefox or IE which doesn’t support colour profiles. So unless my target demographic for a given web site is 90% Mac users, I will assume most end users of that site will be using Windows with the Windows standard gamma of 2.2.

I design on a Mac which has the standard Mac gamma set at 1.8. So the first thing for me to do is to calibrate my monitor and set it at the more ‘average’ target gamma of 2.2. This helps me to see my graphics as other users on Windows machines do (not entirely but definitely closer). I run a dual monitor set up and my main display (DELL 24” 2407WFP-HC) has the 2.2 setting applied, while my 2nd screen, the Macbook Pro laptop display, is using the stock Apple setting of 1.8. This allow me to see the graphics in both gamma settings.

The next thing to change is getting Photoshop to work in the sRGB colour space. From what I understand sRGB is Window’s default colour space and therefore a combination of working in that colour space on a monitor that is calibrated to display in 2.2 gamma should yield images which fairly accurately represent what the end user will see on their default monitor in a Windows environment.

To see what the graphics will look like on a Mac monitor simply Soft Proof as ‘Mac RGB’. If your monitor is correctly set up with 2.2 gamma and you are working in the sRGB colour space, you should find that Soft Proofing as “Windows RGB’ will look no different.

When you output your files with the ‘Convert to sRGB’ setting checked in Save for Web, you should find that your graphics look exactly the same in your browser as they do in Photoshop. This is the desired effect but will only work if you are working in the sRGB space in Photoshop to start with. Otherwise the conversion will change the graphics. That is my understanding anyway.

So far my experiments have yielded good results and I’ll continue to try this method out on the next few jobs, testing on different hardware and monitors to see the final result.

frank09.12.07 / 12PM


as you pointed out correctly, the “proper” way to create graphics () for web use is to cut out any kind of color management, anything else does *not work and will inevitably lead to disastrous results. The only additional step I (and many folks I know who work in this field) undertake is that I have a relatively elaborate hardware setup to check my designs before the respective sites go into production … my desktop machine (Mac Pro) has two monitors hooked up to it, one is a calibrated Apple Cinema Display on which I do all my initial work, and then a cheap-o flatscreen one commonly finds in Windows-centric home-/office environments.

Furthermore, I also have (solely for testing) a Windows-laptop as well as a cheap Windows desktop machine - this way I can cover the vast majority of my user environments from the get-go and adjust my UI-designs accordingly.

(* - with “web graphics” I am of course referring to interface elements such as branding elements, buttons, backgrounds, etc. … this is not to be confused with an attempt at accurately reproducing photographic elements online.)

Tancredi09.12.07 / 9AM

Hi there Buko, thanks for dropping by and contributing your comment, this is turning into an interesting discussion.

Do you have some advice as to how to achieve perfect colours while doing web design work? Bear in mind that the most used file formats for web, gif and jpeg, don’t hold colour profile information (actually jpeg can but only Safari can render it to the best of my knowledge).

What I’d like is for someone to explain in a step by step way how to set up Photoshop CS3 for web graphics so that what is seen in Photoshop is exactly what is seen in their browser on the same monitor.

In an ideal world everyone would have colour calibrated monitors, but they don’t. The average end user won’t have a clue about how to calibrate their monitor. So I think its pretty hard to know what colour will be displayed on someone else’s screen, especially as the browsers we use can’t handle the profile information. The best I can come up with in this scenario is to have my monitor displaying how I like it and design for that.

Again, I might be completely way off the mark, but I’m open to suggestion. So far no one has convinced me with a valid argument and solution.

Buko09.12.07 / 7AM

You should never ever use your monitor profile as your working space in Photoshop. This is monumentally bad advice. It may look good on your machine but will look terrible on every other computer as nobody else has your monitor profile. Even you will have problems in the future when you recalibrate your monitor profile or get a new monitor. Also monitor color spaces are usually not linear like for example Adobe RGB. Therefore, when you make a color adjustment to an image with a curve or any other color tool, you may be over or under compensating the adjustment because the tools are linear.

frank08.12.07 / 7AM

Oh, dear … thank you, thank you, thank you!! This has been driving me insane for months! I’ve been posting scathing comments about this on Adobe’s Photoshop-related blog(s) ever since the CS3 beta was published, and even John Nack didn’t know why this was happening.

Lately, I had even gone so far as to use Photoshop CS3 in Windows XP for all my web work … weirdly enough, it doesn’t suffer from this idiotic pre-set “convert to sRGB” syndrome.

I can finally use CS3 on the Mac again … thank you very much!!

Tancredi04.12.07 / 8AM

Hi Kellen,

This could be down to the way png stores and uses gamma. I’ve noticed variations between browsers in displaying png graphics too. You could try stripping out the gamma settings from the png with something like pngcrusher or gammaslammer. You may also find this article interesting.

My personal opinion on all this is to remove all color space information and gamma correction from all graphics saved for the web and allow the user’s monitor to display them however it likes. At least this method will ensure what you see in your graphics package is what you see when you view your site.

Kellen04.12.07 / 5AM

I am still having problems! I am using OS X 10.4, photoshop CS2, and both safari and firefox. I have converted the profile to sRGB and my color settings are sRGB as adobe’s website suggests. I’ve also been using document color profile when saving for web.

The image is a png and I notice a slight color variation when in the save for web box. However, it looks crappy in safari and even worse in firefox!

I took a screen shot of the original and uploaded it straight to the website without fussing with photoshop. This one looks just like the save for web preview, almost normal!

I don’t understand what I’m doing wrong! Please help! It looks good enough under save for web but that doesn’t match safari or firefox!

Here are my examples: is a screenshot of everything, with photoshop on the left, safari in the middle, and firefox on the right; save for web is below (the top left photoshop is the correct image) will show you the uploaded images saved from photoshop

Note: I was just playing with colors to show the differences in the test, so don’t hate on the composition!

Thank you!!


Fred27.11.07 / 9AM



Stanislav Majerski21.11.07 / 23PM

Thank you so much,

I have been struggling with this for some time and new there must be a simple solution. Found you trough Google.

Thanks again

Tancredi12.11.07 / 0AM

Kyle, thanks for posting those links, I’m going to try to decipher that guy’s awful web site in the morning with fresh eyes.

Kyle11.11.07 / 22PM

From what I’ve read, you can’t turn color management off in Photoshop - it’s always on. More info here:

Patio11.11.07 / 0AM

I use Photoshop CS2 and am having problems saving for the web. When I am in Photoshop and save the document for the web it looks great. The colors match perfectly. However, when I dump the image in Dreamweaver or into an email the reds turn orange and the blues get lighter. I have contacted NAPP help desk and they haven’t helped at all. Any suggestions…

Reader X08.11.07 / 12PM

Thanks, changing the Proof Setup did the trick!

Tancredi08.11.07 / 9AM

Hi demonpixel, I don’t use soft-proof when working for the web, there doesn’t seem to be any point in proofing any colours as what I see on my screen as I design is exactly what I want to get in my output. Turning off all colour management options seems to be the way to go in my opinion.

Don’t forget that everyone’s monitors will output colours in a slightly different way and there is also a big difference in the gamma of Windows and OS X so web graphics will again look different. In my opinion there is no way to compensate or design for all these possibilities, so design with colour management off and at least you’ll get a result in your web browser that looks the same as your Photoshop design.

demonpixel08.11.07 / 8AM

Tancredi, what Proof Setup option do you work in when you’re typically working for the web? Macintosh RGB or Monitor RGB. Also, do working in these Proof Setup options affect the final web image from Save For Web?

Dave Star06.11.07 / 8AM

I cannot express my graditude enough. I sorted the nightmare of colour fading in Save For Web a couple years ago- basically learning all about colour profiles and how to turn them off.

However, after recently performing a clean install of Leopard (seemed like a good idea at the time…) and setting up colour profiles to Monitor RGB etc. I couldn’t for the life of me figure out why my canvas in Photoshop was faded (with a blueish tinge) but when I saved for web the colours in the Original pane were correct (!?!) - but not in the Optimised pane.

Just simply putting a screenshot of your colour settings showed me the error of my ways: I had exactly the same settings as you - including the working profile of Monitor RGB - but the top pull down menu (labelled settings) was set to Custom instead of Monitor Color.

Muchos Gracias!!

Joop Slim06.11.07 / 2AM

Dude, this is one great topic.
Had many sleepless nights about this problem (who is so simple to correct…)
All my pictures turned out blueish, and could not find the solution.
Big THANKS!!!!!

Tancredi25.10.07 / 16PM

Peter, its my understanding that using Monitor RGB simply uses whatever colour space you monitor is set to, which is what you’d see online with web graphics. It basically turns off colour management. As long as you don’t have the ‘Convert to sRGB’ checked you should get output that when viewed in your browser, looks the same is it does in Photoshop. At least that is my experience.

Until each user sets up his monitor and colour profile properly and all web graphics are saved using appropriate colour profiles I don’t think there is much point in working in anything but your monitor’s unaltered colour space. At least you know that what you see is what you’ll get when you save the web graphic. Of course someone else will see something different due to the calibration of their monitor or gamma settings. There’s nothing you can do about this though.

Peter Mars25.10.07 / 13PM

I am not getting consistency at all with any of these suggestions and one thing I do know is that Monitor RGB should absolutely never be used as a working space. This whole thing really sucks and Adobe should do something about it. I cannot tell you all how upset I am with this. I am losing so much valuable time I could scream. It seems to me that “Save for Web” should either honor color profiles or display images as they will appear on the web with profiles removed. Adobe really blew it this time!

Scott Dixon14.10.07 / 6AM

Man, you’ve saved my life! So simple.. Thank you!

gmoney10.10.07 / 4AM

thank you, damn cs3

Matt03.10.07 / 6AM

Unfortunately, I have tried both suggestions here - and while it previews correctly in Photoshop now - it does not save correctly. I’m still getting washed out images! Help!

Damascity02.10.07 / 22PM

You are a lifesaver!

Mobius02.10.07 / 11AM

I’ll have to try that. I hated that issue when taking somebody else’s photoshop file with their colours and layers set up vibrant and the way they wanted it, then when saving for web everything go dull. You have to start in the right mode, but what about under “Color Settings” and the “North America Web Internet” option in Photoshop CS3. I think that would be something to try out.

Jen19.09.07 / 4AM

Thanks a billion…it really helped reduced my stress headache for the day!