Results 1 to 10 of 10
  1. #1
    Join Date
    Jan 2004
    Posts
    1,769

    Question 55K .jpg header graphic, should I slice into 2 pieces?

    OK you graphic gurus, I have a rather large (55K .jpg) header graphic, so....

    Should I slice into 2 pieces? Will that help it to load faster?

    Does it even matter?

    Any tips or tricks?

  2. #2
    55k isn't too bad. Generally my headers are 35-70k. I'll split em up sometimes when they get over 40-50 but there really isn't a rule for that (this is just the way I do it) - it just depends on your visitors and your preference.

    Take a look at who your customers (visitors) are and decide. For example, one of my sites is a gaming site. The game is an online game, and most people (95%+) are using a high speed connection to play it. On that site, I don't worry too much about image size because I know they are loading it just fine.
    Something witty here...

  3. #3
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    707
    Just make sure your images have their width and height attributes applied. That way, the browser can get on with loading the rest of the page because it knows the dimension of the image (and can put it in once the content has loaded). If you don't put in the dimensions, there'll be more of a wait.
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  4. #4
    Join Date
    Jan 2004
    Posts
    1,769
    PlaneWalker & Zopester, thank you very much for your advice!

    Zopester, can you tell me how to check if my images have their width and height attributes applied?

    Thanks again.

  5. #5
    Join Date
    Feb 2004
    Location
    Phoenix, AZ
    Posts
    162
    If there's any difference in loading time it's only going to slow down a tiny bit. Each image piece creates a new request, and each has it's own image header info. You really only need to split it if there's some layout requirement forcing it.

    I think 55k is pushing it, but since it gets cached for displaying on other pages, it may be ok. I'd try inching down the jpg quality setting before splitting it.

    If your image has large areas that can benefit from higher compression, you can also split your image and apply different compression quality to each in order to reduce the total size. Not common, but also a possibility.
    bigwrench

  6. #6
    Join Date
    Oct 2002
    Location
    /roof/ledge
    Posts
    28,088
    That seems pretty large for just the header graphic. I try to keep entire pages below 60-75K. On a current design I'm building, I have 3 header graphics, a nav bar with 9 slices, two inner page graphics and about 50 words..about 61K. On another page (same design), several hundred words but no 'inner' graphics, just 63K.

    Maybe you can do better with the compression?

  7. #7
    Originally posted by Gen-T

    Zopester, can you tell me how to check if my images have their width and height attributes applied?

    Thanks again. [/B]
    If you havent figured it yet...

    The HEIGHT and WIDTH image attributes that Zopester refered to is not of the image but the Image tag of HTML.

    <IMG SRC="header.gif" height="780" width ="60">

    Doing so will allow the browser to leave a blank spot for the image when the page first loads then fill in the graphic later. Without WIDTH and HEIGHT included, the browser must load the entire graphic before moving on to the rest of the page. The effect of including these attributes along with all the images on your page is that the text of the page loads first, then the images come after. Consequently, viewers can read the text on a page while the images load, making the wait time a little easier.

  8. #8
    Join Date
    Mar 2004
    Posts
    407
    i do not think you need to cut your image. just always make things small as possible.
    Alvin

  9. #9
    Join Date
    Jan 2002
    Location
    Charlotte, NC
    Posts
    528
    Bigwrench is correct. If you have large areas of "lesser detail" that you can afford to really drop the resolution on, then slicing and optimizing them individually may help you lower your total size, however, otherwise, it's not going to do a lot of good to slice it for the sake of slicing.

    Jason
    http://www.charlottezweb.com
    HOSTING your livelihood

  10. #10
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    707
    Quote Originally Posted by cenvo
    The HEIGHT and WIDTH image attributes that Zopester refered to is not of the image but the Image tag of HTML.

    <IMG SRC="header.gif" height="780" width ="60">
    What cenvo said with one minor addition for completion's sake:

    If you're using XHTML (as opposed to plain ol' HTML) you need to use:

    <img src="header.gif" height="780" width ="60" alt="My Header" />

    Note lower case, and the closing slash. Also you should get into the habit of using the alt attribute. Just good practice, and makes your images make sense to screenreaders (like Google!)
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

Posting Permissions

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