Forum Moderators: not2easy
I've had the same web software developer, on two different days, tell me two different answers.
"One big one - then there's only one image request for the server and it loads faster."
"A bunch of smaller ones - they'll all load quicker, simultaneously."
So ... is there a gold standard rule? Thanks for your help.
For example, is this large graphic on the page alone, is it inside a table, what graphic file format are you using?
The smaller K package should actually load faster... however, a sliced image will often give the illusion of loading faster, because bits and pieces of it will appear during the time the larger all-in-one image is still loading up.
Personally, I stopped slicing images a while ago, just because managing the table code to keep everything in place is a hassle. I just try to simplify and optimize large graphics to make the resulting file as small as possible.
I think any definitive answers to your question would need to be decided on a case-by-case basis... (which I guess would make them not-at-all "definitive," eh? ;) )
I thought I'd check the waters here to see which way they go. I can see that this topic, like others on webmasterworld, doesn't have a cookie-cutter solution. :)
Another issue would be all those hits cluttering up your log file. Instead of 1 hit, your getting 4/5/6 due to the "slices".
Thats space that need not be wasted :)
But, I've also found that designing the interface as an HTML construct with solitary images placed here or there for buttons or logos saves even more space than using a big, sliced graphic as a navigation system.
However, if you're talking about a decorative image like a large photo or whatnot, I think that's where the advisability of slicing a graphic comes into question.
I think that the in between code and graphic creation is a job in itself. I wish I had known that starting out.
Right now I'm trying to balance the needs of two different business partners - one is somewhat image heavy, the other is pretty much text-and-tables based. It's more work trying to balance the two design philosophies than create the actual designs!
I just used my first image map this past week - on a personal site, not business. Interesting. I used a graphic that was mostly white space, but had text that was not easy to lay out in a table. Small graphic size, large footprint.
I used a graphic that was mostly white space, but had text that was not easy to lay out in a table.
You should use a 1px x 1px spacer gif for large on color images. You specify the size in the html. It will load that small 1k image once and act like a large image file.
If it's not on the home page or a primary entrance page, use a JavaScript "preload" to preload the graphic while the visitor is at the home/entrance page.
That way it's loaded before the page (graphic) is even called.
I've used this technique several times to preload client's graphic/photo portfolios. In some cases preloading nearly 300K of graphics while the visitor is viewing other pages.
Just a suggestion.
1. One way to find out would be to do it both ways and then run Apache Bench. This would tell you which places more load on the server, though results might be a bit different across a modem.
Apache Bench is part of the standard distro under *nix and available as precompiled binaries under Windows at
[remotecommunications.com...]
2. As a general rule, if you have long monochromatic sections of an image, it will compress a lot as a gif (especially if the monochromatic sections are horizontally extended, lots less if vertically extended). So you can optimize them as gifs and then things with progressive color change as jpeg.
Tom
I think a general
As for myself, I just use such slicing software to optimize each slice differently (if needed) then save it without the "HTML Table" then arrange it myself on my tabless page.
that most of the stuff on our pages is dynamically generated
I've preloaded stuff on a dynamic site. In my case PHP, so ...
Just create a var like $body_params so that your <body} tag is rendered as
echo "<body" . $body_params . " />";
Make sure $body_params always has a leading space in this case. Then, just have a script that figures out which images to preload for a given page (I get this info from a database) and generate a Javascript function call so that
$body_params = "onload....."
Tom
Really, I don't see too much of a time difference with either method... (especially since I don't use ImageReady to generate my table code)
You dont need to create a table to hold your sliced images just slice em horizontaly and then stack em by using <br>
Another question if some of you don't mind, how can I use Javascript to call in consistent bottom borders on my pages without having to code them all?
Thanks so much.
You should post your questions over in the Browsers/HTML forum [webmasterworld.com]... that's where they handle all the coding questions. You'll no doubt get a lot more useful answers there than here in the Graphics area!
