# Preserving colors (color space?) when uploading jpg files to this forum



## notapro (Jul 26, 2013)

Hello, Everyone.

I changed monitors recently (low-end, consumer-grade, not graphics- or photography-specific), and Windows 7 Professional (64-bit) recognizes the replacement monitor and has assigned the associated ICC/ICM profile for it.

When I view images on my machine, they look fine. When uploading them to the forum here, it's as if they've become desaturated or washed out.

I can simulate the desaturated look by viewing the jpg files with no color profile associated. Once I make the association, the viewer I use recognizes it, and the image looks normal. Photoshop renders the image properly all the time. Even "Windows Preview" renders the image properly.

Does anyone know what I should do in order to upload an image here that will look "normal" and not desaturated? I thought I had jpg files saved with embedded color profiles, but maybe I missed something. With my other monitor, this issue did not exist.


----------



## polarhannes (Jul 26, 2013)

Some browsers do not have color management at all, some have it but it is disabled by default. I'd begin with googling your browser's name and color management.


----------



## Harry Muff (Jul 26, 2013)

Always export as sRGB for use on the Internet. Some browsers and sites will handle ProPhoto but most won't.


----------



## Pi (Jul 26, 2013)

Harry Muff said:


> Always export as sRGB for use on the Internet. Some browsers and sites will handle ProPhoto but most won't.



+1. Since you want _others_ to view your images properly, you must assume that they do not have color managed browsers, and sRGB is the best space for that.


----------



## Jay Khaos (Jul 26, 2013)

The best way to get maximum resolution yet lowest file size (discards file info unnecessary for web view), in photoshop to go "file > save for web & devices..." and save as 24-bit PNG (you should be able to leave all default presets)

This should also make sure that whatever image you see in the save for web preview box will looks just like that in any browser.

(You can also export as jpgs like this but different browsers seem to deal with jpg compression differently)


----------



## Jay Khaos (Jul 26, 2013)

*The reason I suggested save for web is that you can preview how the image will look in web based on your settings

I shouldn't have prefaced that with "the best way to get resolution...", but it is always the most efficient way to save out files when used on the interwebs—gives you the fastest loading, highest resolution photo you can expect for web


----------



## privatebydesign (Jul 26, 2013)

Jay Khaos said:


> The best way to get maximum resolution yet lowest file size (discards file info unnecessary for web view), in photoshop to go "file > save for web & devices..." and save as 24-bit PNG (you should be able to leave all default presets)
> 
> This should also make sure that whatever image you see in the save for web preview box will looks just like that in any browser.
> 
> (You can also export as jpgs like this but different browsers seem to deal with jpg compression differently)



Saving photo images as PNG-24 is a horrible suggestion, they are normally 3-10 times the size of a comparable jpeg, this means they load slower, take up more bandwidth and processor overhead etc etc. PNG has its applications, but photo images are not one of them.

Look at the comparative file sizes in this four way save for web, drag and drop to your desktop to read the numbers.


----------



## notapro (Jul 26, 2013)

Thanks for the notes on using sRGB. I figured as much, and I believe I have Photoshop configured correctly to save things in sRGB.

I just uploaded an image that was saved in sRGB space in the past (before the monitor change), but it, too, came out looking less saturated.

I am inclined to think that the browsers (Firefox, IE) could be at fault here, but uploaded images are getting desaturated (only?) when uploaded to this site. They look fine as e-mail attachments and when viewing within e-mail.

I appreciate all the thoughts so far and will continue to look into my problem. I will even change back to the old monitor to see if things get "fixed" that way.


----------



## privatebydesign (Jul 26, 2013)

This link might help 

http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html#


----------



## Pi (Jul 26, 2013)

ankorwatt said:


> Harry Muff said:
> 
> 
> > Always export as sRGB for use on the Internet. Some browsers and sites will handle ProPhoto but most won't.
> ...



If the world was dominated by Windows (wait, it is!), you could just use Firefox with the color management plugin enabled.


----------



## Jay Khaos (Jul 26, 2013)

privatebydesign said:


> Saving photo images as PNG-24 is a horrible suggestion, they are normally 3-10 times the size of a comparable jpeg, this means they load slower, take up more bandwidth and processor overhead etc etc. PNG has its applications, but photo images are not one of them.
> 
> Look at the comparative file sizes in this four way save for web, drag and drop to your desktop to read the numbers.


PNG has it's applications, and better resolution and color information (with higher file size as the tradeoff)... is one of them. You'll notice the difference especially if you compare the same photo (jpeg/png) with a hard, crisp edge in it, or gradient from one color to another similar color. Check the artifacts in the highest quality jpeg above the top snail's log that's in focus. Is that worth saving a few hundred kb in file size? That's up to you... but judging by the fact that youre active in CR, I'd guess you appreciate details....

In general though: saving "for web & devices" out of photoshop makes it usable for web, whether its a png or jpeg. I would guess that it would automatically deal with the color profiles... not 100% sure though


