So my latest website I’m building is a portfolio site for a makeup artist. Cue lots of lovely photos of beautiful models in lovely frocks etc. I promised the designer we could do a slideshow of images behind a custom “scrolly” frame, thinking I’d use CSS absolute positioning to layer the transparent PNG frame over the top of the portfolio jpegs (incidentally being animated using jQuery)
However there have been a few problems with this approach:
The initial solution was to use a png image for the frame – but this appeared a slightly different colour on both IE7 and Safari (but only on the Mac) but fine on all other browsers. This different colour was only a few shades darker but made it stand out against the background colour of the page.
So I ditched the idea of pngs and changed to transparent gifs for the frame.
But this caused even more problems. Gifs don’t take well to being sliced in directions other than horizontal or vertical – they leave horrid jagged pixelly edges. So I had to make an artistic decision (me – a developer too!) to ditch the funky asymetrical hole the designer had wanted to use a more square shape for the frame hole. Which worked for me.
No – designer not happy, so I went back to drawing board to see if I could find the source of the problem with the original Pngs.
The Problem with Pngs is that every browser and platform tries to interpret them differently.
I learnt this from the excellent article here:
Basically when I was doing a “Save For Web…” from Photoshop it was adding in lots of extra info that was making the browsers think too much about how to display that PNG
The solution was to use a command utility called “PNGCrush” which allows you to remove the extra information – which should hopefully allow the processed png to appear more consistently across most browsers (note: I don’t guarantee it will work for you!)
The source code for PNGCrush can be found here:
For people (like me) who don’t know one end of a compiler from another you can download the Windows executable here (albeit a later version):
The moneyshot command you need to execute is:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png
You can see the results in the (still work-in-progress) website here: www.bGorgeousMakeup.com