Scott Hanselman

Gamma Correction and Color Correction - PNG is still too hard

April 3, '07 Comments [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%;
}
</style>

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. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Tuesday, April 03, 2007 7:45:09 PM UTC
Is it just me, or the site's loading slower than it was before the redesign?
max
Tuesday, April 03, 2007 8:18:36 PM UTC
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?
Mark
Tuesday, April 03, 2007 8:19:49 PM UTC
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]
Tuesday, April 03, 2007 8:31:24 PM UTC
Site is slow today because of slowdowns at Technorati.

I'll look at some additional speedups I can make...
Tuesday, April 03, 2007 9:01:47 PM UTC
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!).

http://www.csc.calpoly.edu/~bfriesen/software/dropper.shtml

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.
Tuesday, April 03, 2007 9:10:34 PM UTC
I just did some testing on IE6, 7 and FireFox and I'm not seeing it load any slower...it 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.
Tuesday, April 03, 2007 9:26:44 PM UTC
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
Tuesday, April 03, 2007 9:31:51 PM UTC
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.
Tuesday, April 03, 2007 10:08:45 PM UTC
Actually Scott I got a server-side error a few times on loading the site :(

Nice new design though :)
Tuesday, April 03, 2007 10:42:35 PM UTC
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]

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=28293
[2] http://www.mozilla.com/en-US/firefox/
Tuesday, April 03, 2007 10:46:02 PM UTC
Björn, try deleting your cookies for my domain and try again. I think we fixed that cookie problem.
Tuesday, April 03, 2007 10:46:14 PM UTC
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!
Tuesday, April 03, 2007 10:48:10 PM UTC
Justice...Any ideas on that Google Ads thing? I didn't see that they support just THREE ads, rather than four.
Tuesday, April 03, 2007 10:52:21 PM UTC
Yup, ö is ö again :)
Wednesday, April 04, 2007 12:37:18 AM UTC
Very spiffy and nice. Great job on the look.
Wednesday, April 04, 2007 2:08:25 AM UTC
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.
Wednesday, April 04, 2007 5:36:11 AM UTC

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?
Abdu
Wednesday, April 04, 2007 5:41:30 AM UTC

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)
Abdu
Wednesday, April 04, 2007 2:00:10 PM UTC
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.
Marty Thompson
Wednesday, April 04, 2007 3:12:04 PM UTC
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. https://www.google.com/adsense/static/en_US/AdFormats.html
Wednesday, April 04, 2007 5:06:45 PM UTC
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...
Wednesday, April 04, 2007 5:08:06 PM UTC
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.
Wednesday, April 04, 2007 6:52:44 PM UTC
FYI - Marty indicated to me in an email that the "password" problem he saw was a different Scott.
Wednesday, April 04, 2007 11:57:02 PM UTC
The new design is excellent! Alexander absolutely deserved to get paid for creating it!
Thursday, April 05, 2007 9:58:48 PM UTC
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.
Thursday, April 05, 2007 10:24:04 PM UTC
Oops. AdblockPlus was causing the problem. Nevermind about the search box.
Thursday, April 05, 2007 10:28:46 PM UTC
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.