Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Alternative to png images

Options
  • 12-01-2011 11:56pm
    #1
    Wagon
    Closed Accounts Posts: 3,119 ✭✭✭


    Designing a site. Looks well, but the bloody page weight is about 2.5mb. Main reasons for this are the png images. They look great but the size is huge. The real culprit is the background image which is nearly 500kb in itself.

    does anyone know how i can cut that down while maintaining as much visual quality as possible? jpeg doesnt support transparency, gif looks terrible.

    I don't want to get rid of it because it works really well, but if i need to i will.

    any help appreciated.


Comments

  • Options
    #2
    oneofakind32
    Registered Users Posts: 1,304 ✭✭✭oneofakind32


    Make sure your pngs are flattened, this will reduce the size. If you saved them as fireworks pngs (not flattened) they can be quite large.


  • Options
    #3
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    What are the dimensions of the background image ? i.e. is it something that should be tiled or broken into a few component parts ?


  • Options
    #4
    Seth Brundle
    Moderators, Politics Moderators Posts: 39,264 Mod ✭✭✭✭Seth Brundle


    oneofakind32 wrote: »
    Make sure your pngs are flattened, this will reduce the size. If you saved them as fireworks pngs (not flattened) they can be quite large.
    ...but keep a copy of the unflattened images for future editing.


  • Options
    #5
    Wagon
    Closed Accounts Posts: 3,119 ✭✭✭Wagon


    Thanks for the replies lads ;)
    oneofakind32 wrote: »
    Make sure your pngs are flattened, this will reduce the size. If you saved them as fireworks pngs (not flattened) they can be quite large.
    Yeah its fireworks and i didn't flatten the damn things. Should i flatten rollover buttons as well?
    Liam Byrne wrote: »
    What are the dimensions of the background image ? i.e. is it something that should be tiled or broken into a few component parts ?
    No, the image is pretty much set in size. My mate advised me to resize the actual scale of the image. Worked a treat, the genius got it down to 180k. But i think that might be a little too large still.
    kbannon wrote: »
    ...but keep a copy of the unflattened images for future editing.
    Will do.


  • Options
    #6
    pixelburp
    Moderators, Category Moderators, Entertainment Moderators Posts: 36,068 CMod ✭✭✭✭pixelburp


    Why is your BG image a transparent PNG? What's it fading into, a solid colour / gradient? If so why not just save out a JPG with both the BG and the colour behind it.


  • Advertisement
  • Options
    #7
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    Wagon wrote: »
    My mate advised me to resize the actual scale of the image.

    What do you mean? Change the dpi?


  • Options
    #8
    Wagon
    Closed Accounts Posts: 3,119 ✭✭✭Wagon


    pixelburp wrote: »
    Why is your BG image a transparent PNG? What's it fading into, a solid colour / gradient? If so why not just save out a JPG with both the BG and the colour behind it.
    Fades into a gradient. And i tried that too but the quality just goes to ****e. Same with the GIF format :(
    Liam Byrne wrote: »
    What do you mean? Change the dpi?
    When i was making the image, the actual physical width was something like 42cm. It didnt look like that on the screen though. It's a real pain in the arse. Is there any way i can just set default phyical size?


  • Options
    #9
    pixelburp
    Moderators, Category Moderators, Entertainment Moderators Posts: 36,068 CMod ✭✭✭✭pixelburp


    Wagon wrote: »
    Fades into a gradient. And i tried that too but the quality just goes to ****e. Same with the GIF format :(

    When i was making the image, the actual physical width was something like 42cm. It didnt look like that on the screen though. It's a real pain in the arse. Is there any way i can just set default phyical size?

    Any chance you could put a screenshot (without giving too much away?)

    What size are the other images on your site? 2.xMb for a website is quite big whatever way you spin it, I'm sure you can shave off some Kbs from your other assets.


  • Options
    #10
    Placebo
    Registered Users Posts: 8,070 ✭✭✭Placebo


    post the image


  • Options
    #11
    Wagon
    Closed Accounts Posts: 3,119 ✭✭✭Wagon


    As requested, here's a screenshot. I should point out, the image is zoomed out to get as much of the page as possible while still being able to see what's going on. There's more links at the bottom but those are fine, nothing bloated there that i cant fix.


  • Advertisement
  • Options
    #12
    Kavrocks
    Registered Users Posts: 2,345 ✭✭✭Kavrocks


    There is a few more things you could try.

    1. You could try cutting the sides off of the background image and use a CSS3 gradient as the background colour for the , then use your background image for the body of the container of all your content.

    2. You can use a nice tool called smush.it by the people at yahoo. It attempts to compress the size of your images and gives you back an optimised file, I can't remember if it gives you jpeg's or png's. Its a while since I last used it but can't hurt to give it a try. http://www.smu****.com/ysmush.it/


  • Options
    #13
    Wagon
    Closed Accounts Posts: 3,119 ✭✭✭Wagon


    Kavrocks wrote: »
    There is a few more things you could try.

    1. You could try cutting the sides off of the background image and use a CSS3 gradient as the background colour for the , then use your background image for the body of the container of all your content.

    2. You can use a nice tool called smush.it by the people at yahoo. It attempts to compress the size of your images and gives you back an optimised file, I can't remember if it gives you jpeg's or png's. Its a while since I last used it but can't hurt to give it a try. http://www.smu****.com/ysmush.it/
    That works really well with large images actually :) Cheers mate! Very handy.


Advertisement