SRGB FOR THE WEB

[patricklavoie]

<p>Hi, since everyday someone ask why is color look dull and flat when on the web, or print stangely in a minilab, or look too dark in powerpoint and other slideshow software, i tought it might be a good idea to give them a quick response. Im not a color specialist like Andrew Rodney, but this easy & simple kind of tutorial should help. For a more specific answer, please ask Andrew.. (sorry if people bombarded you with email Andrew : )<br /> <br /> WEB & SLIDESHOW SOFTWARE:<br /> <br /> for those who want to save there file for the web and still have vibrant color and sharp small image;<br /> <br /> In Ps go to EDIT > CONVERT TO PROFILE > sRGB to get the color space fix<br /> <br /> In Ps go to FILTER > SHARPEN > SMART SHARPEN to get the sharpen fix or/and use the EDIT > IMAGE SIZE > BICUBIC SHARPER when you downrez a image.<br /> <br /> MINILAB (costco, wallmart, and your prefered one)<br /> <br /> For those who want to save there file to be sent to a minilab and still have vibrant color and sharp image;<br /> <br /> In Ps go to EDIT > CONVERT TO PROFILE > sRGB to get the color space fix or better ask the lab to provided you there custom ICC profile, after installing it on your system, sue the same method as describe earlier but choose that profile instead of the sRGB.<br /> <br /> In Ps go to FILTER > SHARPEN > SMART SHARPEN to get the sharpen fix or/and use the EDIT > IMAGE SIZE > BICUBIC SHARPER when you downrez a image.<br /> <br /> HOME INKJET<br /> <br /> the color space is not that important, since you can work on a sRGB, Adobe RGB, or Pro Photo RGB, the main difference will be (to keep things simple) the kind of color you will be able to see and print; sRGB is the smallest color space so many color would be missing (to keep thing simple) vs printing in Pro Photo if your printer could do it, you will get punchier color and richer color..but only on your inkjet as in a lab or on th web it will look dull and flat.<br /> <br /> Heres a short list of easy reading book that should help get a better yet more complicated concept, but i think my explanation should get you up & running to start, also since your out the house to buy a book, grab a device that will calibrate your monitor like a Spider 3 or a Eye1, or a newer gadget that seem to be really good from people who tried the beta version, a ColorMunki.<br /> <br /> and for the books;<br /> <br /> 1_ Real World Color Management by Bruce Fraser, Chris Murphy, and Fred Bunting<br /> <br /> 2_Color Management for Photographers: Hands on Techniques for Photoshop Users by Andrew Rodney</p>

[laurentlacoste]

<p>Hello Patrick,<br>

About the web, I noticed a few differences in color rendering whether I used Safari, Firefox or explorer to upload pictures to Photo.net. Firefox seems to make colors less saturated than Safari or Explorer. I think I got the most saturated colors from uploading with Explorer, maybe a little more than what I'd done in PS. I would say that Safari comes between the two and that Firefox makes pics looks less punchy and saturated than what post-processed version before uploading. Did you come to the same conclusions?</p>

 

[alan_goldhammer]

<p>I believe Lightroom automates all the steps that Patrick outlines above, if you use the web module. I've created all my galleries that way and it's quick and looks good. However, we must remember that the images will only look as good as the monitors that your viewers have. Having looked at my site on numerous monitors at my day job, I am appalled at the quality of the displays. Don't for a minute think that all your hard work when viewed on your NEC will look good to the average viewer. Often times it will look pretty washed out (unfortunate truth).</p>

[Tim_Lookingbill]

<p>Patrick, do you ever see this color shift issue with certain flat fill colors demonstrated below converting to sRGB for the web. This happens to intense cyans and oranges on my hardware calibrated display.</p>

<p>This isn't a big deal and doesn't affect photos in particular but I'm curious if others get this on their displays especially high end wider gamut ones like the NEC. I'm assuming its a gamut mapping issue caused by the mathematically nonuniform Lab color reference space that's under the hood of color management in general. A Bruce Lindbloom explains this in his blues turn purple article.</p>

<p>Below is a cyan color swatch created in AdobeRGB. The file embedded in this thread is in AdobeRGB so it needs to be viewed in a color managed browser or image viewer. It shows what happens to cyan on my iMac when I convert to sRGB. If I convert to any other color space whose color gamut is larger than sRGB, I don't get this.</p>

<p>Note: Those with wide gamut monitors may not see the distinction between the AdobeRGB and the sRGB patches. Just want to check if this is true.</p>

<p> </p><div></div>

[patricklavoie]

<p>hope i past the test ; )</p>

<p>i use firefox 3.5.3, snow leopard, im on mac.</p>

<p>1_on my NEC 2690 recently calibrated i dont see anything wrong. a plain cyan patch.</p>

<p>2_drag the window on my second monitor, a Apple Cinema Display 23 inch, same thing.</p>

<p>is it a good thing?</p>

[KenPapai]

<p>Wkith Chrome browser, Windows XP, those Cyan patches are definitely different, even on my mediocre ViewSonic VG810S monitor.</p>

[Tim_Lookingbill]

<p>Patrick,</p>

<p>So you see a solid rectangle instead of two slightly different squares? If so this is good for you, but bad on my end when editing these types of hues and then converting to sRGB.</p>

<p>If you open that file in Photoshop and sample the RGB numbers there is a difference of 19 levels in the red channel between the two with AdobeRGB at 78,173,236 and sRGB 97,173,236. Apparantly gamut mapping has its flaws even between display models. Or maybe it's because I'm using OS 10.4.11-(joke intended) ;)</p>

<p>Ken, hope you're viewing in a color managed app. The image is in AdobeRGB so it will definitely show a difference viewing in a non-color managed aware app.</p>

[patricklavoie]

<p>ah, wait. After reading Ken post i decide to open the link with Safari 4..now i see 2 suqare on my NEC and on my Apple?</p>

<p>see a screen capture below.</p><div></div>

[patricklavoie]

<p>but from Firefox 3.5.3 all is fine!</p>

<p>see..</p><div></div>

[patricklavoie]

<p>when i opend the file directly in Ps i can obviously see a big difference visually..one is paler or more pastel i should say, the sRGB one.</p>

<p>Have you try firefox 3.5.3? What browser do you use with your old OS ; P</p>

<p> </p>

[Tim_Lookingbill]

<p>Patrick, I don't have the color managed version of Firefox. There isn't one for my OS version.</p>

<p>Have you tried creating the cyan in PS's Color Picker in a AdobeRGB new doc and then convert to sRGB to see if you get a shift? The sRGB patch in the file in this thread was created by dragging and dropping from a screenshot of this AdobeRGB created cyan file converted to sRGB. It is deliberately intended to look different, so you should see this difference in Photoshop. The fact that it looks the same in Firefox raises other questions I wasn't expecting.</p>

<p>Now that you showed how two different color managed browsers displays these cyan patches, I have to wonder if it's a gamut mapping issue at all. This is just weird and unexplainable.</p>

 

[patricklavoie]

<p>you should be able to get Firefox..heres the specs;</p>

<p>Now as for why it look good on Firefox, and not good on a suppose color managed Safari 4..i cant say. This is where i crawl back under my rock and let the expert like you find the solution ; )</p>

 

<h2>Mac</h2>

<h6>Operating Systems</h6>

<ul>

<li>Mac OS X 10.4 and later</li>

</ul>

<h6>Minimum Hardware</h6>

<ul>

<li>Macintosh computer with an Intel x86 or PowerPC G3, G4, or G5 processor</li>

<li>128 MB RAM (<em>Recommended:</em> 256 MB RAM or greater)</li>

<li>200 MB hard drive space</li>

</ul>

[patricklavoie]

<p>oh and yes, when i take the color from the adobe rgb, create a new document, paste the color it look good. when convert to srgb it look like your paler version..so yes i get the shift that way.</p>

[Tim_Lookingbill]

<p>Just an added note about this cyan. It was created in Photoshop's default Coated Web SWOP space and then converted to AdobeRGB. </p>

<p>Being that I was once a prepress dude, I've come to know the look of this type of cyan and when I first got into digital imaging using a CRT, a Princeton EO90, getting this intense of a cyan to look as accurate as it does here was impossible to do on the CRT.</p>

<p>When I got the iMac which uses the same SWOP certified panel of the first Cinema Display's that were advertised as such, I suddenly could get this very accurate looking cyan creating it in a CMYK space. My iMac's gamut though close to sRGB is differently shaped than sRGB particularly in the cyan regions. I was thinking this had something to do with this color shift you see here converting to sRGB because this sRGB rendering of cyan looks exactly like the cyan I kept getting creating it in the SWOP space on the Princeton EO90. There was nothing I could do to edit this cyan to look as it does in AdobeRGB here using the CRT.</p>

<p>The Firefox anomaly is completely out of left field for me.</p>

[patricklavoie]

<p>@Laurent/ I find that on my mac, firefox 3.5.3 give me the best result when compare with the same file open in photoshop..of course this file look good on my monitor, and i dont expect it to look good on all the monitor across the planet.. but i think if you are sving your image as jpeg srgb you are putting the chance on your side. I dotn have Explorer to compare, and after doing Tim test with Safari and Firefox, i would say stick with firefox ; )</p>

[laurentlacoste]

<p>Patrick, I stick to Firefox too on my Imac, but I must say that my sRGB files lose a lot of punch once uploaded on Pnet. With the PC, under Explorer, as I mentioned above, colours tend to be more saturated than what I'd done in PS (My Mac and Sony monitors are both calibrated with the eye1) .</p>

[sebastianmoran]

<p>Patrick, your advice is right on. I go a bit further: Any image for the web, for minilab, or given to anyone else should be converted to sRGB. <br>

I discovered this when my fall-foliage images looked awful on the web (dull, drab, lost the brilliant reds and oranges). The more color in your image, the greater the problem. <br>

A couple of helpful test pages:<br>

- Test for ICC v4 color management in your browser: http://www.color.org/version4html.xalter<br>

- Samples with sRGB and other profiles: http://www.northlight-images.co.uk/article_pages/web-browser-color-management.html</p>

[Tim_Lookingbill]

<p>About this cyan test, you're suppose to see two different squares, not the way it's showing up in Firefox as posted by Patrick in this thread. Firefox must be using some kind of derivative transform algorithm within the CMM that's not the same as Apple's Colorsync or Adobe's ACE.</p>

<p>That cyan when converted from SWOP coated from where it was created to AdobeRGB clipped the red channel to zero. The gamut of my display allowed me to go into the color picker while in AdobeRGB sampling this clipped cyan and raise the red channel till I saw a change in the appearance then I backed off. On my 2004 G5 iMac I got as high as 78 before I noticed a change which is the final result posted here.</p>

<p>Those with wider gamut displays may get different results raising the red channel and the other two before a change is seen. Not sure about this but I think the wider the display gamut the less you can adjust because of the 8 bit video system. I remember Andrew Rodney mentioning this issue editing skintones on a wide gamut display where slight adjustments produced larger than intended results due to the 8 bit video system having to render with fewer steps within this wide gamut.</p>