marc_edwards

133 Messages

•

5.1K Points

Fri, Jul 27, 2012 2:31 AM

Photoshop: Save For Web, Convert to sRGB should be off by default for PNGs and GIFs

Photoshop's Save for Web ability contains a setting called Convert to sRGB. If on, it destructively changes the resulting file's colour values from the document's profile to sRGB. I believe this is the wrong thing to do in almost every conceivable scenario. The default behaviour is for Convert to sRGB to be enabled. I think this is a huge mistake.

Let's take a look at some common scenarios.

You're building a website using GIFs:
GIFs can't contain ICC profiles. This means if you're using GIFs, they can't benefit from any colour management at all. Converting to sRGB when saving for web will destructively change their appearance with no benefit. If you've used a specific colour, like #FF0010 in your GIF, it will likely be changed to not match the same colour used in HTML, CSS or other code.

You're building a website using PNGs:
PNGs can contain ICC profiles, but PNGs saved using Save For Web can not. This means if you're using PNGs and Save For Web, they can't benefit from any colour management at all. Converting to sRGB when saving for web will destructively change their appearance with no benefit. If you've used a specific colour, like #FF0010 in your PNG, it will likely be changed to not match the same colour used in HTML, CSS or other code.

You're using a PNG or JPEG image with a colour profile on the web, and it's being shown in a colour managed browser:
In this situation, you wouldn't want Convert to sRGB turned on, you'd want to store the document's ICC profile within the image and let the browser do a realtime correction, based on the viewer's computer and settings.

You're building an iOS app:
iOS uses PNG files almost exclusively for app design. I believe iOS ignores ICC profiles stored in PNGs (this is smart for many reasons, including performance). The best way to ensure colours look good on the device is previewing your UI on the device itself. There is some variation between iOS devices, but Convert to sRGB does not improve consistency. Converting to sRGB when saving iOS assets will destructively change their appearance with no benefit.

You're building an Android app:
Android uses PNG files almost exclusively for app design. I believe Android ignores ICC profiles stored in PNGs (this is smart for many reasons, including performance). The best way to ensure colours look good on the device is previewing your UI on the device itself. There is wild variation between Android devices, but Convert to sRGB does not improve consistency. Converting to sRGB when saving iOS assets will destructively change their appearance with no benefit.

I can not think of any scenario where Convert to sRGB makes sense. If, in the highly unlikely event you do need to convert a document to sRGB, it can be done using Edit → Convert to Profile.

Why was Convert to sRGB added in the first place?

Further reading.
Colour management and UI design — My article. Explains the situation with more depth.
A search for "save for web color shift" returns over 8 million results. This is a real and significant issue for many people. An issue that can be fixed by changing a single default setting.
Save For Web, Simply — Note that the settings recommended match what I'm suggesting.

This is a big deal.
This has been demonstrably incorrect for a very long time. I don't know any web or app designer worth their salt who keeps Convert to RGB on. In fact, I'd go as far as saying that if it was permanently turned on, I wouldn't be using Photoshop for any screen design work.

By changing the default behaviour, I think Adobe could remove a lot of frustration for Photoshop and Illustrator users.

Responses

chris_cox_2148894

15.1K Messages

•

195.8K Points

9 years ago

Convert to sRGB was added at the insistence of many web developers who were converting manually all the time before running SaveForWeb. Converting to sRGB (or working only in sRGB) is still the most recommended practice for web images.

sRGB is what the average user on the web will see, so converting other colorspaces to sRGB is a good idea if your image is going to be displayed on the web. Some browsers assume that all images are in sRGB if they are not tagged with an ICC profile.

sRGB is also closer to the colorspace of phones and tablets than most other standard colorspaces.

If the file contains an ICC profile, then converting to sRGB is pretty much harmless.
If the file does not contain an ICC profile, then converting to sRGB is a necessity.
If the browser does not understand ICC profiles, then converting to sRGB is a really good idea.

If you save a file for the web in AdobeRGB or ProPhotoRGB, most users are going to wonder why the color is messed up. If you save it in sRGB, it will look correct for the majority of users.

Yes, "web color shift" usually means that someone does not understand color management, how their browsers displays color, or how Photoshop compensates for the display. But it has nothing to do with convert to sRGB in SaveForWeb. As long as different browsers have different rules for how they convert and display colors, "web color shift" will still be with us.

In short: you're wrong on almost every point here.
All you can claim is that converting to sRGB will change the color values, which might matter if you hand coded other values on the web page. But converting to sRGB will preserve the appearance far more often than not converting.

marc_edwards

133 Messages

•

5.1K Points

sRGB is what the average user on the web will see

Why? If you're using a Mac and no colour management (remember that PNGs and GIFs can't be colour managed when using Save for Web), then the most accurate way to preview your work is without colour management — doing so means Photoshop matches Safari, Chrome, Firefox et al perfectly. Not kind-of-sort-of, but absolutely perfectly, so colour values are identical.

The same is true for PCs. Macs and PCs have the same gamma now, so while the differences between systems can be big, the gap has narrowed.

Converting to sRGB doesn't help with consistency across computers anyway, it just breaks consistency within the same page, which is far more noticeable.

sRGB is also closer to the colorspace of phones and tablets than most other standard colorspaces.

I don't agree with that statement. Also, it's very easy to preview on the device, which will give you an absolutely perfect preview of how the final app will appear. Again, this isn't a kind-of-sort-of, it's value matched perfectly.

I design in Photoshop with a realtime preview of the exact appearance on the device. There's no guessing. (Yes, this is for iOS, where colours are mostly consistent across devices.)

If the file contains an ICC profile, then converting to sRGB is pretty much harmless.

What about rounding errors introduced from the conversion? What about change in gamut? I wouldn't consider those to be harmless. They're needless damage, that could introduce banding and other artefacts.

If the file does not contain an ICC profile, then converting to sRGB is a necessity.

This is simply not true. What if I choose a colour, use it in my document and I want to match the colour in code? It's common for some UI parts to be images and others to be drawn in code (text etc). I want those to match.

If the browser does not understand ICC profiles, then converting to sRGB is a really good idea.

Please see above. Also, I think consistency within the page is far more important than consistency for some parts of the page (just the images with ICC profiles) across different computers.

I think your reply shows a disconnect with the way images are actually used on the web and in app design. Ultimately, this is a destructive adjustment that's applied to every image that passes through Save for Web.

All you can claim is that converting to sRGB will change the color values, which might matter if you hand coded other values on the web page.

Might matter if you hand coded other values? Might matter? Of course there's other hand coded values. Of course they have to match the images used. I'm shocked you have such a careless attitude towards matching colours within the page.

It's important to recognise that UI design requires a different colour management approach to photography and print design. For this topic, I'm only talking about UI design.

