Grow your CSS skills. Land your dream job.

Body css-backgrounds question

  • # May 17, 2008 at 7:53 am

    Hello,
    first of all if this question has been asked before and answered please forgive me and be so kind to point me in the right direction, otherwise please read on.
    There’s some really nice websites out there that use some wonderful body backgrounds (ok at least in my eyes :))
    The graphics are usually jpg’s-large jpg’s!! but they load fast-ok I have a DSL connection but still.
    For example look at http://www.webdesignerwall.com/ the main background image (on the top) width=1390px height=853px and with a file size of 172 KB!
    Or in http://www.darasgarden.com/ width=1350px height=1350px and file size 94 KB!
    So my question is: How is this done? Is there a trick to it?
    Can anyone help?
    Thanks in advance

    # May 17, 2008 at 5:09 pm

    Ah yes. this can be quite confusing and frustrating if you want the same effect. check out this guy too: dannyblackman.com/

    The thing about danny blackman and web designer wall that makes this possible is that the images are vectors. the both were made in illustrator and when you export a jpeg from illustrator the file size is incredibly smaller making larger images possible.

    as for the other site you listed.
    that particular background image is 2 colors. the more colors you have, the bigger the files size. so think of each color having to bring along its baggage of information. if you convert a color photo to grayscale the file size goes down.

    so while the other site is a raster jpeg the colors are very minimal keeping the image down.

    i have a HUGE image on the redesign of my site thats not up yet. you can find the pics in the other forum (digital skraps redesign)

    its actually 5 different texture images 4 brushes and about 3 adjustment layers. but bc theres sooo much "grunge" etc i was able to lower the quality down to around 20% before you could really notice bc its gernally dirty anyway. so the "grain" effect you get when you lower jpeg quality ends up looking like part of the image pretty much.

    then you have sites like http://www.timlahan.com/work.html that aren’t too image heavy in terms of design. so he can afford to have a large jpeg and it not kill his site load time bc there arent that many more images that need to load to complete the design.

    hope that helps.

    # May 17, 2008 at 7:10 pm

    Yes it does.
    I always thought it’s best to keep image file sizes below 40KB. I guess that was what made me wonder when I saw 172KB and that just for that one image (in web designers wall)

    # May 17, 2008 at 7:56 pm

    yeah.. they can get pretty hefty, you just got to figure out if it works for your particular site, and how you can balance it out so it works the way you need.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".