smaller 24bit pngs

If you (like me) love the flexibility of what the 24bit with transparency png file format gives, but are depressed by the size that a 24 bit png can balloon to, then this may be of interest… I have been doing some testing / research, based on a few criteria of my own choosing. These being: I needed a full range of transparency, so not like gifs or 8 bit png, I also needed the test file to compress well and finally it needed to work consistency across all modern browsers… Normally the normal 24bit png file can sort of fit the bill except when it comes to size unfortunately they can become… well just giganticus…

So thats was my quest is there some sort of method of compressing the png or was there an alternative file format.
First off I couldn’t find a viable alternative e.g. not flash based, so that brought me back to png’s again… and finally I have found something that seems to work and work consistently from the multiple tests I have done, the conversion seems to strip anything from 50% to 75% of the png size whilst still maintaing full transparency… if you are interested then have a quick look at my tests. but the general gist is I can check adobe or freeway derived originals and they both get squidged down to a remarkably small size. To view the tests just have a quick look at the test page:

http://max-izzat.co.uk/test7/

I hope this is of interest to those who have wished for a smaller png… like me

http://max-izzat.co.uk/test7/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Very impressive Max, maybe a very slight loss of quality, but that might be my eyes. Well worth using.

I seem to remember another member pointed this site out a while ago, but I forgot all about it.

Thanks
Trev

On 12 Sep 2012, at 12:38, max wrote:

If you (like me) love the flexibility of what the 24bit with transparency png file format gives, but are depressed by the size that a 24 bit png can balloon to, then this may be of interest… I have been doing some testing / research, based on a few criteria of my own choosing. These being: I needed a full range of transparency, so not like gifs or 8 bit png, I also needed the test file to compress well and finally it needed to work consistency across all modern browsers… Normally the normal 24bit png file can sort of fit the bill except when it comes to size unfortunately they can become… well just giganticus…

So thats was my quest is there some sort of method of compressing the png or was there an alternative file format.
First off I couldn’t find a viable alternative e.g. not flash based, so that brought me back to png’s again… and finally I have found something that seems to work and work consistently from the multiple tests I have done, the conversion seems to strip anything from 50% to 75% of the png size whilst still maintaing full transparency… if you are interested then have a quick look at my tests. but the general gist is I can check adobe or freeway derived originals and they both get squidged down to a remarkably small size. To view the tests just have a quick look at the test page:

http://max-izzat.co.uk/test7/

http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 12 Sep 2012, at 12:56, Trevor Reaveley wrote:

I seem to remember another member pointed this site out a while ago, but I forgot all about it.

Yes I think it may have been this thread;
http://freewaytalk.net/thread/view/113817#m_113817

Good work on the image comparisons Max.

I wrote a reply to another thread on page bloat (http://freewaytalk.net/thread/view/110297#m_110297) back in May but didn’t send it as I thought it would make a good KB article for the Softpress web site. Sadly that never happened.

Here are my tips (from back in May) on how to squeeze your Freeway sites down to size;

—clip—

There are a number of tip and tricks that you can employ to save a few bytes here and there on your Freeway sites.

Here are some of the tricks I’ve been know to use in the past;

  1. Freeway - set the code output in File > Document Setup > Output > HTML Code to More Efficient
  2. Freeway - set the Resources setting in File > Document Setup > Output > Resources to With HTML Files (this will save at least 9 bytes for every image you use on the page - whoop! Still it all helps.)
  3. WebFast (http://www.freewayactions.com/product.php?id=021) - if your pages use PHP already this simply tells the browser to expect the page in a compressed form
  4. ImageOptim - (http://imageoptim.com) - Once you’ve finished your site this tool can cut image file sizes down still further
  5. ImageAlpha - (http://pngmini.com) - A great little app that will down sample 24bit PNGs to 8bits
  6. TinyPNG - (http://tinypng.org) - An online version of ImageOptim and ImageAlpha that creates compressed 8-bit PNGs
  7. Externalize - (http://www.freewayactions.com/test/externalize) - Although this Action can compress your CSS styles it may not help in loading times as the page will need to load the external stylesheet

—clip—

Regards,
Tim.

Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

aaahhhaaa I hadn’t realised it had been reported before… but anyways its good to see other people are thinking the same sort of thing… which is how to get that site down in size

thanks for posting the tips Tim
all the best max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you Max. Excellent. But it wont work if one has a slight shadow around an object, right?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah… found it out. You drop shadows in FWP.
In this case it works very well.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Tom, if the soft shadow is there in the transparent BG png file, it will output just as you see it also - so 2 ways of having the drop shadow.

Trev

On 13 Sep 2012, at 11:17, TomP wrote:

Ah… found it out. You drop shadows in FWP.
In this case it works very well.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Tom and Trev
What tinypng does is compress the png in a few different ways but it doesnt lose the transparency. so technically if the png has a drop shadow as per my example iPhones then yes it will keep the drop shadow… as Trev has pointed out it converts whats already there
kind regards max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options