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:
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.