Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Optimising Background Images for a Website

Discussion in 'Website Design Forum:' started by TomB, Dec 11, 2008.

  1. TomB

    TomB Junior Member

    Evening All,

    How is everyone, hope you are all doing well in the run up to xmas.

    Ok i was wondering, I need some help with optimising graphics for a website.

    I am currently working on a website and its heavy on the graphics, with a big background, a heavy header containing photos and a lot of general, OMG

    Any advice on optimising the graphics in photoshop to keep the file sizes down. (I didn't design it).

    Any thoughts much appreciated.

    Cheers

    T
     
  2. blueocto

    blueocto Senior Member

    Try "Save for Web" from the File menu; and try different file formats and optimisation.
    It doubles-up the window so you can compare the original image and file size, to the new ptimised one.
     
  3. Aarlev

    Aarlev Member

    Save everything without photos as Gifs and everything with photos as Jpegs. You can reduce the quality of the Jpegs in "Save for web" down to 60-70 sometimes without noticing a difference in quality but the filesize decreases significantly.
     
  4. TomB

    TomB Junior Member

    Hi all,

    I am using the save for web to export the slices and have been using gif for non-photos.

    Problem i am having is that the background is so big and comes out at about 647kb at quality of 50

    SO i just wondered if there were any others ways to reduce it.

    Its kind of like the background on the web designers wall, the background they have is huge but they have it down to 127kb

    I might have to think about splitting it up into sections or something.

    Thanks all.

    T
     
  5. Greg

    Greg Active Member

    Hey Tom,

    The background on Web Designer Wall is 172Kb, but yeah see what you're saying... I think the reason they have a low file size is that there's relatively few colours, ie compared to a hi-res photograph, and because of the soft colours and the style a slightly lower resolution doesn't notice as much. What images have been used in the background of this design? Does it include detailed/complex photos/imagery?

    (This is the WDW image we're talking about for anyone interested - http://www.webdesignerwall.com/wp-content/themes/wdw/images/main-bg.jpg)

    Thanks,
    Greg
     
  6. Jazajay

    Jazajay Active Member

    TBH all images should be in png format.

    Png8 images offer alpha transparancy, which ok is not as great as Gif transparancy still works in IE6 with no grey background.

    Now before people go on the almighty saying that png images give you massive files.

    Your wrong png32 images will give you massive images.

    On fireworks, save it as png8 in the optimization window.

    Click file and click export, export it to the same place you have the current image, click yes to overright. Bobs your uncle, that 500k image is now an amazing 127k.

    64k image could be down to as low as 8-15k.

    But when you close it down it will say do you want to save the image, click no, if you click yes it overrights the png8 image back into png32 format giving you the massive image again.

    Png8 images though do lose thier layers so you may want to save a _backup.png image to make any changes to in png32 format.

    Don't use fireworks, then there is an image optimzation tool around that is free to download, has problems working in vista but will still work.

    Jaz
     
  7. blueocto

    blueocto Senior Member

    I'm all for png myself, but got grief for suggesting it off the 'real webbies' lol

    I wouldn't be too overly concerned about filesize, in the way they used to consider it. I bet there are increasingly more people on broadband internet these days, than the good old 56k connections...
     
  8. Jazajay

    Jazajay Active Member

    Yeah that is true, I'm still running on a 2gig though, between 2 computers, so it can be a bit annoying, I have so got to go with that Sky £5/month 8gig thing but hay.

    But the main reason you want to shorten images TBH is for bandwidth.

    Bandwidth is what your allocated by your web host to download, pages/images/scripts etc... to your visitors. The smaller the files are the more bandwidth you have left to use.

    Which can mean that you save money in having to pay for a smaller bandwidth allotment.
     
  9. blueocto

    blueocto Senior Member

    Yeah good point, hadn't considered that tbh.
    Probably because I'm on unlimited at work and home *evil laugh*
     
  10. Greg

    Greg Active Member

    Yep nothing worse than opening up your site in a browser and seeing the dreaded...
    Bandwidth Limit Exceeded

    (Guessed you was referring to bandwidth on the hosting side as well as on the user side)
     
  11. Jazajay

    Jazajay Active Member

    Yeah totally :D
     
  12. eddypeck

    eddypeck Member

    This might not be a suitable solution for your image, but thought I'd mention it anyway...

    ...you can usually take a lot of the unimportant detail out of a photo in Photoshop to save file size, it can also enhance the focal point of the image.

    Jpeg compression is all about changes in pixels, two pixels - one black, one white will be larger than two grey pixels, by softening an image (where you can) you even out the transition between one pixel and the next and therefore save file size.

    I used to work on a music news website, we often had large paparatzi shots on the homepage.
    Imagine Posh and Becs walking in front of brick walled building in Savile Row at night, caught by a pap. All that brick work and mortar joints will create a lot of pixel changes, by selecting the background area of a photo, feather the edge then blur, needent be by much, but by softening the pixels, that's less colour information for the jpeg to hold.

    Using dust and scratches can be good too, say they're both wearing black full length coats, you can magic wand, feather edge and apply dust and scratches on the large espanse of black, you won't remove anything that's going to effect the end users experience but you will remove vital pixels.

    I also used to use this on large areas of skin for close up shots, cheeks, forhead and chin, (obivoulsy leave detail in eyes, nose mouth) but with an area selected, feather the edge then apply again a small level of dust and scratches. If you go mad you create plastic people, but a little bit helps. The benefit also where the celebs were concerned was you're removing their blemishes, even though this was a by-product not the vain intention!
     
  13. warrengroom

    warrengroom Junior Member

    Good good post Tim,

    Mental note made here :)
     
  14. TomB

    TomB Junior Member

    Hey all,

    Some interesting posts, thanks for everyones suggestions.

    So after much debating and tearing hair out not to mention quite a few late nights. I had to make a decision as there was a tight deadline for the 22nd of decemember

    so I managed to split the background into three sections. A header image, a content background and a footer background and it seems to work ok.

    The main problem was the amount of images used in the site as it is very image heavy.

    So the site got finished in time. not as elegantly coded as I would have like.

    So i have a little work to go back and complete like images sprites etc.

    but have a look, Wildpacks Summercamps USA - Welcome

    To add as well, i didn't do that graphic design work on the site, i only built the site between the two of us we planned the layout etc but she did all the creative wow and I can't take credit for that.

    Let me know what you think, but be gentle, its still early!

    T
     

Share This Page