SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: image combining

  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image combining

    We are using a third party to mark up a design that we had created in 99designs. An issue has come up over the number of image files. For each page there are 20 or 30 individual image files, mostly 1kb or less in size, corners, boxes etc. We're trying to understand why there are so many but the main issue we have is that we are being told that further image combining will have a negative impact on performance and that it is better to have individual image files rather than one large file. This goes against everything we have read about page load performance but it is not our area of expertise.. Does anyone have any experience on this to help guide us? Thanks.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    for boxes and corners it's very usefull to use more images.

    Boxes of different sizes can be made using CSS, with only 4 images of the corners and 4 images for the sides of the box.

    Instead of creating large images for the different sizes of boxes.

    The method the company is using saves bandwidth and will thus help the page load faster.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but this leads to a further question. Is it better for performance that there are 8 image files in this case, or for them to be combined into one image and the css sprites technique used to split the images out?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Putting the four corners in one image and using CSS sprite techniques would be somewhat faster I guess.

    But we're talking microseconds here, not something I would really worry about if I were you.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Quote Originally Posted by sgm View Post
    We are using a third party to mark up a design that we had created in 99designs. An issue has come up over the number of image files. For each page there are 20 or 30 individual image files, mostly 1kb or less in size, corners, boxes etc. We're trying to understand why there are so many but the main issue we have is that we are being told that further image combining will have a negative impact on performance and that it is better to have individual image files rather than one large file. This goes against everything we have read about page load performance but it is not our area of expertise.. Does anyone have any experience on this to help guide us? Thanks.
    Actually combining the images will IMPROVE the performance, especially for dialup users. Even broadband users will see a benefit. How many times have you seen people say "But I have broadband - the Internet is supposed to be faster, not just as slow!"? The reason they're saying that is the number of files that are being fetched by the server. And it's not just image files, but also stylesheets, JavaScript files, files that rely on plugins (such as Flash, Java, etc), and so on.

    It basically comes down to something called "handshaking". Basically, whenever a browser wants a file from a Web site that is not in the browser's cache, it has to "request" the file from the Web server the site is hosted on. The process works somewhat like this:

    The browser starts off by asking the server if it has the file in question. The server wil then respond with the status of the file, such as "exists, doe snot exist, has not been updated compared to your cache" and so on. Keep in mind that's already three "back and forths" between the browser and the server, and that's before you figure in if it's a server you aren't currently "connected" to or not, and so forth. This is, for the most part, what "handshaking" is (for the sake of this post anyway; you can learn more about status codes over at www.w3.org should that be of interest to you).

    Each such connection between the browser and server tkes approximately the same time as it does to "ping" the server, which is usually between 30ms to 1000ms dependong on not just the speed of the user's Internet connection, but also the number of traceroutes (or jumps) between the user and the server, the speed of the routers/bridges/gateways between the user and the Web server being contacted, and so on. A typical Web browser is capable of (not to mention set to) handling up to eight concurrent connections to a Web server, meaning the first eight files on a site are treated as one file; anything over that and and you can start to see increased download times as the server attempts to serve the requested files to the browser. A typical ballpark figure of 200ms to 1000ms is used by some people (including the person who told me how this process works) to determine the average overhead for when such "handshaking" occurs.

    Now, for this Web site you're having developed, every page, every image, every stylesheet, every JavaScript document, et cetera, is a separate file. Let's say someone tries to access the site's home page for the very first time, or they're opening the page but their browser's cache has expired, shall we? Let's say you have 25 images that are being served by the CSS file, another 15 content image files (your logo, product images, and whatnot), a stylesheet file, and five JavaScript files linked to the Web page. That's a grand total of 47 files being accessed at one time. Since the browser can handle eight files concurrently as one "file", that leaves you with 39 files that need to be grabbed as separate "handshakes", that could add up to a minute to the download time as "overhead" that has absolutely nothing to do with the actual transfer speed of the user's Internet connection.

    On top of all that, you also have the file sizes to worry about, and the number of times those files are called. There's a reaosn why I advocate using as little code, as few external files, and images as possible in the development of a Web site. That reason being the smaller the files, the faster the browser can get them and render the page. The fewer files the browser has to grab, the faster it can render the page.

    And to make things even more interesting, as I mentioned just a moment ago, the number of times a file's URI is referenced will have an impact on the overhead. Take the following example as a demonstration:

    Code CSS:
    #selector-one {
    	background: url("/images/background-image.png") top left 0 0;
    	display: block;
    	height: 30px;
    	width: 80px;
    }
     
    #selector-two {
    	background: url("/images/background-image.png") top left 80px 0;
    	display: block;
    	height: 30px;
    	width: 80px;
    }
     
    #selector-three {
    	background: url("/images/background-image.png") top left 160px 0;
    	display: block;
    	height: 30px;
    	width: 80px;
    }
     
    #selector-four {
    	background: url("/images/background-image.png") top left 240px 0;
    	display: block;
    	height: 30px;
    	width: 80px;
    }
     
    #selector-five {
    	background: url("/images/background-image.png") top left 320px 0;
    	display: block;
    	height: 30px;
    	width: 80px;
    }

    In this example, you have the same image being called five times, meaning the browser is going to have to go back and forth to the server to get the same file five times. It's pointless! Why grab one image five times (and be told "uhm, you already have this file in your cache" four times by the server), when you can just request it once, and then adjust the position of the image as needed?

    Code CSS:
    #selector-one, #selector-two, #selector-three, #selector-four, #selector-five {
    	background: url("/images/background-image.png") top left;
    	display: block;
    	height: 30px;
    	width: 80px;
    }
    	#selector-one {
    		background-position: 0 0;
    	}
     
    	#selector-two {
    		background-position: 80px 0;
    	}
     
    	#selector-three {
    		background-position: 160px 0;
    	}
     
    	#selector-four {
    		background-position: 240px 0;
    	}
     
    	#selector-five {
    		background-position: 360px 0;
    	}

    In this example, the image is only being requested by the browser once, yet being applied in five different locations (the HTML is immaterial in this case, since it's just an example, much like lorem ipsum text is often used as a placeholder for real content - it gets even better if you use the same image for rollover and hover states since you can just "slide" the image up or down as well). Meaning that instead of the browser having to request the same file five times, it only needs to do so once, which allows it to reduce the overhead needed and allow it to position the image where it needs to be. And if the image has been optimized to be as small as possible using the best file type for the image in question, you'll be able to see quite an improvement in the rendering times of your Web pages, and your broadband users won't be complaining that your site is taking just as long to load on cable (or DSL, or satellite) as it was on dial-up.

    Everybody wins - even you, since you'll be able to serve more pages and more files to more people using less bandwidth to send those files out, which will save you more money on your hosting fees. And if more people are viewing those pages, you'll be able able to earn more money on those ad impressions, product sales, or whatever the site does to make you money.

    Hope that helps.

  6. #6
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, this is really helpful.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's great advice to reduce the number of small files used in a layout, but I disagree on one point. Or rather, I think I might. If a graphic file is referenced 5 times in a CSS file as a background-image, I'm almost positive it won't make multiple requests to the server for each instance.

    Yes, your example gives slightly tighter CSS code (repeated selectors, but only one image link), which might speed up the page load anyway.


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
  •