SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS image positioning & optimization

    I've got a site I am developing that is throwing me a few curve balls. I do not know best practices for optimization, and I have a few layout images which are rather large (538k) which I cut into 6 smaller images to help with loading the asset, but even those smaller .png (transparency needed) are a good (50k-100k) making load times difficult still. And of course, while I am writing this, I read an article which says that image slicing is a bad practice anyways (nothing more than an illusion of quicker loads). Secondly, I am placing them with a position:absolute because I need them to remain dead center of the page with other assets in various locations as well no matter the resolution or browser window size. I am using ugly negative margins, but I have no idea how to make it better. I am considering using sprites, but what is the max image for these sprites that can be used without defeating the purpose of sprites? What is a more optimal, and standardized, approach to positioning my elements in the way I am trying to make them cross-browser, cross-resolution? I would post links, but spam protection is blocking them.

    Ya'lls spam protection.... bah. Check out the source at wowrealms org, and thanks ahead of time for your help.

    HTML Code:
    body, html {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	height: 100%; 
    	max-height: 100%;
    	background: url('/img/background.jpg') fixed no-repeat 50% 35%;
    
    }
    
    #logo {
    	position: absolute;
    	width: 282px;
    	height: 146px;
    	top: 23px;
    	left: 50%;
    	margin-left: -282px;
    	background: url('/img/logo1.gif') no-repeat;
    	z-index: 5;
    }
    
    .logo {
    	position: absolute;
    	width: 282px;
    	height: 146px;
    	top: 23px;
    	left: 50%;
    	margin-left: -282px;
    	background: url('/img/logo2.png') no-repeat;
    	z-index: 4;
    }
    
    #alliance {
    	position: absolute;
    	left: 0;
    	bottom: 0;
    	width: 481px;
    	height: 510px;
    }
    	.alliance1 {
    	}
    	.alliance2 {
    	}
    	.alliance3 {
    	}
    	.alliance4 {
    	}
    	.alliance5 {
    	}
    	.alliance6 {
    	}
    
    #horde {
    	position: absolute;
    	right: 0;
    	bottom: 0;
    	width: 411px;
    	height: 490px;
    }
    	.horde1 {
    	}
    	.horde2 {
    	}
    	.horde3 {
    	}
    	.horde4 {
    	}
    	.horde5 {
    	}
    	.horde6 {
    	}
    
    #map {
    	position: absolute;
    	width: 650px;
    	height: 433px;
    	top: 80px;
    	left: 50%;
    	margin-left: -317px;
    }
    	.map1 {
    	position: relative;
    	top: 0;
    	left: 0;
    	width: 211px;
    	height: 216px;
    	background: url('/img/map1.png') no-repeat;
    	}
    	.map2 {
    	position: relative;
    	top: -216px;
    	left: 211px;
    	width: 211px;
    	height: 216px;
    	background: url('/img/map2.png') no-repeat;
    	}
    	.map3 {
    	position: relative;
    	top: -432px;
    	left: 422px;
    	width: 211px;
    	height: 216px;
    	background: url('/img/map3.png') no-repeat;
    	}
    	.map4 {
    	position: relative;
    	top: -432px;
    	left: 0;
    	width: 211px;
    	height: 216px;
    	background: url('/img/map4.png') no-repeat;
    	}
    	.map5 {
    	position: relative;
    	top: -648px;
    	left: 211px;
    	width: 212px;
    	height: 216px;
    	background: url('/img/map5.png') no-repeat;
    	}
    	.map6 {
    	position: relative;
    	top: -864px;
    	left: 422px;
    	width: 211px;
    	height: 216px;
    	background: url('/img/map6.png') no-repeat;
    	}
    
    * html body {
    	padding: 0 150px 0 200px;
    }
    
    * html #map {
    	height: 100%;
    	width: 100%;
    }

  2. #2
    SitePoint Zealot Mattinblack's Avatar
    Join Date
    May 2009
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use Gif. Lower file sizes and transparency.

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That healp tremendously, I was able to get 20-50k images to 1-5k size. Thanks whole bunches kind sir.... now about that positioning approach!

  4. #4
    SitePoint Zealot Mattinblack's Avatar
    Join Date
    May 2009
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wrap a container div with a set width around the whole lot, set it at margin auto (that will center it) then use position relative for everything within the container. Then it will be browser width independant. See content box positioning tutorial for more ideas.

  5. #5
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I'd identify the map structure a little differently.

    HTML Code:
    <div id="map">
        <div id='map_row_1' class="map_row">
            <div class="map_col_1"></div>
            <div class="map_col_2"></div>
            <div class="map_col_3"></div>
            <div class="map_col_4"></div>
            <div class="map_col_5"></div>
            <div class="map_col_6"></div>
        </div>
        <div id='map_row_2' class="map_row">
            <div class="map_col_1"></div>
            <div class="map_col_2"></div>
            <div class="map_col_3"></div>
            <div class="map_col_4"></div>
            <div class="map_col_5"></div>
            <div class="map_col_6"></div>
        </div>
    // More rows
    </div>
    This structure allows for more generalized CSS code, selections of the map by entire row or column, and selection by specific cells.

    With this, you can apply 3 lines of CSS to achieve a nice centered table-like layout before applying images to anything.

    Code:
    /* Select the Map*/
    #map { display:table; margin: 0 auto;}
    
    /* Select All Rows*/
    #map .map_row { display:table-row;}
    
    /* Select All Cells*/
    #map .map_row div{ height: 72px; width:79px; display:table-cell;}
    
    /* Select a given Row */
    #map_row_2 {}
    
        /*All Cells in a given Row*/
        #map_row_2 div {}
    
    /* Select all cells in a given column */
    .map_col_4 {}
    
    /*Select a given cell*/
    #map_row_2 .map_col_4 {}
    Keep in mind, images in the same column need to be the same width, and images in the same row need to be the same height, but all the columns and rows need not be the same.
    ie. Assuming row 2 was a little taller, you could adjust it as a whole (instead of changing each cell individually) with the #map_row_2 div selector.
    Last edited by Zarin Denatrose; Jun 26, 2009 at 09:20.

  6. #6
    SitePoint Enthusiast nrg_alpha's Avatar
    Join Date
    Dec 2008
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    roottoor, I checked out your site. Man, you have a lot of graphics that could be loaded as a single graphic.

    Take that map for instance. I'm not sure how many pieces you are using to make that image, but understand that for every unique image on the page you have (and this goes for everything from external css to scripts, etc..), this requires an http request / response header (communication between browser and server). This makes sites not only slower, but heavier in image memory. Many people believe that using multiple smaller images is faster than one larger one...

    I recommend you look at Yahoo's best practices to learn how you make things more efficient. If you must resort to multiple images chunks, you can have a look at css sprite sheets (although in your case, I wouldn't use css sprites.. just single larger images).

    Additionally, a really cool image optimization tool is called Smush.it!, which is now part of Yahoo's Yslow extension for firebug on Firefox. So if you are using Firefox 3.0.11, you can first install firebug, then Yslow, then visit your site, and activate yslow from the bottom of the screen. Then go to the tools tab, and click on all smush.it! Your home page in my test can shave ~17.79 KB off of images.

    Something worth considering. At the end of the day, more smaller graphics that are nice and optimized are not only heavier in memory than a single equivalent graphic that is also very optimized, but it also is more costly in http headers.

  7. #7
    SitePoint Guru
    Join Date
    Sep 2004
    Posts
    613
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reducing your image count will increase the number of http requests thus hurting your load time in that area. Use image sprites if they're not being repeated as background images.

  8. #8
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your suggestions, I will look at implementing as many as possible. I am not too sure which aproach I will use though, but my page requires an entrance page with a ToS page, and I was going to look at preloading all those images while the surfer is on that page, or maybe see about implementing possible ajax preloading (or something that might resemble a flash loading bar).

  9. #9
    SitePoint Enthusiast nrg_alpha's Avatar
    Join Date
    Dec 2008
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Webnet View Post
    Reducing your image count will increase the number of http requests thus hurting your load time in that area.
    How do you come up with less images = more http requests? Every unique image on the page has to be requested, which in turn causes additional http request / response headers...So using say one image for instance instead of numerous smaller ones reduces, not increases those http headers flying all over the place.

  10. #10
    SitePoint Guru
    Join Date
    Sep 2004
    Posts
    613
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I meant increasing as the first word there....

    Preloading is bad. By doing that, you're loading content that the user may not even need. What if they hit your TOS then turn back and don't go through it? Then you've wasted bandwidth and their page took longer to load for no reason.

  11. #11
    SitePoint Enthusiast nrg_alpha's Avatar
    Join Date
    Dec 2008
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not referring to preloading, but rather talking about the home page imagery here (which the user will need to view the home page).

  12. #12
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then to nkeep this discussion alive, because I am learning alot, is there a way (such as AJAX or another approach) to preload the content after a user clicks through the terrible ToS (I hate 'welcome' pages, but it is required on my site) so that my images will only load the background and logo perhaps and the rest of the images after all of them are loaded? I do not want flash (it's too heavy), but it seems my page is heavier than flash, although I nor is anyone I know skilled enough to make something like that. Somewhere in those sentences goes a question mark, so insert one here.... ?

  13. #13
    SitePoint Addict Newviewit's Avatar
    Join Date
    Apr 2008
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .gif is ok for some images with solid colors.

    If you have Photoshop try to 'save for web' and set different jpg (maximum, medium, etc). This keeps the same quality for the viewer and can cut the size in half (better quality compared to gif and sometimes smaller size)
    UNLIMITED Domains - UNLIMITED Disk Space - UNLIMITED Bandwidth
    *Black Friday - Website Hosting Deal of The Year - 50% OFF!

  14. #14
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Webnet View Post
    Preloading is bad. By doing that, you're loading content that the user may not even need. What if they hit your TOS then turn back and don't go through it? Then you've wasted bandwidth and their page took longer to load for no reason.
    The page content should load first. If you can then use 'dead' time on the connection to push preloading content down the line so that the likely next page is already partly loaded when the user clicks the link, it saves time and loads quicker. It won't slow down the user's experience of the site - yes, it will marginally increase your data transfer, but it's unlikely that preloading will push you over your limit.

  15. #15
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should use Firebug with the Yslow addon, it has an image optimizer which will reduce the file sizes.
    YSlow also gives useful optimisation tips.
    you can check out scriptalizer to stitch your javascript and css files to reduce requests and speed up the loading

  16. #16
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ! anyone pls inform me the role of " z indexing" in css

  17. #17
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Z-indexing is used to determine how elements stack. If you think of each element as a piece of paper you may grasp the concept easier. If the way elements overlap doesn't work for you, anything that has a relative, absolute or fixed position property can also be given a z-index. The higher the z-index, the higher an element is in the stack.
    Try using it to see for yourself.

    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <div id="block_1">Block 1</div>
    <div id="block_2">Block 2</div>
    <div id="block_3">Block 3</div>
    </body>
    Code:
    /*CSS*/
    div {height: 100px; width: 100px; position:absolute;}
    #block_1{ top: 30px; left:0px; z-index: 1; background: #FF0;}
    #block_2{ top: 60px; left:30px; z-index: 2; background: #F0F;}
    #block_3{ top: 0px; left:60px; z-index: 0; background: #0FF;}

  18. #18
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Short answer - read. A lot.
    It's really not that hard, just find a decent tutorial or a book at the library on it, and try as you go.
    Here's a guide to get you started: www dot westciv dot com /style_master/academy/css_tutorial/

    (Sorry about that by the way, I need to get a few more posts before posting links.)

  19. #19
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Browsers come with a default 2 connection limit, so the more objects (like images) you have, typically the slower the page will load; instead of downloading one big image, it requests the first two images and waits to request any more until those are received. That's a key webpage optimization technique. It's also why sprites are valuable. Instead of uploading several images, you upload one composite image and use CSS to reveal only the part that you want to show at each location.

    Quote Originally Posted by Newviewit View Post
    .gif is ok for some images with solid colors.

    If you have Photoshop try to 'save for web' and set different jpg (maximum, medium, etc). This keeps the same quality for the viewer and can cut the size in half (better quality compared to gif and sometimes smaller size)
    I agree, although that won't work in this case because .jpgs don't support transparency. Also, .gifs support 100% transparency only, so you can't use partial transparent effects in photoshop and then save it as a .gif, only a .png. And as if that wasn't confusing enough, .png transparency fails utterly in IE6. There are some sophisticated (read painful) ways around this. So using images with transparency is highly dependent on the image, the background and what you're really doing with it.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  20. #20
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Illogical slicing is a bad practice, but that's true for anything illogical.
    When you slice you have to think of pattern optimization. If you have a vertical background fade, for example. you could slice a section of it that's justa few pixel's wide and the height of the background; ending with a slice thats often less than 1K. If you have, however, designed a background that is more ornamental.. a picture of the Mona Lisa...or graphical buttons, slicing may not serve to save much bandwidth.

  21. #21
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by roottoor View Post
    I've got a site I am developing that is throwing me a few curve balls. I do not know best practices for optimization, and I have a few layout images which are rather large (538k) which I cut into 6 smaller images to help with loading the asset, but even those smaller .png (transparency needed) are a good (50k-100k) making load times difficult still. And of course, while I am writing this, I read an article which says that image slicing is a bad practice anyways (nothing more than an illusion of quicker loads). ...
    I have looked at your linked page wowrealms.org. It is not optimized at all.

    The best approach is to avoid slicing. The http requests are fewer and the total wiegth is lower.

    ... Secondly, I am placing them with a position:absolute because I need them to remain dead center of the page with other assets in various locations as well no matter the resolution or browser window size. I am using ugly negative margins, but I have no idea how to make it better.
    Another way would be to float the two side boxes into place using margins to position, and use auto-margins to center the map between the side boxes.

    ... I am considering using sprites, but what is the max image for these sprites that can be used without defeating the purpose of sprites?
    The size is not the limit, rather the options to combine the various images into one image and be able to position the background accordingly.

    What is a more optimal, and standardized, approach to positioning my elements in the way I am trying to make them cross-browser, cross-resolution?
    Try do it like in this example below.

    The three main boxes contains the "slice-boxes" floated to fill the area. These small boxes have the same large background image but positioned to show the "sliced piece" that fits the box position.

    I have been using your linked resources, and for you to test I'll attach the "unsliced" images, but you should already have the unsliced original images and the other used images in your computer.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>WoWRealms.org</title>
    <link rel="stylesheet" href="/css/style.css" type="text/css">
    <style type="text/css">
    body, html {
    	margin: 0;
    	padding: 0;
    	height: 100&#37;; 
    	background: url('img/background.jpg') fixed no-repeat 50% 35%;
    }
    #wrapper {
    	width: 1000px;
    	margin: 53px auto 0;
    }
    #logo {
    	position: relative;
    	left: -141px;
    	margin: 0 auto;
    	width: 282px;
    	height: 146px;
    	background: url('img/logoshadow.png') no-repeat;
    }
    #logo div {
    	width: 282px;
    	height: 146px;
    	background: url('img/logo.gif') no-repeat;
    }
    #alliance {
    	position: relative;
    	float: left;
    	margin: 5px -200px 0 -130px;
    	width: 435px;
    	height: 472px;
    	background: url('img/allianceshadow.png') no-repeat 0px 40px;
    }
    #alliance div {
    	float: left;
    	width: 105px;
    	height: 58px;
    	background: url('img/alliance.gif') no-repeat;
    }
    #alliance .alliance1-1{ background-position:0 0}
    #alliance .alliance1-2{ background-position:-105px 0}
    #alliance .alliance1-3{ background-position:-210px 0}
    #alliance .alliance1-4{ background-position:-315px 0}
    
    #alliance .alliance2-1{ background-position:0 -58px; height:59px}
    #alliance .alliance2-2{ background-position:-105px -58px; height:59px}
    #alliance .alliance2-3{ background-position:-210px -58px; height:59px}
    #alliance .alliance2-4{ background-position:-315px -58px; height:59px}
    
    #alliance .alliance3-1{ background-position:0 -117px}
    #alliance .alliance3-2{ background-position:-105px -117px}
    #alliance .alliance3-3{ background-position:-210px -117px}
    #alliance .alliance3-4{ background-position:-315px -117px}
    
    #alliance .alliance4-1{ background-position:0 -175px; height:59px}
    #alliance .alliance4-2{ background-position:-105px -175px; height:59px}
    #alliance .alliance4-3{ background-position:-210px -175px; height:59px}
    #alliance .alliance4-4{ background-position:-315px -175px; height:59px}
    
    /* and so on ... */
    
    #horde {
    	position: relative;
    	float: right;
    	margin: 20px -150px 0 -200px; /* IE wrongly lets a left margin pull a right float, so it can need the left negative margin adjusted at a different container width */
    	width: 435px;
    	height: 472px;
    	background: url('img/hordeshadow.png') no-repeat 70px 25px;
    }
    #horde div {
    	float: left;
    	margin: 0;
    	width: 105px;
    	height: 58px;
    	background: url('img/horde.gif') no-repeat;
    }
    #horde .horde1-1{ background-position:0 0}
    #horde .horde1-2{ background-position:-105px 0}
    #horde .horde1-3{ background-position:-210px 0}
    #horde .horde1-4{ background-position:-315px 0}
    
    #horde .horde2-1{ background-position:0 -58px; height:59px}
    #horde .horde2-2{ background-position:-105px -58px; height:59px}
    #horde .horde2-3{ background-position:-210px -58px; height:59px}
    #horde .horde2-4{ background-position:-315px -58px; height:59px}
    
    #horde .horde3-1{ background-position:0 -117px}
    #horde .horde3-2{ background-position:-105px -117px}
    #horde .horde3-3{ background-position:-210px -117px}
    #horde .horde3-4{ background-position:-315px -117px}
    
    #horde .horde4-1{ background-position:0 -175px; height:59px}
    #horde .horde4-2{ background-position:-105px -175px; height:59px}
    #horde .horde4-3{ background-position:-210px -175px; height:59px}
    #horde .horde4-4{ background-position:-315px -175px; height:59px}
    
    /* and so on ... */
    
    #map {
    	margin: -90px auto 0;
    	width: 639px;
    	height: 439px;
    	overflow: hidden;
    	background: url('img/mapshadow.png') no-repeat 5px 5px;
    }
    #map div {
    	float: left;
    	width: 79px;
    	height: 72px;
    	background: url('img/map.gif') no-repeat;
    }
    #map .map1-1{ background-position:0 0}
    #map .map1-2{ background-position:-79px 0}
    #map .map1-3{ background-position:-158px 0}
    #map .map1-4{ background-position:-237px 0}
    #map .map1-5{ background-position:-316px 0}
    #map .map1-6{ background-position:-395px 0}
    #map .map1-7{ background-position:-474px 0}
    #map .map1-8{ background-position:-553px 0}
    
    #map .map2-1{ background-position:0 -72px}
    #map .map2-2{ background-position:-79px -72px}
    #map .map2-3{ background-position:-158px -72px}
    #map .map2-4{ background-position:-237px -72px}
    #map .map2-5{ background-position:-316px -72px}
    #map .map2-6{ background-position:-395px -72px}
    #map .map2-7{ background-position:-474px -72px}
    #map .map2-8{ background-position:-553px -72px}
    
    /* and so on ... */
    
    </style>
    </head><body>
    
    <div id="wrapper">
    	<div id="logo">
    		<div></div>
    	</div>
    	
    	<div id="alliance">
    		<div class="alliance1-1"></div>
    		<div class="alliance1-2"></div>
    		<div class="alliance1-3"></div>
    		<div class="alliance1-4"></div>
    		
    		<div class="alliance2-1"></div>
    		<div class="alliance2-2"></div>
    		<div class="alliance2-3"></div>
    		<div class="alliance2-4"></div>
    		
    		<div class="alliance3-1"></div>
    		<div class="alliance3-2"></div>
    		<div class="alliance3-3"></div>
    		<div class="alliance3-4"></div>
    		
    		<div class="alliance4-1"></div>
    		<div class="alliance4-2"></div>
    		<div class="alliance4-3"></div>
    		<div class="alliance4-4"></div>
    		
    		<div class="alliance5-1"></div>
    		<div class="alliance5-2"></div>
    		<div class="alliance5-3"></div>
    		<div class="alliance5-4"></div>
    		
    		<div class="alliance6-1"></div>
    		<div class="alliance6-2"></div>
    		<div class="alliance6-3"></div>
    		<div class="alliance6-4"></div>
    		
    		<div class="alliance7-1"></div>
    		<div class="alliance7-2"></div>
    		<div class="alliance7-3"></div>
    		<div class="alliance7-4"></div>
    		
    		<div class="alliance8-1"></div>
    		<div class="alliance8-2"></div>
    		<div class="alliance8-3"></div>
    		<div class="alliance8-4"></div>
    	</div>
    	
    	<div id="horde">
    		<div class="horde1-1"></div>
    		<div class="horde1-2"></div>
    		<div class="horde1-3"></div>
    		<div class="horde1-4"></div>
    		
    		<div class="horde2-1"></div>
    		<div class="horde2-2"></div>
    		<div class="horde2-3"></div>
    		<div class="horde2-4"></div>
    		
    		<div class="horde3-1"></div>
    		<div class="horde3-2"></div>
    		<div class="horde3-3"></div>
    		<div class="horde3-4"></div>
    		
    		<div class="horde4-1"></div>
    		<div class="horde4-2"></div>
    		<div class="horde4-3"></div>
    		<div class="horde4-4"></div>
    		
    		<div class="horde5-1"></div>
    		<div class="horde5-2"></div>
    		<div class="horde5-3"></div>
    		<div class="horde5-4"></div>
    		
    		<div class="horde6-1"></div>
    		<div class="horde6-2"></div>
    		<div class="horde6-3"></div>
    		<div class="horde6-4"></div>
    		
    		<div class="horde7-1"></div>
    		<div class="horde7-2"></div>
    		<div class="horde7-3"></div>
    		<div class="horde7-4"></div>
    		
    		<div class="horde8-1"></div>
    		<div class="horde8-2"></div>
    		<div class="horde8-3"></div>
    		<div class="horde8-4"></div>
    	</div>
    	
    	<div id="map">
    		<div class="map1-1"></div>
    		<div class="map1-2"></div>
    		<div class="map1-3"></div>
    		<div class="map1-4"></div>
    		<div class="map1-5"></div>
    		<div class="map1-6"></div>
    		<div class="map1-7"></div>
    		<div class="map1-8"></div>
    
    		<div class="map2-1"></div>
    		<div class="map2-2"></div>
    		<div class="map2-3"></div>
    		<div class="map2-4"></div>
    		<div class="map2-5"></div>
    		<div class="map2-6"></div>
    		<div class="map2-7"></div>
    		<div class="map2-8"></div>
    
    		<div class="map3-1"></div>
    		<div class="map3-2"></div>
    		<div class="map3-3"></div>
    		<div class="map3-4"></div>
    		<div class="map3-5"></div>
    		<div class="map3-6"></div>
    		<div class="map3-7"></div>
    		<div class="map3-8"></div>
    
    		<div class="map4-1"></div>
    		<div class="map4-2"></div>
    		<div class="map4-3"></div>
    		<div class="map4-4"></div>
    		<div class="map4-5"></div>
    		<div class="map4-6"></div>
    		<div class="map4-7"></div>
    		<div class="map4-8"></div>
    
    		<div class="map5-1"></div>
    		<div class="map5-2"></div>
    		<div class="map5-3"></div>
    		<div class="map5-4"></div>
    		<div class="map5-5"></div>
    		<div class="map5-6"></div>
    		<div class="map5-7"></div>
    		<div class="map5-8"></div>
    
    		<div class="map6-1"></div>
    		<div class="map6-2"></div>
    		<div class="map6-3"></div>
    		<div class="map6-4"></div>
    		<div class="map6-5"></div>
    		<div class="map6-6"></div>
    		<div class="map6-7"></div>
    		<div class="map6-8"></div>
    	</div>
    
    </div>
    </body></html>
    Attached Images Attached Images
    Happy ADD/ADHD with Asperger's

  22. #22
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the detailed response. I have been getting my mac ppc up and running, so I haven't had time to work on the site. but I will be testing these suggestions out and hopefully have a more optimized site by weeks end... the coming week. Sadly, ySlow is not compatible with FF 3.5 yet, so I will try that latwer after I change from using slices to full images, possible even sprites (although I think sprites are used mostly when you have various different images that you want displayed in various places. Regardless, thanks to all of those who posted, I have found enjoyment using SitePoint for my support needs, and will be bringing this topic up once more once I get things optimized to see about further improving upon the performance of my site.

  23. #23
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Illogical slicing is a bad practice, but that's true for anything illogical.
    When you slice you have to think of pattern optimization. If you have a vertical background fade, for example. you could slice a section of it that's justa few pixel's wide and the height of the background; ending with a slice thats often less than 1K. If you have, however, designed a background that is more ornamental.. a picture of the Mona Lisa...or graphical buttons, slicing may not serve to save much bandwidth.
    OK, I will agree that anything illogical is illogical.

    The number one important thing in website optimization, is decrease your number of objects *period* It is impossible to save bandwidth by slicing, because it creates more objects; instead of 1 image, it downloads many and that slaughters your download time.

    A web browser only downloads 2 items from a server at a time. Your webpage is one, your first image is two. Everything else sits idly on the server waiting for the web browser to ASK for it. The more things a webpage asks for, the longer it takes this process to complete, so if you're talking about best practice in website optimization you always want one unsliced image.

    Now if there are other reasons you choose to slice your image, that's another thing, but if you choose to slice (or even just use lots of images instead of condensing them into as few image sprites as possible) then you are trading off those benefits against slower time for a visitor to download your page.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  24. #24
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow , now a liitle bit headache ,newbie for the webdesign
    working on it!


Bookmarks

Posting Permissions

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