When PNG color doesn’t match hex color in IE, smush.it!

I built a site for my cousin’s business. We used PNGs for some of the background images and it looked gorgeous (at least to me).

Then one day she asked me why her site had those weird rectangles. I had no idea what she was talking about, so she showed me on her computer, and sure enough, ugly rectangles surrounded the background images, rather than blending seamlessly into the CSS hex colors:

Ugly rectangles delineate PNG

I noticed she used Internet Explorer, and I had remembered seeing this problem in the past, also on IE… it had something about how the file was exported from Photoshop.

I couldn’t remember what the export settings were, or why it mattered, but rather than tinkering with export flags, I thought of smush.it, an image-shrinking application that leaves image data intact but strips away non-image metadata from files. If the color difference was some flag from Photoshop, maybe smush.it would strip it out.

Sure enough. I ran the PNG through smush.it and saved over the original. When I refreshed the page, it looked perfect. No more ugly rectangles. And best of all I didn’t even have to open Photoshop.

No ugly rectangles

This entry was posted in CSS, Images, Webmastering. Bookmark the permalink.

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