Results 1 to 10 of 10
-
03-22-2004, 07:23 AM #1Disabled
- Join Date
- Jan 2004
- Posts
- 1,769
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?
-
03-22-2004, 12:01 PM #2Web Hosting Guru
- Join Date
- Mar 2004
- Posts
- 287
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...
-
03-22-2004, 12:04 PM #3Web Hosting Master
- 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.
-
03-22-2004, 12:40 PM #4Disabled
- 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.
-
03-22-2004, 12:48 PM #5WHT Addict
- 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
-
03-22-2004, 01:03 PM #6
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?
-
03-22-2004, 05:07 PM #7Junior Guru Wannabe
- Join Date
- Feb 2004
- Posts
- 46
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]
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.
-
03-22-2004, 05:17 PM #8Aspiring Evangelist
- Join Date
- Mar 2004
- Posts
- 407
i do not think you need to cut your image. just always make things small as possible.
Alvin
-
03-22-2004, 06:29 PM #9Web Hosting Evangelist
- 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.
Jasonhttp://www.charlottezweb.com
HOSTING your livelihood
-
03-22-2004, 07:14 PM #10Web Hosting Master
- Join Date
- Jan 2003
- Location
- Houston, TX - Originally from UK
- Posts
- 707
Originally Posted by cenvo
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!)