Please give me an actual scenario where you'd want to use Convert to sRGB in Save for Web. Keep in mind that if you set the document's profile to sRGB, then Convert to sRGB would actually not do anything.

How does converting to sRGB help with consistency across devices, where the display's characteristics are going to apply anyway?

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

You're confusing multiple issues.

To make an image that looks about right on the majority of computers - it needs to be in sRGB colorspace. You can do that by starting the document in sRGB, or by converting.

Yes, if you use other colors on the webpage, the numbers need to be referenced to the colorspace of the images (but still won't match exactly on all browsers due to various bugs). Yes, the color numbers almost certainly need to be defined in sRGB.

Turning off color management just misleads you by making everything look kinda right on your own display, and very wrong on everyone else's display.
That's where sRGB comes in - it's an average of common displays, and can provide you a better idea of what other people are going to see, and is what several browsers assume for color handling.

If you know the colorspace of a specific device you are targeting, that's fine - you can work in that colorspace and ignore the sRGB conversions.

I don't have a careless attitude about matching colors - because I know how all the browsers work, and what displays are in use. I know that I need to convert to sRGB to make things look right to most users. And I know that my monitors are not sRGB, so I need color management to provide me with a preview of sRGB. When I design for websites, I start with sRGB and don't need to convert. When I prepare my photos for print they're usually in ProPhoto or Adobe RGB colorspace, I'll save off a copy for the web, and convert to sRGB. When I prepare screenshots of application UI, I need to convert for the display colorspace to sRGB so other people won't see whacked out colors.

Again, this was a very frequent request of web designers -- because until it was added to SaveForWeb, they had to remember to manually convert before running SFW. Now there's a convenient checkbox that saves them a step and some time.

But you're claiming things that don't match actual browsers or actual end user displays. You seem to just ignore color management and how your pages will appear to other users.

And please, don't confuse web design with UI design (I've already got enough hipster wannabes making that mistake).

Converting to sRGB gets you the most consistency - because it is the average of what most users are going to see. If you want to know what users will see: preview in sRGB. If you want your image to look right to most users: convert it to sRGB. If you want your colorscheme to look right to most users: specify it in sRGB.

sRGB doesn't create consistency, but it is the most consistent thing you've got for color right now on the web. It's like saying that a bullseye on a target doesn't create a grouping - which is true, but the bullseye is where the grouping is supposed to be. So no matter how you steady the shot, you aim for the center of the bullseye.

9 years ago

marc_edwards

133 Messages

•

5.1K Points

If you want to know what users will see: preview in sRGB

But that's not true. If I'm on a Mac and building a web page or app, the most accurate way to preview what other Mac users see is to view my webpage in Safari or as an app running on my machine.

Viewing the final product *has* to be the most accurate representation, because it *is* the final product. Agree? (I don't see how you can disagree with this point.)

Previewing as sRGB in Photoshop doesn't match the final product in Safari or the running app. All that does is introduce another unneeded layer of conversion, taking it further away from the actual end result.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

Yes, accurate ON YOUR MACHINE, IN THAT ONE BROWSER.
But what will other users see? The average of what other users will see is sRGB.

But your final product will appear different in different browsers, and different versions of those browsers. That's the sad state of the web for now and the immediate future.

Previewing sRGB in Photoshop does match Safari (in that it assumes sRGB for untagged files, and will honor the sRGB profile for tagged files).

Working in your display profile and saving without profiles - well, you never know what you're going to get (especially if your display isn't close to sRGB).

9 years ago

marc_edwards

133 Messages

•

5.1K Points

9 years ago

Here's the top 5 hits from Google.

Note that all are complaining about Photoshop not matching their browser. They're not complaining that images look different from computer to computer. The fix is easy: disable RGB colour management by setting the working space to the monitor RGB, use a profile of Don't Color Manage This Document and turn off Convert to sRGB.

Everyone wants the same thing — for Photoshop to behave like their browser.

When we saved out the slices, the awesome Odeo pink flattened to a dreary "light coral". I'd seen the problem before, but never so pronounced: The color, through no fault of its own, was obviously changing, and we were at a loss for a way to prevent this.

...

Thankfully, it's an easy fix: Open up any image on your machine and File / Save For Web. Next to the Preset option, there's a sneaky little arrow...click it and uncheck "Convert to sRGB."

I’ve had a lot of problems lately with Save for Web producing colors that are slightly different than my source PSD. After finally losing my mind I set out to find a solution.

...

Now when clicking Save for Web, uncheck Convert to sRGB.

...

For me, these changes did the trick, now my gifs and jpgs are as close to the original as my compression settings will allow.

Have you ever spent a lot of time getting the color in your image perfect only to have it go flat and dull when it was exported to the Web and viewed in a browser?

...

Uncheck Embed Color Profile and Convert to sRGB.

I'm seeing a color shift when I use Photoshop's "save for web" command. Here's a sample, with the right half of each color square indicative of what happens:

Do your images shift colors once you save for the Web and view in a browser?

The problem most people have is that the wrong question is being asked. Once the correct goal is set — for colours in Photoshop, images and the browser to match — the solution is easy.

christoph_pfaffenbichler

Champion

•

1.7K Messages

•

25.5K Points

Quote: »Everyone wants the same thing — for Photoshop to behave like their browser.«
No, thank you, but not everyone wants that.
Also, there are people who use more than one browser and those browsers can behave differently so the claim seems to contain a potential inconsistency.

9 years ago

marc_edwards

133 Messages

•

5.1K Points

When do browsers behave differently? Please give me an example.

Part of the issue is that both you and Chris are using abstract examples. Give me specific examples and I'll show you why Convert to sRGB is a bad idea.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

I wish I could show you this full test matrix, but it belongs to a standards body and isn't ready for publication.

I would have thought you'd have some idea already, given how messed up color handling is in different browsers.
But if you're ignoring the variations between browsers and changes between versions of the browsers, it's possible you haven't noticed all the problems.

9 years ago

dan_peterson_3901493

2 Messages

•

94 Points

9 years ago

100% agree with Marc. I don't know any designers that would disagree and this is something I've discussed at least a couple times in the design meetups I go to.

chris_cox_2148894

15.1K Messages

•

195.8K Points

9 years ago

>> The fix is easy: disable RGB colour management by setting the working space to the monitor RGB,

That's the "hide your head in the sand" approach.
It makes things seem right for the moment, but you've really screwed up because now you assume that everyone has your exact display. And it still won't match all browsers!
And I've seen way too many web answers and tutorials telling you to convert TO sRGB (because it'll give much more consistent results than ignoring color management entirely).

