Scott Hanselman

Gamma Correction and Color Correction - PNG is still too hard

April 03, 2007 Comment on this post [27] Posted in ASP.NET | Musings
Sponsored By

If you're not reading this post in a feed aggregator you can tell that Alexander and I collaborated on a new design over the weekend. (Yes, he was paid.)

By "collaborated" I mean that Alexander is awesome and I learned a bunch of obscure browser-specific nonsense that I didn't know before. I thought that at least some of these problems were fixed by 2007. Oy, what a mess.

I was looking forward to using PNG on this site, and it's the One True Format, right? You'd thing it'd be a no-brainer.

We put that brown background in the header in a div, as a background-image.

<style type="text/css">
#header1 {
height: 79px;
background: url(header-background2-gamma.png) scroll no-repeat;
background-color: #5C4837;
background-position: right 50%;

The original design was fixed in width, so we made it fluid and stretchy. Because the header is a fixed weight, I wanted it to be right-aligned. It's aligned via background-position to the right.

In order to make it stretchy, I made the background color match the left edge of the graphic. This technique worked great in FireFox, but looked lousy in IE6 or IE7. You can see a rendition below or visit a sample page. If you're running IE, you'll see a graphic like the one seen below. If you're running Firefox, you'll see two identical bands.

Nutshell - PNGs look darker on IE than anywhere else. Even IE7 Release!

What different is that, as you probably know, IE doesn't seem support the Gamma Correction data that is added by most PNG-producing applications. Or, it supports it too well! :)

Not only is there crappy PNG support out there, as most don't completely implement other very interesting parts of the spec, like Color Correction, but the spec itself was apparently ambiguous for a number of years.

I went around and collected this bunch of links...

The real frustration for me here, is why should I still care about this stuff? It should be WAY easier...I wonder when the larger problem of color on the web will be solved. I'm really frustrated and a little shocked that I'm still having to sweat this kind of detail these days.

Big thanks to Jon Galloway for helping me figure this out and remove the Gamma Correction from my PNG.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
April 03, 2007 23:45
Is it just me, or the site's loading slower than it was before the redesign?
April 04, 2007 0:18
Yeah, the site is loading a lot slower and the redesign is a bit too blocky for my tastes; old design was better -- perhaps offer customization for which skin we like?
April 04, 2007 0:19
Looks great Scott. I used Alexander's site for ideas when I was re-designing mine 6 months ago. He's got a real knack for design.

max- Site load time seemed about the same to me. [shrug]
April 04, 2007 0:31
Site is slow today because of slowdowns at Technorati.

I'll look at some additional speedups I can make...
April 04, 2007 1:01
I ran into a very similar issue recently. Brian Fresen's "Dropper" utility was very helpful in quickly determining what was going on (and which browser was at fault!).

In my case, I was positioning a small solid-color .png file, RGB (180, 17, 26), which I created with Paint .NET, next to a div element of the same background color on a web page. Firefox correctly rendered the .png image as (180, 17, 26) so the division between the .png file and the div element was seamless; but IE7 rendered the .png as (172, 12, 20) (as shown by the Dropper utility) -- close, but not exactly the same as the original color. There was a noticeable difference between the color of the image and the color of the div element.

After spending a few minutes doing research on the issues with gamma correction and .png files, for the sake of expediency I just took the easy way out, and just re-saved the .png file as a .gif. IE7 did render the .gif properly on the web page.
April 04, 2007 1:10
I just did some testing on IE6, 7 and FireFox and I'm not seeing it load any actually renders progressively now (fewer tables) so you get something on the screen faster. All the javascript that does anything is marked defer, which also improves things.

I'll do a Page Weight analysis, before and after.
April 04, 2007 1:26
Ok, I did this:

* Every image has gone through PNGOUT
* All JavaScript has been minimized
* All JavaScript and CSS is currently cached for a week

If the site feels slow, it is one of these things...(assuming you have a fast pipe)

