...

View Full Version : PNG File Size?



Joseph Witchard
12-08-2009, 04:06 AM
So I created a transparent PNG banner for my website. But, the only way I can save it without losing too much image quality is if I save it as 24, and according to Photoshop, it's going to take 81 seconds to load at the speed of 28.8 KBPS. Is this something I should be concerned about? If it is, does anyone have any ideas on what I could do?

oesxyl
12-08-2009, 04:22 AM
So I created a transparent PNG banner for my website. But, the only way I can save it without losing too much image quality is if I save it as 24, and according to Photoshop, it's going to take 81 seconds to load at the speed of 28.8 KBPS. Is this something I should be concerned about? If it is, does anyone have any ideas on what I could do?
post a link somewhere please, if you can.

best regards

Apostropartheid
12-08-2009, 07:57 PM
And are you sure you can't save it as 8 with alpha transparency?

Joseph Witchard
12-09-2009, 02:04 AM
http://www.hogwarts-rpg.net/header_banner_2.png

I'm not sure how to save it like that, actually.

dougnbr
12-09-2009, 02:44 AM
As a jpeg it's about 30k, but you lose the transparency.

Can you break the image into two parts? The upper section is jpeg, and the lower section (the part that needs transparency) as a png.

Very nice image, by the way.

Joseph Witchard
12-09-2009, 04:26 AM
As a jpeg it's about 30k, but you lose the transparency.

Can you break the image into two parts? The upper section is jpeg, and the lower section (the part that needs transparency) as a png.

Very nice image, by the way.

I can't. I meant to say this in my last post, but I'm going to be making the left, right, and top areas transparent as well. That image that I posted is the first draft. And thanks for the compliment:) I didn't make the image, but I added the text and did my best to make the text look somewhat like clouds.

I need it to blend in with a black #000000 background. If I could do that, I wouldn't need the transparency and could save it as a jpg at a much lower file size. But I've tried putting it as a layer over a black background and then using layer masks and gradients to make part of the image layer disappear, but it doesn't look right when added to a black web page.

dougnbr
12-09-2009, 06:27 PM
I've got kind of the same problem you do, a large png file for a header.
http://dougneubauer.com/

Eventually, I'll probably do what you're thinking about, convert the whole thing to a jpg. I'm still working on the final look, and my menu bar overlaps the image, so it's a work in progress.

From an SEO standpoint, the rumor is that Google is going to start penalizing sites that load slowly. I'm not sure if a 250k png header file would qualify as "slowly" though.

_Aerospace_Eng_
12-09-2009, 06:40 PM
I can't. I meant to say this in my last post, but I'm going to be making the left, right, and top areas transparent as well. That image that I posted is the first draft. And thanks for the compliment:) I didn't make the image, but I added the text and did my best to make the text look somewhat like clouds.

I need it to blend in with a black #000000 background. If I could do that, I wouldn't need the transparency and could save it as a jpg at a much lower file size. But I've tried putting it as a layer over a black background and then using layer masks and gradients to make part of the image layer disappear, but it doesn't look right when added to a black web page.
If the background color is a solid black color then adding that color a layer of its own should look fine. If you say it doesn't "look right" and you are testing in IE, then that is the reason. IE displays pngs in a slightly different color due to a gamma correction. I posted some links a few days back that explained what needed to be done to fix the png color issue in IE.

Joseph Witchard
12-09-2009, 11:02 PM
If the background color is a solid black color then adding that color a layer of its own should look fine. If you say it doesn't "look right" and you are testing in IE, then that is the reason. IE displays pngs in a slightly different color due to a gamma correction. I posted some links a few days back that explained what needed to be done to fix the png color issue in IE.

I've been testing in Firefox, actually. I use Firefox for everything until I'm ready to test something in every browser possible.

The steps I'm taking are 1) create a #000000 background of the same size as the image, 2) create a new layer and paste the image onto it, 3) add a layer mask, and 4) use use the black/white gradient tool to add transparency on the mask, revealing the background below. Is there another way I could do it to make it work?

EDIT: I take that back, it seems to work fine now. I don't know WHAT I was doing wrong the other times. While I'm here, how do you save a PNG with Alpha Transparency?

_Aerospace_Eng_
12-10-2009, 01:47 AM
You are already doing that using 24bit for the png. If you do it with 8bit you will lose some quality however now you really don't need to use a png. A jpeg might work okay.

sparkbox
12-24-2009, 04:56 PM
yea, if you use a .jpg then just feather the heading into the colour of the content area and it will look fine and load better,
if your still wanting to use a .png may i suggest
http://tools.dynamicdrive.com/imageoptimizer/

Luneth
01-01-2010, 06:46 PM
Ignore the numbers photoshop gives you on load times, in reality, 250kb is nothing, the general rule of thumb is to have all your images totaling less than 1 MB, it's rather difficult with several transparent PNGs, but it can be managed.

sparkbox
01-03-2010, 09:59 PM
stll, best to use an image optimizer for peace of mind

sparkbox
01-04-2010, 01:27 PM
theres one in fireboog too that works pretty well



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum