PNG changing colors using save for web (CS2)

Im having a problem with making PNG pictures when using the "save for web" function (this also happens in Image ready)
I make an image in sRGB color space and chose "save for web" and set the settings, all looks fine and i save it as png8 or png24.
Then when i view it in a browser the colors af "off" (desaturated) ??
But if i chose "Save as" in Photoshop, and chose png, and save it that way, the color macth up and looks allright.
What im a doing wrong ??
I have made a test with to sets of colors / picture one with "websave" color and one without then save them "using save for web" in gif, jpg with profile, png8 and png24
The gif and jpg goes well but the png's colors goes "off"
I also saved the to files using "save as" and here the png's colors looks fine
(Ther are also some screendums of my color setting, "save for web" setting and my screen profile if that can be of anny help
http://home19.inet.tele.dk/jgom/pngtest/
Also! can anybody tell me this ?
When using "save as" i cant chose what png im saving as ? (8 or 24) What type of png dos PS use when you save it like that ???

Now I've read up on it, it seems the issue is indeed gamma.
(I really appreciate the "that's impossible, you must be doing something wrong" comments, by the way. Not "hmm, I don't know," but actually "what you've described in detail isn't happening; you're imagining things." Super helpful.)
Anyway the real question is: is there a way to stop Photoshop from including gamma data? It's apparently an optional portion of the PNG spec.
The whole gamma thing is unfortunate, but the *really* unfortunate bit is that Photoshop includes this information at all, particularly in a Save for Web context.
Most importantly, it seems this has been an issue for some time (Google "PNG Photoshop gamma"), and PNG is usually used for web, so why on Earth hasn't Adobe addressed this? Let's not forget that Photoshop is the industry-leading tool, and the Extended version costs $1000 by itself. The only options I've seen for saving as PNG in PS so far is sRGB conversion, bit depth, transparency, and interlacing. This whole gamma thing seems pretty unacceptable behavior, even by default.
I'm looking into pngcrush; does anyone have a simpler solution to strip the gamma information? Of course, if there's a way to do this in Photoshop itself, please please let me know.
Thanks.

Similar Messages

Color shift when using save for web

Hello,
I am converting my psd files to jpegs using "save for web". I am noticing that the colors are shifting from the original after saving for web. The color shift does not happen if I just convert the psd files to jpegs by using "save as". The psds have a profile of RGB1998. I am using CS3 and my monitor is color calibrated.
Do I need to convert the psd documents to sRGB first before I go to "save for web"?
The preview doesn't look any different if I check ICC profile in the save for web window. I have been told that you are not supposed to embed the ICC profile in the document when saving for web because most monitors are untagged.
Anyway I am wondering if I have to accept a color shift when saving for web or is there something I can do to get the saved for web jpegs to more closely match the original psd?
Thanks a lot for your help.

I think the reason why this question is asked often is because the FAQ entry is pretty lame and incomplete, especially for Mac users that by default have a color managed browser and by default have a screwed up rendering mechanism for untagged images.
Depending on your version of Photoshop, you can convert to sRGB before or during the Save for Web operation.
cesspool13 wrote:
...I have been told that you are not supposed to embed the ICC profile in the document when saving for web because most monitors are untagged.
You convert to sRGB for the systems that do not fully support color management.
and...
You include the sRGB ICC profile for the systems that do support color management.
Doing both covers your bum in most situations. You may choose to omit the ICC profile if you are working on common interface graphics that do not require strict color management. The ICC profile adds a few kilobytes to the file size that are not necessary on lesser graphic elements on a web page.

Photoshop CS3 color management "Save for Web" problem

This problem is getting the best of me.......
After spending 3 full days researching this problem, I am no closer to finding an answer than when I started. I still cannot produce a usable image through the "Save for Web" feature of Photoshop CS3. I have read web page after web page of "Tips, Tricks and Recommendations" from dozens of experts, some from this forum, and still I have no solution... I am exhausted and frustrated to say the least. Here's the simple facts that I know at this point.
I have a web design project that was started in PS CS1. All artwork was created in photoshop and exported to JPG format by using "Save for Web". Every image displays correctly in these browsers (Safari, Camino, FireFox and even Internet Explorer on a PC).
I have recently upgraded to PS CS3 and now cannot get any newly JPG'd image to display correctly. My original settings in CS1 were of no concern to me at the time, because it always just worked, and so I do not know what they were. I have opened a few of my previous images in CS3 and found that sRGB-2.1 displays them more or less accurately. I am using sRGB 2.1 working space. Upon openning these previous image files, I get the "Missing Profile" message and of course I select "Leave as is. Do Not color manage". CS3 assumes sRGB-2.1 working space, opens the file, and all is well.
The problem is when I go to "Save for Web", the saturation goes up, and the colors change. The opposite of what most people are reporting. Here's another important point... new artwork created in CS3 does exactly the same thing, so it's not because of the older CS1 files.
I have tried every combination of "uncompensated color", "Convert to sRGB", "ICC Profile", etc. while saving. I have Converted to sRGB before saving, and my monitor is calibrated correctly.
I have tried setting the "Save for Web" page on 2-up and the "original" on the left is already color shifted before I even hit the "Save" button. Of course, the "Optimized" image on the right looks perfect because I am cheating by selecting the "Use Document Color Profile" item. Why do they even have this feature if doesn't work, or misleads you?
Does anyone have any ideas what could be happening here? Why is this all so screwed up?
CS1 worked fine out of the box.
Final note: I do have an image file I could send along that demonstrates how it is possible to display an image exactly the same in all 4 of the browsers I mentioned with no color differences. It is untagged RGB and somehow it just works.
I am very frustrated with all of this and any suggestions will be appreciated
Thanks,
Pete

>> First of all... I'm using an Adobe RGB image master... I open it and get the Profile Mismatch Screen... I choose Use Enbedded profile... all looks well. Next I go to Proof Setup > Monitor RGB... again all looks well, no change that I can tell.
This has further confused the issue on several points, not the least of which version PS you are doing this with?
>> AdobeRGB> Convert to Profile > Working Space sRGB-2.1... all still looks well... but now, when I go to Proof Setup > Monitor RGB... I see the insane oversaturated look that is driving me nuts.
That is your strongest clue...it sounds like you have a bad system or bad monitor profile. To rule out the monitor profile: Set sRGB as your monitor profile in System Prefs> Displays> Color.
>> Adobe RGB image master... I open it and get the Profile Mismatch Screen... I choose Use Enbedded profile... all looks well. Next I go to Proof Setup > Monitor RGB... again all looks well
That doesn't make sense, stripping an embedded AdobeRGB profile should desaturate the color in Softproof MonitorRGB, especially the reds -- you have something wacky going on there.
At this point I think you need to review the links and get a grip about how color management and profiles work...
BTW, forget about setting ColorSync in PS COlor Settings, use Adobe ACE.
MO,
I think SFW is fixed under CS3 :) By default it Converts to sRGB and strips the profile.

Terrible image quality when using Save for Web in Adobe Illustrator CS6

When saving images of any format and of any ppi using "Save for Web", "round" corners become blurred and pixel , "acute" (vertical and horizontal) angles are clear and of good quality. Reinstalled system with the hope that the cure (Windows 7 64-bit) - has not helped. Up to this point, such a problem did not face, all was well. How can i deal with this?

You are not really making sense.
a) Viewing images at more than 100% in any viewer will introduce resampling from image to screen space. Different tools use different algorithms, but none of them will ever be perfectly "sharp". Again, simple mathematics.
b) JPEG is a compressed format that will never produce "sharp" lines in areas that don't coincide with the underlying block compression. If you wanted that, you'd use PNG or other formats.
So unless you can provide screenshots that illustrate your issue better at 100% zoom, I see nothing out of the ordinary here. Of course there could be all sorts of issues liek color space conversion or odd pixel sizes causing unfavorable distribution of compression blocks, but we realyl cannot judge any of that based on teh info you provided. Just saying that something doesn't look like you experct it to isn't really helping...
Mylenium

Why do my images appear washed out when I use Save for Web?

Q: The color/brightness/tone of my image changes when I use
Save for Web. Why?
A: Photoshop is a color-managed application. The Web is not. Normally, when you view an image in
Save for Web or
ImageReady you are viewing it without color management and see it how it will appear when uploaded to the Web.
To minimize changes, Convert your image to sRGB (i.e from
Edit menu choose
Convert to Profile )before using
Save for Web. You should also make sure that
Save for Web has been configured so that images are displayed using the document color profile (see attached screenshot for guidance).
You should also ensure that your monitor properly calibrated and the gamma is set to 2.2.

Same here. Didn't get any good New Years Eve photos indoors.

Using "Save for Web & Devices" for a Organization Chart with Text

I created a document in CS3 Illustrator that is an Organization Chart. It contains rectangles, lines, and text. It looks great in Illustrator.
I have tried to save it using "Save for Web & Devices" to create a JPEG and a GIF so that I can pop it into a Dreamweaver document as an image and it keeps coming out blurry.
I have tried changing its size and resolution. I have tried opening and exporting it into Photoshop to try to "clean" it up. Nothing seems to be working.
I'm obviously unlettered in this modus operandi!
meem

Thanks for the response.
The background is transparent and will end up on a white background eventually.
I tried to make it clear in Dreamweaver by scaling it and it did seem to improve it somewhat. But it still doesn't look like the clear copy in Illustrator that I started with...
I also need to be able to embed this in a Word document to print for a hardcopy manual.
I had this same problem with Freehand a few years ago.

Removing Exif Data with out using "Save for Web"

I have very large files. I need to remove thw EXIF data. I do not want to use "save for web" because it impacts the quality and size (recompresses) of the files. I need the files to remain un changed except for the removal of the EXIF data.
I have a large number of files to do this to.
Can anyone help?
Thanks

Thanks Tai Lao for the shortcuts.
I have RAW files to start. I "process" them and convert to jpg. Then send them to the client. But there are times the client doesn't need to be able to view the EXIF data, soooo....
1. I'm working on seting up an action to convert the processed RAW files to TIFF first,
2. then, using the shortcuts you listed, set up an action to take the tiff files through the process to strip them of the EXIF data and,
3. then convert the resulting "EXIF-less" TIFF files to jpg - also using an action. I'm going to try to build one action to do the whole thing but so far I'm still experimenting... I have to keep the file names...
Anyway, I'll post my findings.
Thanks
To whomever left the info about Exiftool - Thanks for that info as well. I'll check it out but is seems a bit too complicated for large numbers of files.

Is it possible to preset to JPEG High when using 'Save for Web...'?

Hi,
I am using photoshop elements 10. When I am ready to save an image under 'SAVE FOR WEB..' can I preset it to 'JPEG HIGH' cos right now it will pop up 'GIF'.
When I am using PSE2, I am able to launch it as JPEG HIGH. Now, I have to click on the popdown menu to select 'JPEG High'.

You need to right-click on the PSE desktop icon and choose "Run as Administrator".
Then, open a file in PSE, use Save for Web and change all the settings to what you prefer. Hold down the Alt key and the "Done" button will change to a "Remember" button. Click it and then save your image. The settings will be saved and you do not have to run PSE as an administrator again.
Ken

Exporting an animation using save for web

I am trying to export my animation as a GIF using save for web but when I try saving it gives me an error message saying: "Could not complete this operation. an unknown error has occurred." I am using Photoshop CC 2014.

I am on windows 8, The document is a PSD of course. It's a app UI animation using mostly smart objects and a timeline for the animations. My save options were:
reduction algorithm: Selective
Dither algorithm: pattern
No transparency dither
Color: 128
Dither: (Blank)
Matte: (Blank)
Web snap: 0%
Preview: Monitor color
Metadata: Copyright and contact info
Percent: 100%
Quality: Bicubic smoother
Looping options: forever

Mac user, PS CC 2014 latest version. When using "Save for Web" I bring my 900 x600px @72 ppi in to SFW and the output becomes 300ppi. The only way it stays at 72ppi is if I check "none" for metadata. I know to should not matter much, but I would prefer to

Mac user, PS CC 2014 latest version. When using "Save for Web" I bring my 900 x600px @72 ppi in to SFW and the output becomes 300ppi. The only way it stays at 72ppi is if I check "none" for metadata. I know to should not matter much, but I would prefer to keep all my web jpgs @ 72ppi. Any solutions?

It opens up as 900x600 @300ppi
Here's a screenshot-

Using Illustrator CS6, how to preserve drawn colors when Save For Web to PNG?

Using Illustrator CS6 on Mac OSX 10.9.1:
step 1. I open a new file for Web profile.
step 2. I verify that File > Document Color Mode is RGB.
step 3. I draw a square and set it's color to 0,103,197 (decimal).
step 4. I click File > Save For Web
step 5. In the popup that opens, I set to PNG-24, and verify the option Convert To sRGB is not selected.
step 6. Using the Mac's DigitalColorMeter, I observe the color is 0,109,191 in the Save For Web popup. If I save it, then open the saved PNG file, it's color is also 0,109,191.
How to do this so the colors don't change?
step 7. I close Save For Web popup.
step 8. I verify Edit > Color Settings for Working Spaces is set to Monitor RGB, and that the Color Management Policies for RGB is off.
step 9. I verify Edit > Assign Profile is set to Don't Color Manage This Document.
step 10. I verify View > Proof Colors is off.
Can anyone provide a set of Illustrator CS6 settings that let me save a PNG image with the same colors it's drawn in so I can use that PNG image in a website?
I must be missing something obvious, because anyone working in web design must do this day in and day out, please let me know what procedure people follow to achieve this.
UPDATE:
Using the above procedure DOES preserve the colors when embedding the PNG image in a webpage viewed in Firefox and Chome, but NOT for Safari. Also, the colors are not preserved in Mac's Preview software, as well as Microsoft Office 2011 for Mac.
I'm pretty new to all this. Hoping someone can provide some perspective on what typical procedure people use for web development when working with colors in Illustrator CS6.

Using Illustrator CS6 on Mac OSX 10.9.1:
step 1. I open a new file for Web profile.
step 2. I verify that File > Document Color Mode is RGB.
step 3. I draw a square and set it's color to 0,103,197 (decimal).
step 4. I click File > Save For Web
step 5. In the popup that opens, I set to PNG-24, and verify the option Convert To sRGB is not selected.
step 6. Using the Mac's DigitalColorMeter, I observe the color is 0,109,191 in the Save For Web popup. If I save it, then open the saved PNG file, it's color is also 0,109,191.
How to do this so the colors don't change?
step 7. I close Save For Web popup.
step 8. I verify Edit > Color Settings for Working Spaces is set to Monitor RGB, and that the Color Management Policies for RGB is off.
step 9. I verify Edit > Assign Profile is set to Don't Color Manage This Document.
step 10. I verify View > Proof Colors is off.
Can anyone provide a set of Illustrator CS6 settings that let me save a PNG image with the same colors it's drawn in so I can use that PNG image in a website?
I must be missing something obvious, because anyone working in web design must do this day in and day out, please let me know what procedure people follow to achieve this.
UPDATE:
Using the above procedure DOES preserve the colors when embedding the PNG image in a webpage viewed in Firefox and Chome, but NOT for Safari. Also, the colors are not preserved in Mac's Preview software, as well as Microsoft Office 2011 for Mac.
I'm pretty new to all this. Hoping someone can provide some perspective on what typical procedure people use for web development when working with colors in Illustrator CS6.

Color difference between PNG and JPG in Save For Web

I am working on a website and I while building images for the site I am using a mix of png and jpg images. When I "Save for Web" the same source image creates two different color images when I save them as either png or jpg. How do I make sure the images are saving with identical colors in both png and jpg. Thanks

>My working space is Adobe RGB but I'm not opening the sRGB PNG into Adobe RGB. I am choosing "Leave as is (don't color manage)" this should preserve the PNG's RGB numbers.
are you certain it is not being converted when you open it?
The numbers you quoted are the numbers I get if I open an untagged sRGB image into Adobe RGB (assuming Adobe RGB), and then convert to sRGB.
If I open my sRGB images, either PNG or JPEG, into sRGB, they always match. I've been working on a web site for the past 3 weeks, doing this regularly.
If you are working in Adobe RGB with sRGB images that are not tagged, you add a level of complexity that requires you make the right decision at every step. You need to open them without conversion, then assign sRGB, to keep working.
Or just open the images in Firefox 2, which cannot color manage, and see if the sRGB jpeg and the sRGB PNG match. This is the acid test.

Color shift (lightening) when using "Save for Web & Devices..."

Can someone please let me know why I'm getting a color shift (the entire image lightens noticably) when I export an image or animated gif with "Save for Web & Devices...". It happens on PCs and Macs, and with both CS3 and CS2.
I've been using this feature (flawlessly until a few months ago) long enough to realize that there are several settings to adjust the color table, dithering, web snap, etc., but adjusting these settings don't seem to fix the problem. When I use "Save As..." the color shift doesn't occur, and that's been my workaround, but I'm currently trying to save a few animated gifs, which must be saved with "Save for Web & Devices..." in order to retain the animation.
Please help!! Many thanks.

