PNG was a file format that, among the original reasons for conception, was created to show the same color over different computers, with different OS's, and browsers.  To this end, gamma, or lighting, correction was added.  While solving the original problem, a new, bigger, badder problem was created.  Now, there was the potential for color inconsistencies on the SAME web page.  For example, the color of certain items rendered on the page with the same hex value will display differently than PNGs rendered on the page painted with the same hex value.



It seems improbable that such a disgusting problem would have been conceived in a fairly new image file format.  But, the story is well-known:

* Chronicled in the [The Sad Story of PNG Gamma 'Correction'](https://hsivonen.iki.fi/png-gamma/)
* Gamma channel vs. browser [comparison](https://morris-photographics.com/photoshop/articles/png-gamma.html)
* Gamma correction [test page](https://www.libpng.org/pub/png/png-gammatest.html)

In my personal experience, I have been bitten by this little bugger.  As I was creating new graphics for my blog, I created a couple different images and saved them as PNGs.  Like any good web developer, I dev'ed this in Firefox and look at nothing else.  :)  My dad, one of the 4 people who frequent my blog reported some oddities in the look and feel, and sure enough, there they were:

Firefox 3.6

![image](https://lh3.ggpht.com/_5XZCKcD6--c/TB-aAhshi0I/AAAAAAAAM1s/XCrVWdh1Gsw/s400/aj4-ff.jpg)

Internet Explorer 8

![image](https://lh3.ggpht.com/_5XZCKcD6--c/TB-aAiB55JI/AAAAAAAAM1w/dxNlbywz5m0/s400/aj4-ie8.jpg)

After stumbling across the above Morris Photographics link, I tried the referenced [pngcrush](https://pmt.sourceforge.net/pngcrush/) utility, which was easily available via aptitude:

```bash
sudo apt-get install pngcrush
```

From "The Sad Story", supposedly "There is no way of making PNG images that match CSS colors in all  PNG-supporting browsers."  But, when looking at the Morris Photographics comparison chart, it seemed that when the gAMA chunk was removed, all listed browsers correctly displayed the PNG.  I tried a:

```bash
pngcrush -rem gAMA infile.png outfile.png
```

And it worked like a dream.  Now, my parents can see the blog in its splendor, free from discolored boxes.  Bam!  Now think about that.

PNG was a file format that, among the original reasons for conception, was created to show the same color over different computers, with different OS's, and

PNG Gamma Correction Woes

Sometimes bland text on a webpage needs a little spicing up with an image.  Instead of having to mess with markup, this text can be replaced with an image.  Plus, the remaining text in the markup allows for better screen-reader access.  There is a fair amount of discussion on the best way to do this.  One of the ways that I've found works pretty well for me is what is known as the <a href="http://stopdesign.com/archive/2003/03/07/replace-text.html#notes">Leahy/Langridge Image Replacement (LIR)</a>



Set the height attribute to 0, set overflow to hidden, and set the padding-top to the height of the image.  In an example of my code, this is how it looks:

```css
<style type="text/css">
.title {
   height: 0px;
   overflow: hidden;
   padding-top: 150px;
   width: 400px;
   background: center no-repeat url(title.jpg);
}
</style>
```

And the markup:

```html
<h1 class="title">
   AprilandJake.com
</h1>
```

Sometimes bland text on a webpage needs a little spicing up with an image.  Instead of having to mess with markup, this text can be replaced with an image.