All Hail the Mighty PNGCRUSH

Among other things, I develop games for Flashbang Science. Earlier this week, I posted an update to our first game, Tubes.

Tubes

Tubes is Flash-based (written using the Flex SDK), but from very early on we wanted it to appear to integrate seamlessly with the web page in which it is embedded. This was fairly straightforwardly accomplished via CSS positioning and cutting the graphics to match.

But there was a problem under Safari for Windows, as well as both Safari and Google Chrome for OS X: the browser appeared to render the PNG (Portable Network Graphics) images on the page with less contrast than Flash rendered its graphics (which were cut from the same source, using the same tools, etc.), subtly but unmistakeably breaking the illusion of seamlessness.

After much searching, the solution was to use pngcrush to remove the gamma information, embedded ICC profile, and other ancillary colour information from the PNG images which surrounded the game on the page, as follows:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB input.png output.png

The above may seem self-evident to designers and others who spend a lot of time working with images on the Web, but this is the post for which I was looking when I searched for safari webkit flash colour difference.

Advertisements

0 Responses to “All Hail the Mighty PNGCRUSH”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: