Serious Web Design with PNG

by mars on 2007-05-30 2 Comments
filed in Work with tags ,

Want to try implementing a design with PNG graphics?

The glaring problem of PNG images is synchronizing color appearance with GIF/JPEG images & CSS colors. This is a well documented problem.

PNG vs JPEG/GIF color problems can be avoided by using PNG for all of the graphics in a site that must perfectly match.

Otherwise, the best path to PNG bliss is a shell command tool that strips out all that advanced color/gamma data (since it confuses different browsers in different ways) and tries each of the 130+ compression modes to find the most efficient one.

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB -brute infile.png outfile.png

Get it at the pngcrush development site or as I did (for Mac OS X) via Darwin Ports.

2 Responses to “Serious Web Design with PNG”

Hoyhoy commented
2007-07-15 at 10:48 AM
How do you feel about CSS sprites?
Mars commented
2007-07-15 at 10:48 AM
CSS Sprites make rollovers (:hovers) that work without behavioral scripting (Javascript). I learned the technique from the Google #1 [A List Apart article](http://alistapart.com/articles/sprites) . I'm in love with the technique and use it anytime clients demand especially snazzy graphic navigation.

Leave a Reply

Markdown is in effect.



Everything is here.