A tricky thing w&#x2F;r&#x2F;t browsers is that they are often really crappy at figuring out what color space a PNG image is supposed to be in. I think they often intentionally strip out the color space info from PNG images for the sake of helping PNG images blend smoothly into CSS &#x2F; Flash &#x2F; etc., for which they also don’t do correct color management. [The CSS spec says that colors should be interpreted as sRGB, but browsers don’t actually follow the spec.]<p>As a result of this problem, it’s difficult to judge whether image resizing specifically is being done incorrectly, or whether the image is just being interpreted incorrectly at any size.<p>You’ll notice if you open your first test image (<a href="http:&#x2F;&#x2F;www.4p8.com&#x2F;eric.brasseur&#x2F;gamma-1.0-or-2.2.png" rel="nofollow">http:&#x2F;&#x2F;www.4p8.com&#x2F;eric.brasseur&#x2F;gamma-1.0-or-2.2.png</a>) in Apple’s Preview app, you get the correct behavior, but this is different from the behavior in Safari, for example, which shows something incorrect at every size. Stranger still, the behavior in Safari is roughly “correct” while resizing a browser window, but as soon as you let go of the mouse, it reverts to being incorrect.<p>There are multiple possible ways to embed color space info into PNG images, and the PNG spec is actually really terrible and confusing on this subject which results in lots of inconsistencies from one implementation to another. If I remember correctly some of them are treated better by browsers than others, but I’m not sure if there’s a way to encode images such that it will be handled properly everywhere (I mean, handled correctly even at 100% size, without any resizing). I’m not an expert on browser image rendering though. cf. e.g. <a href="https:&#x2F;&#x2F;hsivonen.fi&#x2F;png-gamma&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hsivonen.fi&#x2F;png-gamma&#x2F;</a> or for a more general browser color rant cf. <a href="http:&#x2F;&#x2F;regex.info&#x2F;blog&#x2F;photo-tech&#x2F;color-spaces-page1" rel="nofollow">http:&#x2F;&#x2F;regex.info&#x2F;blog&#x2F;photo-tech&#x2F;color-spaces-page1</a><p>* * *<p>One particularly annoying thing about gamma and image rendering is that all font and vector graphics rendering in pretty much all software (Illustrator, Inkscape, Cairo, Quartz, browsers, etc.) is implicitly done (incorrectly) in gamma-encoded space rather than linear space. This causes vector graphics with thin lines to change dramatically in appearance as you scale them up or down, but no implementation is able to fix their behavior and do the right thing because all content (e.g. small text rendering) in that renderer will suddenly look “wrong”.