Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: PNG File Size?

  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts

    PNG File Size?

    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?

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Joseph Witchard View Post
    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

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    And are you sure you can't save it as 8 with alpha transparency?

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts
    http://www.hogwarts-rpg.net/header_banner_2.png

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

  • #5
    New Coder
    Join Date
    Nov 2009
    Location
    Portland Oregon
    Posts
    33
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dougnbr View Post
    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.

  • #7
    New Coder
    Join Date
    Nov 2009
    Location
    Portland Oregon
    Posts
    33
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Joseph Witchard View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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?
    Last edited by Joseph Witchard; 12-10-2009 at 12:24 AM.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    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/
    Last edited by oracleguy; 12-24-2009 at 07:57 PM.

  • #12
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #13
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    stll, best to use an image optimizer for peace of mind
    Daniel Bourne - Sparkbox Website Design

  • #14
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    theres one in fireboog too that works pretty well
    Daniel Bourne - Sparkbox Website Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •