PDA

View Full Version : Why is My Photo Turning Yellow When Uploaded To The Web???




VideoNewbie
Jul 15, 2012, 01:36 AM
so im having a weird situation with the color of my photos. the picture looks perfectly fine in photoshop and in preview..ive tried saving it with and without "embedding color profile (rgb)" and the problem remains.

what problem exactly? well everytime i upload the pic to the web, the web version ends up looking duller, greyer, and where the skin looks very vibrant and almost tan in the preview and photoshop version, the same pic when uploaded to the web adapts a sallow sickly yellow hue. ive done a side by side comparison and the difference is huge. sorry i dont have the pic with me so i cant upload it right now to show u all.

whats going on here?



Matthew Yohe
Jul 15, 2012, 01:43 AM
so im having a weird situation with the color of my photos. the picture looks perfectly fine in photoshop and in preview..ive tried saving it with and without "embedding color profile (rgb)" and the problem remains.

what problem exactly? well everytime i upload the pic to the web, the web version ends up looking duller, greyer, and where the skin looks very vibrant and almost tan in the preview and photoshop version, the same pic when uploaded to the web adapts a sallow sickly yellow hue. ive done a side by side comparison and the difference is huge. sorry i dont have the pic with me so i cant upload it right now to show u all.

whats going on here?

Are these PNG files?

How are performing the "Save"? (It matters).

If you're using Save For Web, there is a checkbox you can turn off for "convert to sRGB"

VideoNewbie
Jul 15, 2012, 03:16 AM
Are these PNG files?

How are performing the "Save"? (It matters).

If you're using Save For Web, there is a checkbox you can turn off for "convert to sRGB"

i click on "save as" and i choose "jpeg" as the format ...and ive tried clicking "embed color profile adobe rgb 1998" and unclicking it.... all the other things like "alpha chanels spot colors" etc. are unclicked.

how do i 'save for web' i didnt even know that was an option in photoshop?

-edit- strangely when i do a screen capture of the actual image in photoshop , the photo is able to retain its vibrant color. is there any way to do this legitimately without screen capping? it seems to be a very amateur way. and u lose resolution

UTclassof89
Jul 15, 2012, 08:16 AM
The "Save for Web and Devices" command is in the file menu below the regular Save and Save as... commands. (if you have a very old version of Photoshop it's just called "Save for Web...")

It gives you greater control over settings and allows you to make side-by-side comparisons with different compression settings.

see more info about the color shift (http://viget.com/inspire/the-mysterious-save-for-web-color-shift)

VideoNewbie
Jul 15, 2012, 04:13 PM
The "Save for Web and Devices" command is in the file menu below the regular Save and Save as... commands. (if you have a very old version of Photoshop it's just called "Save for Web...")It gives you greater control over settings and allows you to make side-by-side comparisons with different compression settings.


thanks! i was so excited to try this out hoping it would be a remedy but alas it doesnt quite do the job.

what i like about it is that it shows you what your current photo looks like and pretty much exactly what it will look like if u were to save it for web and upload it.

i tested it out and yes if you were to save a photo using the save for web method it pretty much uploads that exact color.

the problem is, saving for web adds more saturation to the photo. there's no way around this it seems. i tried unclicking "convert to sRGB" and it changes to that exact sallow dull yellow color that i dont want. when i try clicking "convert to sRGB" it more closely resembles the original photo, but it seems to be adding saturation and changing the color a bit.




see more info about the color shift (http://viget.com/inspire/the-mysterious-save-for-web-color-shift)


i tried the alternative suggestions (the 3 steps to ensure color accuracy) in this link as well. all 3 of those steps ensure that ur looking at the photo without the RGB settings...but i actually want the rgb setting.


also strangely they use this photo as verification that "save for web" works when clearly the image on the left is more vibrant than the image on the right?
anybody else see it?

http://www.viget.com/uploads/image/color_2_testing.jpg



just fyi my current color settings are:
Working Spaces
-custom
-rgb: adobe rgb (1998)
-cmyk: us web coated
-gray: dot grain 20%
-spot: dot gain 20%

proof setup:
-working cymk

-EDIT- a realization i just made-i just tried saving the photo regularly by clicking "save as" and this time unclicking the "embed color profile: adobe rgb (1998) and it saves to a sallow yellow dull color. so what i think is happening is that when uploaded to the web (safari or firefox) it strips the photo of the color profile causing it to look dull and sallow.

how do i save the photo so that the color profile is unstrippable? now it makes sense why the screen capped version looks great because the screen cap doesnt have any "embedded info" it just takes the photo as is.

steveash
Jul 16, 2012, 05:24 AM
You never get quite what you want when uploading to the web because web browsers see colour profiles differently. Safari will see sRGB and do its best to reproduce it but most other browsers ignore the profile altogether. I don't think any browser will use Adobe RGB so it will just be ignored.

Added to this is the fact that photoshop is an application originally designed for print applications and so the images appear differently in photoshop as they will in other applications. To view the image without photoshop's adjustments use the 'Proof Setup' and 'Proof Colors' options in the View menu.

There is no perfect solution as all computer will see your images a little differently without the profile and depending on the monitor calibration (or lack of) and OS. When I process images for the web I Proof Color preview them and Save for Web or open them up in Fireworks and make some final adjustments there.

Edit: Note your proof color setup is currently for CMYK print colours. Try Monitor RGB and Internet Standard RGB to see how it looks and then adjust the image for the web.

PrePressAcrobat
Jul 16, 2012, 07:19 AM
Try (from your AdobeRGB photo)
-
Edit > Convert to Profile > sRGB
-
Save as jpeg - uncheck "Embed Profile sRGB.

MSD

VideoNewbie
Jul 17, 2012, 01:35 AM
Try (from your AdobeRGB photo)
-
Edit > Convert to Profile > sRGB
-
Save as jpeg - uncheck "Embed Profile sRGB.

MSD


i tried this. and while setting photos in sRGB mode looks better than a photo stripped of its adobe(1998) color profile

the color in sRGB mode is more saturated than how it looks opened in photoshop.

my head is spinning from all these color profiles

i mean isnt there a way to embed the color profile so that it cant be stripped by the web browser?

it also doesnt make sense that even when u save for web in photoshop the "after" preview it gives you is by no means accurate at all.

the actual saved pic looks nothing like the "after" preview that they give you

likeavaliant
Jul 17, 2012, 03:04 AM
Edit your photos in RGB, not CMYK.

PrePressAcrobat
Jul 17, 2012, 07:18 AM
If you save as an sRGB photo with NO tag embedded
then
open that with your Photoshop
you are probably opening it in AdobeRGB
which would do what you see.
After opening the untagged Photo
EDIT > ASSIGN PROFILE - sRGB
and see if they brings it around for comparison.
(not that re-opening in PS really matters)
sRGB will give you the most general web view for all of the millions of various computer screens out there.

MikeTheVike
Jul 17, 2012, 09:41 AM
Convert the profile to sRGB if it's not already. Use Save-For-Web and check the "Convert to sRGB" box. If you go up to View>Proof Setup select Monitor RGB (this might be different if you use a custom calibrated profile, but Monitor RGB always worked for me on my MAC) Then go to View>Proof Colors to turn that on. It should show you in your document window the colors you will see when saving for web.

Been doing web design for years and had the same problems as you when I was starting out. I never have problems anymore.

thecowinheat
Jul 18, 2012, 09:46 AM
Whenever you convert to another color space your images will always experience a color shift. The amount varies and depends on the range of each color space and the colors in use by that image. Since you are working in CMYK and moving to sRGB (standard for web) you will always see this shift to varying degrees.

You should always work in the color space that your final product will be in. If these images are for web use then work in sRGB not CMYK. This will ensure that the edits you make in photoshop will more closely match those you see in a browser.

If you are using these images for mixed output (Print / Web / etc.) then you may need to create several different versions in each color space and try to match them appropriately. This is a common process for print media when you artist are going to print to different formats / printers each with there own color space and calibrations. In image editing one size never fits all ... unfortunately.

TheCow

ShannonSabra
Jul 22, 2014, 09:57 PM
I found the answer! I was having the same problem. You are probably working in 16 bit mode. go to Image > mode > 8 bit.

Let me know if it works for you tooo!