Ah ha! I thought so. The only reason I can speak on this topic at all is because of what I was forced to learn when I started using a Dell LCD flatscreen.
As mentioned earlier, most monitors are pretty close to sRGB, which made web work somewhat easier. However, it seems recently some so-called "wide gamut" monitors have come to market, including the recent crop of Dells. The new Dells can produce a gamut that is closer to Adobe RGB than sRGB. This means -- speaking loosely -- it can produce brighter and more saturated colours than an "sRGB" type monitor.
RGB numbers, in the context of a defined colour space, represent an "actual" real life colour. A very bright red in sRGB colour space may be represented by r255b0g0, but that same "actual" red colour is represented in the wider Adobe RGB colour space by r219b0g0. Adobe RGB, being wider than sRGB, can include still brighter reds than sRGB's brightest red, hence where sRGB hits a roof at r255, Adobe RGB can keep going higher.
Imagine two ladders, each with ten steps on it. The Adobe RGB ladder is taller than the sRGB ladder, even though they both have ten steps. The 9th step is higher (i.e. brighter) on the Adobe RGB ladder than on the sRGB ladder. So if an image contains the RGB values of r219b0g0, well if you assign it to sRGB, it will not be a very bright red. If you assign it to Adobe RGB, it will be a brighter red, because that "ladder step" (like the 9th step) is higher than the same step in sRGB.
This is why your image appears brighter when viewed in SFW and in web browsers. Photoshop knows it's supposed to be using sRGB colour space, but SFW and web browsers DOESN'T, and so it just assigns your monitor colour space, which with these Dell monitors is wider than sRGB.
I think the Dell monitor is fine...I still highly recommend purchasing some type of hardware calibration utitily (one that has a thingy that attaches to the screen to measure the light being emitted). Properly calibrate and profile your monitor, trust what you see in Photoshop, convert to sRGB for web images, and forget the rest. Either way, your images will look "good" on some people's monitors and "bad" on others.

'Assertion has failed' Error when using Save for Web (PSCS)

This problem is due to the Save for Web preferences becoming corrupted.
Delete the Safe For Web Preferences by holding down CTRL+ALT whilst clicking on File>Save for Web.
(the Save foe Web preference file is saved at:
C:\Documents and Settings\~username\Application Data\Adobe\Save for Web\8.0\
if you wish to delete manually)

You are not really making sense.
a) Viewing images at more than 100% in any viewer will introduce resampling from image to screen space. Different tools use different algorithms, but none of them will ever be perfectly "sharp". Again, simple mathematics.
b) JPEG is a compressed format that will never produce "sharp" lines in areas that don't coincide with the underlying block compression. If you wanted that, you'd use PNG or other formats.
So unless you can provide screenshots that illustrate your issue better at 100% zoom, I see nothing out of the ordinary here. Of course there could be all sorts of issues liek color space conversion or odd pixel sizes causing unfavorable distribution of compression blocks, but we realyl cannot judge any of that based on teh info you provided. Just saying that something doesn't look like you experct it to isn't really helping...
Mylenium

How differs soft proofing in View - Proof Colors and Save for Web - Preview?

Hi, I'm currently confused with one inconsistency. My working space is Adobe RGB and I use calibrated monitor. After I finish my work on image I go to View -> Proof Colors -> Internet Standard RGB. Image looks terribly with the overall violet/purple hue. Then I open Save for Web dialogue, I check Convert to RGB and from Preview options I select again Internet Standard RGB. Now the previewed image looks as expected. The same results I get if I manually convert image to sRGB before soft proofing and saving for web. So... what's the difference between preview in Proof Colours and in Save for Web? Thank you for your opinions.

Hi 21, thank you for your input. All what you say makes perfect sense, it is exactly how it should work and how I expected it works. My problem was, that while testing this theory in practice, I have come to different results. I expected, that if I stick to the theory (meaning keeping in mind all rules you perfectly described) I should get the same result in both soft proof and save for web preview. But... it was not the case. Save for web preview offered expected results while soft proof was completely out of any assumptions and colours were totally over-saturated with violet/purple hue. Also, Edit -> Assign Profile -> sRGB gave another result then Soft Proof -> Custom -> assign sRGB (preserve numbers), but the same as save for web preview. What troubled me was why this is so.
Today I've made tests on hardware calibrated monitor and... everything works exactly as you describe and as I expected.
Then I went back to another monitor which is software calibrated (both monitors are calibrated with X-Rite i1 Display Pro). And again... I received strange results described above. So I did the last thing I thought and disabled colour calibration on that monitor. And suddenly... both soft proof and save for web preview gave the same result.
Probable conclusion: soft proof and save for web preview (together with Edit -> Assign Profile) are programmed to use different algorithm which is evident on standard gamut monitors with software calibration. Question can be closed.
Gene and 21, thank you for your effort.

PNG changing colors using save for web (CS2)

Similar Messages

Maybe you are looking for