Sure, they want Photoshop to behave like their browser: which browser, which version, on which OS? They vary all over the place (almost as much as font rendering). Some of them recognize ICC profiles, some don't. Some assume sRGB for untagged files, and some assume the display profile (blit without conversion). Some convert images differently from page elements, and some get it right. Some even handle different image formats with different rules. Oh, and vector graphics -- all over the map. And, oh, boy, there's a new can of worms coming in HTML5!

Some people have a simplified understanding of how color works in applications and browsers, and want to turn it all off to make things simpler -- unfortunately they also make it wrong. Kind of how automotive engineering is much simpler if you take out the brakes, shocks, CV joints, power steering, transmission, that messy engine, and all the other moving parts. But the whole point of automotive engineering is to know how those parts work, and how they work together -- not to simplify things to the point where it all stops working. If you know how they all work, you can make improvements, and keep things moving at the same time.

I'd really like color management to be easy - but until browser authors understand the problem and fix their bugs, it's not going to be (and I am working on it, but it's a slow process). And even then, you will still have to understand that every display is different, you can't count on numbers unless they're referenced to a colorspace, and you need to either include profiles or convert everything to the average/standard colorspace.

Note: If displays had more variation between them, people might catch on quicker - because they wouldn't see false consistency of sRGB like displays.

marc_edwards

133 Messages

•

5.1K Points

Sure, they want Photoshop to behave like their browser: which browser, which version, on which OS? They vary all over the place (almost as much as font rendering).

This is absolutely NOT true. Here's three colours sampled from this page from screen grabs from the latest versions of Chrome, Firefox and Safari.

Chrome:
Light blue: e2f4f8
Darker blue: d7eaf1
Dark grey ("Help get this topic..."): 5c5c5c

Firefox:
Light blue: e2f4f8
Darker blue: d7eaf1
Dark grey ("Help get this topic..."): 5c5c5c

Safari:
Light blue: e2f4f8
Darker blue: d7eaf1
Dark grey ("Help get this topic..."): 5c5c5c

Notice how they all match? I think you're missing quite a few important details in this discussion. There are rendering differences, but all the colour values match perfectly here. In fact, I've never seen a browser display a colour that didn't match its HTML or CSS value.

Again, I think you have the right answer to the wrong question.

Some of them recognize ICC profiles, some don't.

Let's not confuse things. I'm talking about GIFs and PNGs that don't have ICC profiles... remember that Save for Web can't save ICC profiles for those formats (and that GIFs can't have ICC profiles).

And again, this is for web and UI design. *Not* for displaying photos on the web. *Not* for print design.

9 years ago

pierre_courtejoie

Champion

•

917 Messages

•

19.6K Points

Marc, how will SFW know that you're outputting for web/UI design, and not just outputting photos? You suggest a different setting for GIF/PNG than for JPEG, right, in that case, it makes sense, if it is not already the case.

I'm sure there are way more Photographers outputting for the web, than there are UI designers, the default makes more sense in Photoshop than it would in Fireworks, IMHO.

Chris has been hearing for years about Photographers that had their photos' colors change once put on the web/seen in a non color managed program/browser.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

>> This is absolutely NOT true.

Sorry, but it is true. We've been testing browsers for compliance with color management, and they're all over the bloody map (again, we're working on that in various standards groups).

You think things are simpler because you're missing all the complications.

9 years ago

marc_edwards

133 Messages

•

5.1K Points

I'm sure there are way more Photographers outputting for the web, than there are UI designers, the default makes more sense in Photoshop than it would in Fireworks, IMHO.

Thats a fair and sensible point.

What's Adobe's recommended workflow for photos on the web? I would have thought it'd be JPEGs with ICC profiles included.

Either way, converting destructively to sRGB in situations where there's no ICC profile in the file feels like a very blunt instrument to apply to every single image exported from Photoshop.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

Whatever format works best, with an ICC profile if possible.
But it needs to be sRGB to account for the browsers that still don't do color management, and those that do but can't get it right.

You need to convert to sRGB at some point, doing so in SFW is just convenient.

9 years ago

pierre_courtejoie

Champion

•

917 Messages

•

19.6K Points

9 years ago

Maybe should the thread title be edited so that "for GIF and PNG" is added?

Because the main reason of the addition of that checkbox was the jpegs, that the photographers output for the web, if i'm not mistaken.

marc_edwards

133 Messages

•

5.1K Points

That's a good suggestion. I'd change the topic to "Convert to sRGB should be off by default, or removed altogether for PNGs and GIFs" if I could. I think I can't edit it now?

Just to clarify: I'm talking about exporting non-photo elements. User interfaces, icons, and non-photo-based website designs.

Also, I definitely accept that it's very likely that UI designers make up a small portion of Photoshop's userbase.

9 years ago

pierre_courtejoie

Champion

•

917 Messages

•

19.6K Points

I can.
Done.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

It's needed for GIF and PNG as well -- anytime you have web content, it really should be in sRGB. If you are creating images for the web and working in something that isn't sRGB, you've probably made a mistake.

9 years ago

matthias_kampitsch

2 Messages

•

80 Points

9 years ago

So what’s the ideal starting point for a new document?

Which color mode with how many bits and what color profile do you recommend?

marc_edwards

133 Messages

•

5.1K Points

For UI and icon design: RGB, 8bits per pixel, Don't Color Manage This Document, don't use View > Proof Colors and turn off Convert to sRGB when exporting. Oh, and under Edit > Color Settings, set your RGB Working Space to your monitor profile.

And make sure you dither all your gradients (unless you're using them as part of a stretchable button with a 1px wide repeating centre).

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

The document profile for web use (and general purpose UI design) should be sRGB - because that is what your users are most likely to see, and how most browsers are going to interpret the color values.

Turning off color management is just avoiding the problem instead of solving it (and means that what you see is guaranteed not to be what your customers/users see). Working in sRGB or converting to sRGB is closest to solving the problem.

9 years ago

marc_edwards

133 Messages

•

5.1K Points

The document profile for web use (and general purpose UI design) should be sRGB - because that is what your users are most likely to see, and how most browsers are going to interpret the color values.

I don't agree with this. With the way I have Photoshop set up, you can set a colour in Photoshop (#FF0010 etc), then export it with Convert to sRGB turned off, the resulting file contains the same value (#FF0010) and all browsers I've ever tested show it as... you guessed it #FF0010.

Chris, can you create an example that shows my scenario *not* displaying correctly in any popular browser?

Browsers don't assume sRGB... if an image doesn't have a profile, the browser displays the values natively without conversion, as they should. Why make this more complex than it needs to be?

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

Or you could work in sRGB and get the same result, with more predictable color. And if you work in sRGB, you don't need to convert.

Or you could understand that you need to convert to sRGB, and pick your colors from the image after converting to sRGB.

Some browsers do assume sRGB for untagged images, and still try to color manage somewhat. Others only color manage tagged files and send everything else to the display without conversion. One browser actually has a mix of modes (mostly undocumented, so most people won't get to that state).

I'm not trying to make it more complex than it needs to be - but you seem to have a mental model of how things work that is much simpler than things really are.

9 years ago

helena_georgiou

1 Message

•

60 Points

to Marcc : dude you are wrong in everythin..you really dont understand how this work at all..pls do some research ..its not as easy as you think..but pls stop trying to convince everyone that you are right because you are completely wrong! thats not how colorspaces and displays and web works!!

8 months ago

jay_827158

9 Messages

•

164 Points

9 years ago

I have never understood the purpose of this setting with PNGs and GIFs either. It's now the first thing I check when I have color issues, but the fact my output didn't match what I was seeing or the color values I was getting with the eyedropper never made sense to me.

chris_cox_2148894

15.1K Messages

•

195.8K Points

You forgot about color management -- the value in the file (what you measure inside Photoshop) is not necessarily what is going to the display (what you measure with the eyedropper outside of Photoshop). And that will vary across browsers and versions of browsers.

That's why it is important to have everything in a known standard colorspace: so you know what you have, what other people will see, and how each browser will interpret it.

9 years ago

jay_827158

9 Messages

•

164 Points

So, if I design a red rectangle with a logo that sits on top of it, and I want to output that logo as a gif; not transparent, so it is to have some of that red around it, how do I identify what hex value to set the background of the html rectangle I'm laying it on if I can't trust the color picker in that file?

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

Assuming your document is sRGB, just read the value in Photoshop.

You can trust the color picker in Photoshop for the values in the document.
But you can't trust value scraped off the screen - they have probably been converted along the way to the screen.

9 years ago

jay_827158

9 Messages

•

164 Points

What if a client has specified a specific color. Won't that get shifted?

9 years ago

christoph_pfaffenbichler

Champion

•

1.7K Messages

•

25.5K Points

»What if a client has specified a specific color.«
Specified how?
RGB numbers? Those don’t define an actual color impression without a profile.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

Numbers are not a color. To make them a color, they have to be associated with a particular colorspace (aka profile).
Without the colorspace, they represent values that can give different appearances on different devices.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

(Christoph types too fast)

9 years ago

christoph_pfaffenbichler

Champion

•

1.7K Messages

•

25.5K Points

But I wrote sloppily, I should have said »colorspace« instead of »profile«.

9 years ago

andrew_waters_4498073

1 Message

•

100 Points

9 years ago

I've been using photoshop since version 1. For print, then web and more recently UI design for apps. Since they first became previlant colour profiles have done my head in. The only place I have found them consistent and meaningful is in print design and using colour profiles that match the printers machines and processes. On the web and in UI app design I have consistently found that using profiles or converting to sRGB for GIF and PNG files does little but sap colour and consistency from my graphics. And yes I have viewed them on many different browsers, systems and devices. And there is some colour shift there is no doubt, but this shift is far more tolerable to me than the bizzar results I have had from either working in or converting to sRGB. That is real world experience over many years.

chris_cox_2148894

15.1K Messages

•

195.8K Points

Slow and incorrect adoption of color management by browsers hasn't helped, it's true.

But working in sRGB, or converting to sRGB, will get you a better preview of what your users will see, and a more consistent experience on the web.

Working in your display color space and ignoring the complexities of color on the web -- we'll, you've got mystery meat and nobody know how that's going to work.

9 years ago

ricky_romero

7 Messages

•

184 Points

9 years ago

Marc and I got into a heated debate about this on Twitter. :-) Let me see if I can break down my argument for this thread.

Working spaces like sRGB and Adobe RGB are designed to target a certain color application. They all work within the CIE 1931 master color space, which I'm sure you've seen before:

The CIE (2D) chart is meant to describe the full perceptual color limits of the human eye, as measured by saturation. As you can see, the green section is larger because our eyes are more sensitive to green than to any other color. The triangle shape within this horseshoe represents the approximate range of colors that the profile – in this case, sRGB – is designed to support.

But this is all a bit abstract. Let's look at my display's gamut, as measured by a colorimeter, and compare it to sRGB via a hastily-done blending mode selection.

This monitor displays more saturated green at #00ff00 than an sRGB monitor does at #00ff00. Same deal goes for red and blue. As you can see, I've deliberately chosen a display which can reproduce the entirety of the sRGB gamut. This is important, otherwise I would have clipping in very saturated colors. My display manufacturer, Dell, has chosen an LCD and backlight which targets Adobe RGB, another working space:

So why, you might ask, would I use sRGB as my working space, when it desaturates my color output in Photoshop and changes the preview in Save for Web? It's because most display manufacturers do the same thing that Dell did with my monitor – they target a known standard – only they target sRGB instead of Adobe RGB.

The whole idea behind this color management thing is that if you're using sRGB as your working space, and you have a run-of-the-mill monitor (hooked up to a different machine with no calibration at all) next to it displaying what you save out using Save for Web, when you compare the colors next to each other, they're supposed to look very similar. They aren't going to look *identical* because sRGB monitors have the same kind of color variations as my Dell monitor does to Adobe RGB, but it should be a lot closer to what other people are going to see than if you're using your own device's color profile to do your design work.

I can be reasonably confident that my pale periwinkle color is going to look quite similar on someone else's display to what I'm seeing in Photoshop, because everyone has standardized on sRGB. And for the minority of people who are on higher-end monitors like mine, I use my monitor's profile as a proof setup to mirror the "no color translation" color setup that Marc uses, to check that my more saturated colors aren't going to burn anyone's retinae out like the red background does on netflix.com. Best of both worlds!

Since my display has been professionally calibrated, I can also use a proof setup for other things. I measured the color output of my iPhone using my colorimeter and can use that as a proof setup if I want.

The color temperature of my display is different from my iPhone, which the camera accentuates, but it looks much closer in person.

BUT! All this said, the problem still remains though: colors shift and people don't understand why. Color management is incredibly hard, and it took me a couple of years to figure this stuff out for myself.

marc_edwards

133 Messages

•

5.1K Points

The color temperature of my display is different from my iPhone, which the camera accentuates, but it looks much closer in person.

This is why I *only* rely on device testing, done with Skala Preview (software we developed). Nothing trumps seeing the actual results in situ. You simply can't argue with that... it's the final result in place, with everything taken into consideration.

Also, in your iPhone example, both your proof and sRGB examples are miles off the iPhone.

9 years ago

ricky_romero

7 Messages

•

184 Points

When accounting for the color cast from the white balance differences, it's a couple hundred meters off, not miles off. :-) My cones automatically filter those white balance differences out when not looking at them right next to each other, and the same thing happens for your users. It's all relative. This automatic correction doesn't happen with a camera, thus the color cast. That's why it looks much, much closer in person when looking back and forth at each. If you have a colorimeter, I used the X-Rite i1 with i1Match and VNC Viewer to profile my iPhone's display (making sure that the colors weren't being changed over the VNC connection first). Try it yourself, I think you'll see it actually works pretty well for quickly estimating color output (if your display is also properly calibrated).

Besides, I *do* consistently test on-device using your (very nice) software, which works fine, and it *is* my default mode. I'm just illustrating that you can work in sRGB and use color proofing for some interesting things, including checking what it looks like in your own display's profile. I also don't just look at on my iPhone; I also check in sRGB to make sure I'm mindful of that generic standard.

And this isn't even the main focal point of my color workflow. Not everyone has a high-quality Mac display. How do you test on a wide range of consumer-level LCDs? You can't, so you target the average that the manufacturers build to, which is sRGB. It's what's recommended, and by choosing a different working space, this is why you're having problems with Save for Web. My workflow isn't perfect either. Working in sRGB means I see posterization in subtle gradients, but never in the final image (and besides, it's a good reminder to dither!).

Mind the blood pressure! :-) This is just what works for me. And as I've mentioned below, there's a less hacky way to achieve your current workflow which doesn't exhibit this Save for Web problem.

9 years ago

ricky_romero

7 Messages

•

184 Points

9 years ago

An addendum:
The W3C endorses sRGB as the correct color profile for images and raw hex values on the Internet. As such, the default setting for the "Convert to sRGB" checkbox in Save for Web is correct.

If you don't want any color translation at all, instead of turning off color management completely, go to Window > Proof Setup > Monitor RGB. This will have exactly the same effect as Marc's workflow, and cancels out the default sRGB behavior since there is no translation.

ricky_romero

7 Messages

•

184 Points

Sorry, forgot to mention: Use sRGB as your main working profile, then set your Proof Setup to Monitor RGB. Then there will be no color translation in any direction.

Again, however, the recommended workflow for web is to work in sRGB throughout.

9 years ago

marc_edwards

133 Messages

•

5.1K Points

9 years ago

Let's start with some facts:

1. Most developers and designers use Photoshop's Save for Web for web and app PNG and GIF images.
2. Photoshop's Save for Web can not save PNG and GIF images with a colour profile attached.
3. Most web interface images are PNGs and GIFs that do not contain a colour profile.
4. Practically all iOS and Mac app interface images are PNGs that do not contain a colour profile.

That is the reality.

** All the browsers I've tested display PNGs and GIFs according to the raw values contained within the files, with the exception of Safari 6 (just released a couple of days ago, more details below). **

–––––––––– Browser tests ––––––––––

Here's the browsers tested, using a PNG, PNG with gamma chunk of 2.2, GIF and CSS:
iOS 5.1.1 Safari
iOS 5.1.1 Safari - iPhone Simulator
OS X 10.7.4 Safari Version 5.1.7 (7534.57.2)
OS X 10.8 Chrome 20.0.1132.57
OS X 10.8 Firefox 7.0.1
OS X 10.8 Firefox 12.0
OS X 10.8 Firefox 14.0.1
OS X 10.8 Safari 6.0 (8536.22)
Ubuntu 10.10 Firefox 3
Windows XP-x64 Chrome 20
Windows XP-x64 Firefox 14
Windows XP-x64 IE 8
Windows XP-x64 Opera 11
Windows XP-x64 Safari 5

I also tested the same PNG in an iPhone app
iOS 5.1.1 app - iPhone Simulator

I don't have a grab of the iPhone app running on the device right now, but trust me when I say it's the same — I compare screen grabs from the device with my PSDs all day, every day and they always match perfectly.

Here's a composite of the important parts (all identical except Safari 6, which is at the bottom):

Here's the test web page, containing the colours as CSS, a PNG and a GIF image:
http://bjango.com/articles/colourtest/

And all the original screenshots:
https://www.dropbox.com/s/l35dbcrgu7i...

Except for Safari 6 (info below), every single browser rendered everything exactly according to the HEX values typed into the PSD initially. PNG, GIF, CSS across many browsers and versions are identical.

Safari 6's CSS did match the other browsers, but the PNG and GIF images did not.

I don't know his current opinion, but in 2006 Dave Hyatt thought it was a bad idea to treat images with no profiles as sRGB:

First of all, if you correct unprofiled images to sRGB, you have to correct all drawing to sRGB. This includes everything drawn by CSS (borders, backgrounds, text). This is not difficult to do under the hood, although it is difficult to do it with no performance regression in our benchmarks at all. In fact we even tried this during the Tiger development cycle (just correcting everything drawn to sRGB), but it slowed us down.

The big hurdle that we ran into, though, was with the drawing we did not control, namely the Flash plug-in. The problem is that designers specify colors in Flash and colors in CSS in the Web page, and they expect those colors to match. Because Flash’s drawing isn’t correcting to sRGB, if we did it in Safari, there would be color mismatches all over the place. These mismatches look far worse than if we just don’t correct at all.

If the Safari/WebKit team have chosen to assume images with no profile are sRGB in Safari 6, then I think that was a big mistake, and I bet the web community will be upset that CSS and images no longer match.

Apart from the brand spanking new Safari 6, I have never, ever seen a modern browser behave differently. If you believe this is the case, please provide evidence.

–––––––––– No RGB management vs sRGB all the way ––––––––––

There's two setups that are being advocated in this discussion.

I recommend:
Working Space / Proof: Monitor RGB / Off.
Document profile: Don't Color Manage This Document.
Convert to sRGB: Off.

Chris and Ricky recommend:
Working Space / Proof: sRGB.
Document profile: sRGB.
Convert to sRGB: On.

Here's how colour values are tracked throughout those workflows. Please note (again!) that we're talking about PNGs and GIFs saved using Save for Web, so they *can not* have profiles.

The numbers in the red box will change depending on your monitor profile.

If your document is tagged sRGB and you're exporting with Convert to sRGB turned on, your values are being exported unchanged (converting from sRGB to sRGB will not change the values, unless there's a rounding error in the conversion).

Colour management is all or nothing. You can't make some blind conversion when you're saving an image that doesn't contain a profile. And remember, for user interface design colours in images MUST match colours in code. That's essential.

–––––––––– The important conclusion ––––––––––

In Chris's recommended setup, Convert to sRGB does nothing. In almost any other setup, it will damage every exported file.

Please remind me again why the option is turned on by default?

ricky_romero

7 Messages

•

184 Points

Thanks for doing that testing. So Safari 6 is translating PNGs to sRGB, but not HTML/CSS color? :-( I agree. That's definitely a bug in Safari. Like you said, color management is all or nothing. People can come down on either side of the argument, however. Wanna file a Radar, keeping that in mind?

(converting from sRGB to sRGB will not change the values, unless there's a rounding error in the conversion).

Let's check your assumption that the sRGB -> sRGB conversion could introduce rounding errors.

I wrote a PHP script to create a 4096 × 4096 PNG with all 16,777,216 RGB8 color values in it. Let's run it and verify its output against itself real quick:

blitzwing:~ r$ cd /Users/r/Desktop/colors


blitzwing:colors r$ php 16777216.php


No path set.  Creating image...


Saving 16777216.png to current directory...


blitzwing:colors r$ php 16777216.php 16777216.png


Verifying image...


The images are identical.

Cool, now let's open the PNG up in Photoshop CS6. Edit > Convert to Profile. I'm just checking the Source Space here, to make sure it's in sRGB. Yep! Cancel.

File > Save for Web...: Convert to sRGB is left turned on. Holy crap, only 128K?! Either it's broken, or PNG rocks. :-) Saving as sRGB.png.

blitzwing:colors r$ php 16777216.php sRGB.png


Verifying image...


The images are identical.

Good. While we're here in Photoshop, let's also pick a color and pencil it somewhere else just to make sure my script is detecting differences correctly. Saved as sRGBdiff.png.

blitzwing:colors r$ php 16777216.php sRGBdiff.png


Verifying image...


Images differ at x:1990 y:2003.


Us:     r:198 g:55 b:125


Them:   r:197 g:55 b:125

So those yellow boxes in your chart should be green. All 16,777,216 colors tested, zero difference. This is a fact. It would make a very good regression test for future versions of Photoshop though. I would quibble with you on the use of a bright red box there, but we've already argued about this stuff at great length. :-)

Next, let's talk about the checkbox itself.

In Chris's recommended setup, Convert to sRGB does nothing. In almost any other setup, it will damage every exported file.

Please remind me again why the option is turned on by default?

This subtly implies that Chris and I in the minority with this sRGB nonsense, and there are an untold number of web color workflows, which, taken together, is much larger, so the default checkbox setting needs to change as such. In reality, our workflow is the majority; as Adobe assumes that you will be creating content for a wide range of computer displays, the default working space for Creative Suite is sRGB.

As I said previously, there is consensus that designers should use sRGB for web work. This is a Save for Web dialog box, therefore, the default setting makes sense. If you have a photo in ProPhoto RGB or Adobe RGB, it should be converted to sRGB so that the colors don't look washed out on an sRGB-style display. And there are cases where you would want to do this in PNG, too. This photo is used in an animation that is dependent upon the presence of an alpha channel, and this kind of thing will become more and more common as HTML5 adoption skyrockets.

Your workflow (and the workflow of the people following your advice) is specifically tailored to creating UI/web images for Mac/iOS displays that are reasonably consistent and high-quality. It is very specialized, and the only reason I can imagine that you are using Save for Web for your UI work is for the optimization benefits. I know you do some web work as well, but it's not specifically targeted at a general audience; just Mac/iOS users with nice displays.

However, the default setting for Save for Web is destructive for your specialized workflow, as you have said. This checkbox does not have any context of your color workflow. Its default behavior depends on your leaving the rest of the color settings alone, in sRGB. This is the root problem.

Because this checkbox is integral to color workflow (again: all or nothing!), my proposed solution is for it to remember your last setting and/or have it be part of the Color Settings dialog. Not to force a default that doesn't make sense for the majority of the people using this feature. I hope that makes sense. I'm getting tired of this (but at least it's not another Twitter argument). :-)

9 years ago

marc_edwards

133 Messages

•

5.1K Points

Let's check your assumption that the sRGB -> sRGB conversion could introduce rounding errors.

I shouldn't have said that, because it doesn't. You're right. That's a minor point though... if anything it just proves that Convert to RGB isn't needed for your workflow and Adobe's preferred workflow.

So, who *does* need Convert to RGB? Photographers who are using a non-sRGB colourspace who want automatic destructive conversion to sRGB, because browser support for colour profiles is bad? Why are those people using PNG and GIF? PNG and GIF are typically user interface image formats. Photographers would be better served by using JPEG. And in that case, I'd probably recommending converting to sRGB *and* including an sRGB ICC profile.

Why would you want to convert to a profile, then not tag the image with that profile? To me, that's just adding to the problem. Not having a colour profile in an image should mean "I want this to be displayed without conversion". And I think that's where the Safari 6 team have made a huge mistake. At the very least they should be converting everything drawn to the page.

So those yellow boxes in your chart should be green.

I marked them yellow because they don't match the display and therefore the user isn't getting what they're seeing. In your case, why wouldn't you just use Monitor RGB as the working space, set the documents to Don't Color Manage This Document and preview as sRGB? Same end result.

Colour management does not work when only half the problem is solved. I think Photoshop's Convert to sRGB adds to the problem, and doesn't aid it.

Because this checkbox is integral to color workflow (again: all or nothing!)

But you're not getting all. You're getting a destructive conversion and no tag on the file. At best, that's half. At worst, it's like closing your eyes randomly spraying bullets in the direction of the target. It's a hack that does more damage than good, and for you, it actually does nothing.

Let's take a short recap on some of Chris' comments directed towards me.

In short: you're wrong on almost every point here.

Yes, accurate ON YOUR MACHINE, IN THAT ONE BROWSER.

But your final product will appear different in different browsers, and different versions of those browsers. That's the sad state of the web for now and the immediate future.

But if you're ignoring the variations between browsers and changes between versions of the browsers, it's possible you haven't noticed all the problems.

Chris, you're wrong on every single point here. Please refer to the tests I've done.

And just to preemptively reply: Remember that we are *only* talking about PNGs and GIFs that do not have colour profiles attached.

9 years ago

ricky_romero

7 Messages

•

184 Points

if anything it just proves that Convert to RGB isn't needed for your workflow and Adobe's preferred workflow.

I've addressed this in my previous post:

And there are cases where you would want to do this in PNG, too. This photo is used in an animation that is dependent upon the presence of an alpha channel, and this kind of thing will become more and more common as HTML5 adoption skyrockets.

This is just one example. Apple uses PNGs for many of their product photos when an alpha channel is necessary. I've also pushed photos through SfW as PNGs in an interactive demo I made for Intuit (view on an iPhone). And these photos could have started in Adobe RGB. If not converted to sRGB, the colors would look dull and washed-out on a normal monitor.

The Convert to sRGB checkbox being checked by default in Adobe's recommended workflow is meant to take anything that isn't translated to sRGB and make sure that it is. You may not agree with it, but it is consistent with the rest of their default settings, as well as the all-or-nothing mantra: it accounts for all sRGB workflow scenarios (see below for more on this, I do agree that it's broken in one respect).

I marked them yellow because they don't match the display and therefore the user isn't getting what they're seeing.

This is a need that you and I both address in our workflows in different ways (see below).

In your case, why wouldn't you just use Monitor RGB as the working space, set the documents to Don't Color Manage This Document and preview as sRGB?

Our workflows optimize for different results.

My display is very close to the Adobe RGB working space. For my Adobe RGB photos in Lightroom, it allows for a wider range of color reproduction. But it also means that purely saturated colors, at my default gamut, are fluorescent. For design in Photoshop, that is not quite representative of my target audience. I must target a wide range of LCDs, and sRGB is the recommended way of handling that. So, I want the default mode of operation to be sRGB.

Both of our workflows target idealized scenarios. Yours assumes that most Mac/iOS displays look much like yours. Adobe's/mine assumes that most monitors look much like sRGB. We are guilty of the same crime, as neither is the case (your blue boxes are spot on). However, your workflow can be more targeted, because you design on Apple displays, for Apple displays, and oh well if someone hooks up an Adobe RGB Dell monitor to their Mac like I did. And mine doesn't really solve for Adobe RGB monitors either. These people aren't in our target audience, and here's why.

I'm getting a little philosophical here, but it's fine to design both ways. In the end, our audiences don't know about the color management workflows we used. Their baseline is their monitor. If our #facade looks a little different from their #facade, it really doesn't matter in the end. It's all relative to what else is on their display, and their previous experiences on that display. All we can do is try our best to simulate what they're seeing, and we go about this in different ways, keenly aware of any tradeoffs we're making.

I think it should be abundantly clear by now that there's no common ground here, and I'm frankly tired of talking about it, so let's move on...

But you're not getting all. You're getting a destructive conversion and no tag on the file. At best, that's half. At worst, it's like closing your eyes randomly spraying bullets in the direction of the target. It's a hack that does more damage than good, and for you, it actually does nothing.

When I said, "this checkbox is integral to color workflow," I meant this in terms of color workflow in general. I agree that the current behavior is broken in that it doesn't remember your settings, as it is destructive to your workflow. I disagree that it does nothing for people using the recommended sRGB working space (see above).

Because this checkbox affects color and has no context to the designer's workflow, my proposal above was:

Move Convert to sRGB to where the other color management settings are, or
Remember what you set it to last time, but stay in the Save for Web dialog.

In either case, it would still be checked by default (for consistency with Adobe's sRGB workflow), however, it would remember what you want the setting to be.

9 years ago

marc_edwards

133 Messages

•

5.1K Points

Apple uses PNGs for many of their product photos when an alpha channel is necessary.

Surely the solution to that is to embed an ICC profile into the PNG and *not* convert? PNGs can have profiles... that's just not supported in Photoshop (as far as I'm aware). I wonder why this feature doesn't exist?

Remember what you set it to last time, but stay in the Save for Web dialog.

Thankfully, the setting is remembered.

Also, I think my frustration stems from Chris assuming I'm an idiot, and suggesting what I'm saying is incorrect. If anything, I've demonstrated that all browsers render the same, except Safari 6. I also think Adobe's skew towards photography misrepresents those using Photoshop for interface design. Maybe we're just using the wrong tool for the job.

For the record, I agree entirely with your setup, if you're trying to target Windows and Mac and are aiming for a generalised solution.

I think consistency within the same page is far more important that aiming for consistency across all devices, which is completely unachievable with the current browsers.

9 years ago

ricky_romero

7 Messages

•

184 Points

One more post and I'm done. :-)

Also, I think my frustration stems from Chris assuming I'm an idiot, and suggesting what I'm saying is incorrect.

In Chris's defense, when I first contacted you on Twitter, I'd bet you thought I was an idiot too! ;-) And it's really easy to assume that, given how esoteric a subject color management is, how hard it is to get right, and how much context you need in order to understand why somebody's workflow is done the way it is to achieve its goals.

See you around :-)

9 years ago

marc_edwards

133 Messages

•

5.1K Points

Thanks for the great discussion Ricky. For the record, I think you're smart :D

Here's a real life example of why Safari 6's new policy is bad: https://twitter.com/foresmac/status/2...

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

9 years ago

If you are working on an sRGB display, you may not see the changes being applied by various browsers.

But my displays are mostly AdobeRGB - so I see more significant differences.
New displays coming in the near future will make the difference even worse (larger gamuts, not necessarily RGB primaries, etc.), and require color management at all times to work well.

Safari, Firefox, Chrome.

Safari, Firefox, Chrome.

marc_edwards

133 Messages

•

5.1K Points

If you are working on an sRGB display, you may not see the changes being applied by various browsers.

I'm using "LED Cinema Display", the default profile for my OS X and display combination (it's different to sRGB). I use this because it matches what other Mac users are likely to see on the web as closely as possible. (Same deal for my MacBook Air... I'm using the default Apple supplied profile.)

I still don't see how destructively converting to sRGB, then *not* tagging the image is helpful as the default behaviour. If you really, really want to convert to sRGB, then an ICC profile should be added to the file. I don't think Photoshop can save PNGs with ICC profiles, even though the spec allows it?

Justin Seeley recommends disabling Convert to sRGB:
http://www.lynda.com/Photoshop-tutori...
(Apparently in part 2. I don't have a Lynda account to view it.)

I'm sure you have better stats, but of the people polled by me via Twitter, they prefer to disable Convert to sRGB. http://strawpoll.me/983/r

9 years ago

jay_827158

9 Messages

•

164 Points

I have a Lynda account.

Justin states: "I want to make sure that convert to sGSB is unchecked. By doing this, I'm insuring that the graphics that i export out of Photoshop will NOT have a color profile assigned to them, and thus they have the best chance of displaying properly across multiple screens and browsers". (emphasis his)

He also recommends Monitor RGB for Color Settings Working Space and Off for all Color Management Policies.

And to set Proof Setup to Monitor RGB and to use Legacy Macintosh and Internet Standard RGB (sRGB) to periodically see what things will look like on a Mac or PC.

9 years ago

christoph_pfaffenbichler

Champion

•

1.7K Messages

•

25.5K Points

What does this person mean with »displaying properly«?
Edit: »This person« referring to the aforementioned Justin, not Jay.

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

Convert to sRGB has nothing to do with color profiles. And converting to sRGB is how you get images to what most people will see on multiple screens and browsers. Turning off all color management policies guarantees that you'll get bad results because you won't know that you have multiple colorspaces in use.

Using Monitor RGB is just hiding your head in the sand and pretending that everyone has the same monitor as you. If you work in Monitor RGB, there is no need to turn on proofing of Monitor RGB.

Legacy Macintosh is NOT what current Macintosh users will see - they see sRGB.

So "Justin" was wrong on all of that.

9 years ago

jay_827158

9 Messages

•

164 Points

What method is Adobe using to get the correct message out there, as you seem to be stating that many alleged authorities are "wrong on all of that". Is there supporting documentation, blog articles, tutorials that Adobe endorses, so to give their customers some clear, concise information on this topic?

9 years ago

chris_cox_2148894

15.1K Messages

•

195.8K Points

We've tried a variety of methods, but many web developers have trouble understanding the concepts and give up.

9 years ago

jay_827158

9 Messages

•

164 Points

Could you please direct me to any?

9 years ago

jay_827158

9 Messages

•

164 Points

I'm not trying to call you out on this. There seems a lot of hyperbole here and I'm genuinely interested in learning about this, understanding it, and applying it correctly in my work. Surely, if there is a correct way to use Photoshop for web colours, Adobe should be out there pushing it and explaining it to customers, rather than aggressively defending the decision at Get Satisfaction. Yes?

9 years ago

christoph_pfaffenbichler

Champion

•

1.7K Messages

•

25.5K Points

»Adobe should be out there pushing it and explaining it to customers,«
Have you bothered reading what the documentation offers on Color Management?
http://help.adobe.com/en_US/creatives...

9 years ago

jay_827158

9 Messages

•

164 Points

I have, but I'm unable to find any references to the web and/or browsers and how they react to colors. Perhaps you can refer me to something?

9 years ago

jay_827158

9 Messages

•

164 Points

The best I can find is this one:

http://help.adobe.com/en_US/creatives...

Which is basically just one paragraph that says "use sRGB." Not very helpful. No explanation. No support. Nothing about ICC. No examples. Nothing about JPG vs. PNG/GIF. Nothing about how to then calibrate the CSS colors codes to match those images. Is this as good as it gets?

9 years ago

marc_edwards

133 Messages

•

5.1K Points

When reading anything on the topic, make sure you keep in mind that PNGs saved from Photoshop using Save for Web can't have ICC profiles.

The reality is that there's often a simple choice:

**Option 1** — Are you aiming for consistency across multiple devices? Follow Adobe's advice and use sRGB, just be aware that it's actually unachievable with the current state of browsers. Although, if you want colour management to have a chance of working, you'd better embed colour profiles. Colour management only works properly when the document has a profile and the browser/viewer knows what to do with the profile.

**Option 2** — Are you aiming for consistency within the page across CSS/HTML and images? You have no choice but to aim for “device RGB” and to disable colour management. Despite the advice against doing so in this thread, it's actually a smart way to go for user interface design, where colour accuracy is trumped by consistency between elements (there's nothing worse than a join between a CSS colour and image colour not matching). Please note that going down this path also has issues in Safari 6, thanks to an awful recent change.

It's also worth mentioning that iOS, Mac, Android and other user interface design work can not and should not target anything other than device RGB, because the platforms aren't colour managed for user interface images. And, advice to use sRGB or some kind of colour managed workflow for app design is poor advice... all you're doing is ensuring Photoshop doesn't look like the final result. In those situations you should be doing as much device testing as possible.

9 years ago

bellnwhistle

12 Messages

•

222 Points

8 years ago

Thanks everyone for a great discussion here. Very informative. One question: Chris, you said that:

"New displays coming in the near future will make the difference even worse (larger gamuts, not necessarily RGB primaries, etc.), and require color management at all times to work well."

Can you point to any more info on that? What displays?

chris_cox_2148894

15.1K Messages

•

195.8K Points

right now, there are only a few displays with larger gamuts than Adobe RGB (like the RGB-Yellow displays).

There are more coming, but not announced yet, so I can't say much about them.

8 years ago

christoph_pfaffenbichler

Champion

•

1.7K Messages

•

25.5K Points

Could you tell whether those will add different colors apart from yellow?

8 years ago

marc_edwards

133 Messages

•

5.1K Points

@Christoph There's a bit more info here: http://en.wikipedia.org/wiki/Quattron

Unless those displays end up on mainstream consumer devices, I'm not sure they're relevant to this discussion about web and app UI PNG and GIFs.

8 years ago

christoph_pfaffenbichler

Champion

•

1.7K Messages

•

25.5K Points

Thanks for the Link.

8 years ago

mellfotostudio

1 Message

•

60 Points

a year ago

There's one more very valid reason for keeping "Convert to sRGB" - namely, many CMS and other automated management systems will perform image resizing/rescaling/cropping and so on as you load these images. Most of these systems are not color-profile-aware. PHP's GD library (still most widely used in the wild as of 2020) doesn't understand color profiles at all and assumes everything is in sRGB. Imagick does understand color profiles, but the result really depends on your target output and how it was built and linked (for instance, getting WebP output to respect color profiles necessitates a manual compile of the plugin - something not often possible on shared web hosting).

Bottom line is: if you don't convert to sRGB at some point (instead relying on color profiles), you're almost guaranteed to have false color results on your Wordpress, Joomla, Prestashop or other CMS-driven website. And yes, this is valid in 2020 still.

marc_edwards

Photoshop: Save For Web, Convert to sRGB should be off by default for PNGs and GIFs

Responses

chris_cox_2148894

marc_edwards

chris_cox_2148894

marc_edwards

chris_cox_2148894

marc_edwards

christoph_pfaffenbichler

marc_edwards

chris_cox_2148894

dan_peterson_3901493

chris_cox_2148894

marc_edwards

pierre_courtejoie

chris_cox_2148894

marc_edwards

chris_cox_2148894

pierre_courtejoie

marc_edwards

pierre_courtejoie

chris_cox_2148894

matthias_kampitsch

marc_edwards

chris_cox_2148894

marc_edwards

chris_cox_2148894

helena_georgiou

jay_827158

chris_cox_2148894

jay_827158

chris_cox_2148894

jay_827158

christoph_pfaffenbichler

chris_cox_2148894

chris_cox_2148894

christoph_pfaffenbichler

andrew_waters_4498073

chris_cox_2148894

ricky_romero

marc_edwards

ricky_romero

ricky_romero

ricky_romero

marc_edwards

ricky_romero

marc_edwards

ricky_romero

marc_edwards

ricky_romero

marc_edwards

chris_cox_2148894

marc_edwards

jay_827158

christoph_pfaffenbichler

chris_cox_2148894

jay_827158

chris_cox_2148894

jay_827158

jay_827158

christoph_pfaffenbichler

jay_827158

jay_827158

marc_edwards

bellnwhistle

chris_cox_2148894

christoph_pfaffenbichler

marc_edwards

christoph_pfaffenbichler

mellfotostudio

Helpful Widget

Tags