Reducing PNG image file size

John_Mc

I'm working on a website and its design requires extensive use of transparency if it's to look right. The only image format that I've been able to get working to a reasonably good standard is PNG 24. The result is that the image is too big and my page size is running at about 2mb.

If I try GIF or PNG 8 the transparency is displayed as white. Is there anything I can do to fix this or reduce the PNG 24 image size?

Many thanks,
John

The Gibmiester

Are you using Photoshop? If so use the Save for Web & Devices option. Select the PNG 24 preset, that should reduce the size without compromising quality too much.

John_Mc

Hi, thanks for the reply.

Yeah that's the way I'm already doing it, and some of the images are 500kb-700kb. If I use any other preset, the transparency is either removed entirely, or presented in such a way that it's very obvious.

The Gibmiester

What are the image dimensions? Can you post an example image?

site designer

PNG's compression loves solid colours and smooth gradients. I once had a background for a form, it was about 150*500 and about 60k, stuck a noise grain on and that shot up to 500k, so jpg was handy there.

having said that if you need png's transparency there is little that you can do, bar use gif, which however uses similar lossless compression so although smaller, it will be relativley big for the same reason you png's are.

Placebo

gif isnt so great for gradients etc i find. Even transparency a times.


Your best bet is to slice up the image, and perhaps for the transparency parts use png 24 and the rest maybe try jpeg, obviously keeping the quality seamless.

there is a detailed smashing magazine article which tells u how to actually layer images [divs with images] to reduce file size, as mentioned above one layer would be transparent png other jpg etc

John_Mc

Thanks for the replies guys, here is an image which is 1280x285 and 524kb in size. All of the images I need to scale down are background images.

I see if I can cut them into sections that require transparency and sections that don't. Even if I do, I don't know how I can work it as they are for the background so stacking them won't be easy.

site designer

ah ye, you see its the grain running through it which is giving the high file size.

and gif would be useless here as it only offers a 1 colour on/off transparency as opposed to an entire channel of transparency (256).

what I'd suggest is making it a pattern repeated in the y direction, make the file 50px wide. then for the white glow in the middle, overlay another png in the middle which consists of a white globe with transparent gradient.
it would certainly be less then 100k total, also the advantage of having it repeat for monitors more than 1280 wide.

theres plenty of tutorials for making patterens in photoshop, you basically have to go into filters>other>offset, (by 25px if image size is 50) then blend the middle with a clone tool etc.

greyed

Came to ask 2 questions and there were new threads on both :P dont mean to hijack, sorry.

I have a similar problem. I have a flash animation that is over 4mb in size, its image heavy as it was rendered out of swift 3d, about 250 frames. I looked into changing the compression settings in flash for the images in the symbol to decrease the file size. I changed them to png from jpeg and it reported a 90% reduction which was great, but when I exported the file jumped to 20mb!

I am clearly doing something wrong, can I not compress them this way? I can export the images from swift in whatever format, should I use PSs save for web and somehow create a new symbol with those images?

I have managed to half the size to 2mb using an optimiser but this is still too large is it not? What is the average? My googling has found only old forum threads, it strikes me this might have changed since 2003.

Could really use some help, cheers!

site designer

right, well what it seems like there is swift 3d is making an image for each frame, which is not the way to go about flash video.

export your file from swift 3d as a avi, then download a avi to swf converter, you'll be able to set your compression rate then, I've done it before, and there are such programs that exist.

greyed

Ah, nice one, cheers! I will try this and report back

hellbent

Photoshop is pretty useless with PNG's, IMO.
If you can get your hands on FIREWORKS CS-any version I'd say would do it.
Change the PNG type to PNG8, select Alpha Transparency and the file is immediately down to 166 Kb. If you can afford to reduce the number of colours from the maximum 256 to 128 or 64, you'll get an even smaller file.
You then 'Export' it as a PNG (Ctrl+Shift+R).
Hope this helps and that you can get hold of Fireworks.

greyed

site designer wrote: »

right, well what it seems like there is swift 3d is making an image for each frame, which is not the way to go about flash video.

export your file from swift 3d as a avi, then download a avi to swf converter, you'll be able to set your compression rate then, I've done it before, and there are such programs that exist.

That seems to be a significantly better way of doing things :P thanks! Can I ask you to recommend a program though? I downloaded a freeware version with 3 compression settings, was great, but resizes the output file to three set sizes(screen dimensions) and adds borders if it doesnt conform, is there a more customisable one? Free preferably, but if its cheap I guess I can fork out. Super C can output flash, but I have no idea how to switch it from flv to swf.

It came out about 600k, is this an acceptable size?

Freemancon

I won't add too much to the conversation (Mostly Great Advice) but here is a good compression tool - opensource as well. I am adding a post on our website later to show how to install it properly in Windows 7, will post it here later today.

Best part of PNG Crush is that you don't lose any quality. It compresses without loss of clarity or dimensions

Here is the link

Installing PNG Crush on Windows 7

site designer

greyed wrote: »

That seems to be a significantly better way of doing things :P thanks! Can I ask you to recommend a program though? I downloaded a freeware version with 3 compression settings, was great, but resizes the output file to three set sizes(screen dimensions) and adds borders if it doesnt conform, is there a more customisable one? Free preferably, but if its cheap I guess I can fork out. Super C can output flash, but I have no idea how to switch it from flv to swf.

It came out about 600k, is this an acceptable size?

hmm, I cant actually remember a name, its been so long and i cant find it installed, but theres a few out there alright so keep trying, if its flv and u want it to swf, I think its just a matter of importing the flv to the stage, I may be wrong on that though.

600KB would be acceptable, its about 10 seconds of a youtube video

greyed

site designer wrote: »

hmm, I cant actually remember a name, its been so long and i cant find it installed, but theres a few out there alright so keep trying, if its flv and u want it to swf, I think its just a matter of importing the flv to the stage, I may be wrong on that though.

600KB would be acceptable, its about 10 seconds of a youtube video

Ok, great, cheers! Can I ask though, Im having a problem importing the converted avi into flash. If I drag the symbol to stage there is nothing there, if I open the symbol its nothing but empty keyframes, it doesnt appear even when exported. How do I use the converted avis in flash?

seithon

My copy of Photoshop lets me save in png-8 with transparency (I think?) Maybe try that out too ?:)