----------



## privatebydesign (Jul 26, 2013)

PNG , Portable Network Graphics, is designed for graphics, that is illustrations that often have hard edges and gradients, they are very inefficient for jpegs of images. Not my opinion, recognised fact.

As for the artifacts you think you see, I suspect they are imaginary, don't forget this is a re-sampled screen shot of sub 100% views, there are so many stages of re-sampling here it is beyond imagination.

Overhead, sure a few hundred k is not much, however the logical extension is when you multiply everything by 3-10 times, you end up running 3-10 slower.


----------



## Jay Khaos (Jul 26, 2013)

privatebydesign said:


> PNG , Portable Network Graphics, is designed for graphics, that is illustrations that often have hard edges and gradients, they are very inefficient for jpegs of images. Not my opinion, recognised fact.
> 
> As for the artifacts you think you see, I suspect they are imaginary, don't forget this is a re-sampled screen shot of sub 100% views, there are so many stages of re-sampling here it is beyond imagination.
> 
> Overhead, sure a few hundred k is not much, however the logical extension is when you multiply everything by 3-10 times, you end up running 3-10 slower.



Photos have hard edges and gradients too. You underline "graphics" as if a photo isnt a graphic. I get it though—an illustration converted from vector to flat image looks more crisp as png than a jpeg, gradients have less banding with more color info... does that not translate to photos?

I'm not trying to say PNGs are more effecient... We aren't talking about building a website made entirely out of full res PNG photographs, we're talking about embedding images in a forum post.


----------



## notapro (Jul 27, 2013)

Thanks to polarhannes and to privatebydesign for suggesting browser-related aspects to my problem. All is well with Firefox and IE, though my problem remained.

I deleted the new monitor calibration, profile, and driver. I then reinstalled everything, and now my issue is resolved. Still, were it not for this thread, my Internet browsers would not have been checked and configured for proper color management.

Many thanks to all of you who replied.


----------



## Pi (Jul 27, 2013)

ankorwatt said:


> yes you can but how many of the win computers are using color handling and Firefox in the working places?
> nothing that we who use mac even need to think about



IE10 is (not fully) color managed as well. It would ignore the monitor profile but respect the color space of the image. Everybody who knows enough about color management to bother with a monitor profile, would know how to find and configure a fully color managed browser. 

Mac users do need to think about it as well because other users may not have fully color managed browsers, especially people with mobile devices. Posting a photo in Adobe RGB or in an even wider space is unwise.


----------



## iKenndac (Jul 27, 2013)

Jay Khaos said:


> PNG has it's applications, and better resolution and color information (with higher file size as the tradeoff)... is one of them.



24-bit PNG has 8 bits per channel, same as JPEG. There is no more colour information in a PNG than a JPEG.

PNG is lossless compression, where JPEG is lossy. In terms to quality:filesize, PNG's compression algorithms do better at simple graphics with sharp edges and uniform colours, where JPEG is better at your typical photograph.

Even the PNG website (under "Typical Usage") says that JPEG is better for this kinda stuff:



> Note that for transmission of finished truecolor images--especially photographic ones--JPEG is almost always a better choice. Although JPEG's lossy compression can introduce visible artifacts, these can be minimized, and the savings in file size even at high quality levels is much better than is generally possible with a lossless format like PNG.



If you're going to print your photo, then lossless is what you want. For a tiny version that's going to be displayed on a web forum using browsers already established to be terrible at colour management on crappy 6-bit displays, a big PNG file is probably overkill. If you're going to do that, you may as well just post up DNGs and be done with it.


----------



## LetTheRightLensIn (Jul 28, 2013)

notapro said:


> Hello, Everyone.
> 
> I changed monitors recently (low-end, consumer-grade, not graphics- or photography-specific), and Windows 7 Professional (64-bit) recognizes the replacement monitor and has assigned the associated ICC/ICM profile for it.
> 
> ...



it sounds like you are uploading adobergb or prophotorgb files and then using a non-color managed web-browser. Use firefox with color-management set properly and it'll look fine (although if the images don't need the extra wide gamut colors then it's better to convert to sRGB first so people running whatever browser won't have issues, if has really rich colors of certain types wide gamut is good though).


----------



## LetTheRightLensIn (Jul 28, 2013)

privatebydesign said:


> PNG , Portable Network Graphics, is designed for graphics, that is illustrations that often have hard edges and gradients, they are very inefficient for jpegs of images. Not my opinion, recognised fact.
> 
> As for the artifacts you think you see, I suspect they are imaginary, don't forget this is a re-sampled screen shot of sub 100% views, there are so many stages of re-sampling here it is beyond imagination.
> 
> Overhead, sure a few hundred k is not much, however the logical extension is when you multiply everything by 3-10 times, you end up running 3-10 slower.



it still takes less space than TIFF though and you get lossless compression 16bit per channel

I wouldn't use PNG for web though, but for personal usage on your own computer.


----------