* This is the first time you've visited the site in a while
* You have a slow computer (javascript is slow for you?)
* I've completely missed something obvious
April 04, 2007 1:31
I encountered this issue several times in the past. Though I never knew the reason for that, I was always able to fix it by "flatten"ing the picture with Paint.NET or GIMP.
April 04, 2007 2:08
Actually Scott I got a server-side error a few times on loading the site :(

Nice new design though :)
April 04, 2007 2:42
Some random comments:
* nice redesign (and I did not notice any speed differences)
* script defer is not supported in Gecko based browser [1]
* The comments name boxes remember functionality has an issue with umlauts, e.g. my 'ö' is restored as 'ö' on reload (yay l10n/i18n support in 2007; I should better reported this to dasBlogs, though)
* Pet peeve: It is Firefox, not FireFox [2]

April 04, 2007 2:46
Björn, try deleting your cookies for my domain and try again. I think we fixed that cookie problem.
April 04, 2007 2:46
Hey Scott,

I definitely like the look of the comments for sure. The rest is still a little blocky but I think that's my personal taste - the Google ads crashing over top of some of the side is a bit wacky.

Otherwise nice!
April 04, 2007 2:48
Justice...Any ideas on that Google Ads thing? I didn't see that they support just THREE ads, rather than four.
April 04, 2007 2:52
Yup, ö is ö again :)
April 04, 2007 4:37
Very spiffy and nice. Great job on the look.
April 04, 2007 6:08
I first ran into the PNG gamma problems with Safari, and then IE7 made it blatantly obvious to us Microsoft people. Most of the graphic work that I do is in Photoshop, so I've started using SuperPNG to export my PNG files without the meta data from Photoshop instead of using the "Save for Web" option.

Which kinda sucks.
April 04, 2007 9:36

A couple of notes:

The Google ads block is too wide. It's overflowing to the right nav bar and blocking anything under it.

If you paid someone to do the design for you, do you need to mention that the design was used with his permission?
April 04, 2007 9:41

Forgot the mention that I am using FF 2.0. In my IE 6.0, the right nav bar starts after the end of the content.
( IE is blocking Google ads)
April 04, 2007 18:00
Since we're commenting on your new design with this post, I thought I'd post another possibly related issue. Since your redesign, my aggregator requests a username and password each time it attempts to access your feed. I'm using Thunderbird. It doesn't actually keep me from downloading your posts, it's just annoying and locks up the download for all of my subscriptions until I hit the cancel button on the login dialog.

I can't really think it's related to the redesign, that's just when it appeared to start happening.
April 04, 2007 19:12
Scott, your Google ads javascript call is inserting a table 728 pixels wide and that is causing the overrun at slimmer browser widths. The width is hardcoded within the table element so no CSS magic is going to override that value. You could add "overflow:hidden" to your #blog-posts div definition to crop the ad, but hiding ads may violate your Google ads agreement (I have no idea whether it will or will not I don't have ads or the traffic to warrant ads on my site.) You appear to have a "leaderboard" size ad. You may want to swap that out for a skinnier "banner" size ad.
April 04, 2007 21:06
Marty: The only other person who's had a problem like this (it's totally NOT me) had a subscription to "The Data Farm" and that blog had a permissions problem and was sorting next to mine in a list so it looked like it was me. You SURE it's me? I can't see how changing a template is going to throw an HTTP Auth status code...
April 04, 2007 21:08
Abdu - I chose to mention that the design was used by permission because so many folks "rip off" (borrow) designs, I wanted to be "above board" with this thing. It also gives Alexander a nice Google Juice Boost.
April 04, 2007 22:52
FYI - Marty indicated to me in an email that the "password" problem he saw was a different Scott.
April 05, 2007 3:57
The new design is excellent! Alexander absolutely deserved to get paid for creating it!
April 06, 2007 1:58
Also, in Firefox, The search button is dropping down below the first line, expanding the top brown border. You can fix this by adding "display:inline;" to your #slice definition in the "the-right-stuff.css" file.
April 06, 2007 2:24
Oops. AdblockPlus was causing the problem. Nevermind about the search box.
April 06, 2007 2:28
Wow. You fixed that one fast. When I disabled AdblockPlus, the problem went away but you had already made the change and I didn't realize it.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.