Hi all,

Im working on a website that has images that rely on transparent backgrounds. The images are currently PNG as i am developing the website, but I dont think I can keep them as PNG can I due to the size.

I have saved the images as jpegs, but then I lose the transparency of the background and it looks incorrect on the site.

COuld someone offer me some advice please?

what graphics editor are you using?
do you have fireworks?

edit: a link to the site would be good so we can see how you're using the images

Originally Posted by davemies

what graphics editor are you using?
do you have fireworks?

edit: a link to the site would be good so we can see how you're using the images

hi, im using fireworks and photshop.

http://www.pandacomputingsolutions.info is the test site its currently on.

thank you
andy

for transparency in images, you've got 2 choices: PNG or GIF.

GIF creates smaller files but has serious drawbacks: it's based on an indexed colour palette to reduce file size, which means complex images display very badly. GIFs do not support alpha channels, and can only have complete transparency or opacity.

PNGs are far superior, they support alpha channels and aren't restricted by as limited an indexed colour palatte. They do, however create larger files.

So why are they too big? If you put a screenshot or link up it'd help with offering more advice.

In fireworks, You can save the files as flattened png.
Click options then and choose 32bit flattened png.

This means the filesize is tiny and preserves transparency

BUT make sure you save a copy of the normal fireworks PNG also ( so you keep your layers etc )

Originally Posted by CraftyPanda

hi, im using fireworks and photshop.

http://www.pandacomputingsolutions.info is the test site its currently on.

thank you
andy

so which is the image you're having problems with? none of them look too big, the site loaded pretty quick

Originally Posted by edgray

so which is the image you're having problems with? none of them look too big, the site loaded pretty quick

to be honest it was more that I realised everything was still png, and i thought that if i carried on the site would load slowly.

Based on the fact that this site is going to be nothing more than html and css, cause thats all i can do, what would you guys say should be the largest image file size I should be uploading to a live site?

you can probably get away with 8-bit png set to a 256 colour palette - and you may need to use 100% dither one the image with the drop shadow.
then you can export as 8-bit png with full alpha transparency (pick alpha in the export palette, under transparency)

lynxus: although a flattened 32 bit png will be smaller than a native fireworks png it will still be pretty large.

edit: yes crafty panda - your images are a bit weighty. the rule of thumb pre-broadband was 50k TOTAL page size (scripts, html, css, images...) now i would aim for say 200k TOTAL page size. there is some room for debate but it would mostly depend on how many of your users might be on slow connections - and if they are is it excruciatingly slow.

try the 8-bit with alpha and see if it works ok.
i'm in Ubuntu at the moment so can't test, but if you have problems i'll switch to windows (and FW) and help from there.

Originally Posted by CraftyPanda

to be honest it was more that I realised everything was still png, and i thought that if i carried on the site would load slowly.

Based on the fact that this site is going to be nothing more than html and css, cause thats all i can do, what would you guys say should be the largest image file size I should be uploading to a live site?

It's difficult to say. I like to try and keep all images under 100kb if possible, but it entirely depends on the site.

If you really need tons of images, consider breaking up your content over multiple pages.

Right now, your site seems fine to me, it loads quick enough and the nature of it is graphical so people will be more inclined to wait for images to load.

you can save quite a lot by using 8-bit - see the images that do work as 8-bit - the main content bg didn't come out smooth enough unfortunately but the ones i did come to a total of 64kb.
http://gekkoweb.com/stuff/8-bitpngs/
and your background repeating slice would be smaller as a jpeg.

as an example - your header that was 197kb is now 14kb

but hey! i just realised that your pngs are all native FW pngs. you should always export, never use FWs native pngs because they contain lots of extra information.

anyhow, the png-8s provide a very significant saving in file-size (and incidentally your bandwidth)

also unless you're using a png fix then ie6 users will get grey backgrounds instead of transparency with png-32m, but using png-8 with alpha they'll get a single level of transparency in IE6 (akin to using gifs)

Originally Posted by davemies

you can save quite a lot by using 8-bit - see the images that do work as 8-bit - the main content bg didn't come out smooth enough unfortunately but the ones i did come to a total of 64kb.
http://gekkoweb.com/stuff/8-bitpngs/
and your background repeating slice would be smaller as a jpeg.

as an example - your header that was 197kb is now 14kb

but hey! i just realised that your pngs are all native FW pngs. you should always export, never use FWs native pngs because they contain lots of extra information.

anyhow, the png-8s provide a very significant saving in file-size (and incidentally your bandwidth)

also unless you're using a png fix then ie6 users will get grey backgrounds instead of transparency with png-32m, but using png-8 with alpha they'll get a single level of transparency in IE6 (akin to using gifs)

That is totally fantasitc, tyvm.
I didnt even know about exporting in FW, as opposed to just saving.

Andy

Personnaly, I use Paint.net to create my PNG logos. It's so easy and you don't need to have a great knowledge of all the graphics insides. However, if you use Photoshop for example, create a transparent layer as background before and then create your image on it.

Originally Posted by theophile

Personnaly, I use Paint.net to create my PNG logos. It's so easy and you don't need to have a great knowledge of all the graphics insides. However, if you use Photoshop for example, create a transparent layer as background before and then create your image on it.

yes... but how does that help the original poster, who altready knows how to make pngs with full transparency?