Kinetic Pulse
  • Home
  • Services
  • Portfolio
  • Blog
  • Terms
  • Contact

Painful PNGs

February 20, 2010

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:
http://morris-photographics.com/photoshop/articles/png-gamma.html

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:
http://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.7/pngcrush-1.7.7.zip/download

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):
http://wareseeker.com/download/pngcrush-1.6.4.rar/356317

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

Share

Facebook Google+ Twitter Pinterest Email

Back to Blog

Testimonials

Amazing and brilliant, Kinetic Pulse have lifted a dream to reality, Highly recommended and great if you are total novice, they know their stuff…Thanks again
Annie LindridgeSalt Yourself Out
Thank you guys so much for all that you’ve done helping us to create a really awesome website!! We get such great feedback – everyone loves it & we couldn’t be prouder! Look forward to working with you again soon!
Wild Thyme PlantsWild Thyme Plants
It’s been fab working with you – we love the site and certainly going to recommend you!
James DaviesThirty Eight Degrees North
I like it.  I like it a lot !!!

 You have interpreted what I wanted to achieve perfectly considering what you have to play with i.e not redoing the whole thing in the process.

Fiona Simmons-MooreSouth Gloucestershire Parents & Carers
Thanks so much for all your work on this, really appreciated. It’s come on in leaps and bounds since you took over.
Pete KewRedwood Strip Curtains
Thank you for all of your hard work its looks fab and I am over the moon with it!
Amanda MercerAmanda Mercer Ceramics
Absolutely fantastically professional web developer – I would highly recommend!!! Thank you so much Kinetic Pulse!
Tania MarstonDoris Designs

Twitter

@HMRCcustomers Will do - thanks for the swift response

Last year from Kinetic Pulse's Twitter

@HMRCcustomers I've submitted Self Assessment repayment requests multiple times over the past 6 months (always waiting 4 weeks between) and never has anything happened. There seems to be no way of tracking or chasing them either. Now, of all times, this is important

Last year from Kinetic Pulse's Twitter

Apologies to all clients who have had website issues today. There was a major outage for our hosting company @cloudabove but, as always, they have been fantastically open and transparent about what's going on and are working hard to restore service.

About a year ago from Kinetic Pulse's Twitter

@thegrapesbath @bathdrummer Thanks - looking forward to opening night!

About 2 years ago from Kinetic Pulse's Twitter

woobox.com/tjkbms/k1orue

About 3 years ago from Kinetic Pulse's Twitter

Copyright 2021 Kinetic Pulse