Welcome to WebmasterWorld Guest from 54.226.238.178

Forum Moderators: not2easy

Message Too Old, No Replies

Optimal image size for page loading

One big image vs. several smaller images - which is better?

     
7:45 pm on Jun 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 20, 2002
posts:1716
votes: 0


The title and the body speak pretty directly to my question ... is it better for me to have one larger graphic or a bunch of smaller ones?

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.

8:08 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


Are you referring to showing one image at multiple sizes throughout the site, or the one big image vs. slicing the image debate?

MediaBoy

8:17 pm on June 24, 2002 (gmt 0)

Inactive Member
Account Expired

 
 


In "general," several smaller files are loaded faster (or at least give the appearance of loading faster). But we could probably provide a more definitive answer if you gave some more details.

For example, is this large graphic on the page alone, is it inside a table, what graphic file format are you using?

8:18 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 20, 2002
posts:1716
votes: 0


The latter - leaving an image as one big file or chunking it into pieces. (I did a quick search but must've used bad keywords, because I didn't find what I was looking for!)
8:26 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


Look at the total K size of the page both ways (inclding size of HTML file, and size of all necessary image files)... Does the image slicing (that's the usual term for it: slicing an image, or using sliced images) save enough K size to make up for the table code needed to hold it together?

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? ;) )

8:39 pm on June 24, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 8, 2001
posts:447
votes: 0


We have some large images on our site that we prefer to slice, it loads faster. As for the HTML I just paste it in, Image Ready spits out the HTML for the table so for me that part is cake!:)
8:57 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 20, 2002
posts:1716
votes: 0


Thanks for the thoughts. I tend to be in the "use one graphic but make it reasonably sized" camp. I just got off the phone with a marketing partner who has a very LARGE! name and wants me to start slicing and dicing my images. I'm just kind of grumpy about it and want to avoid doing that, if possible.

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. :)

9:02 pm on June 24, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 30, 2002
posts:4843
votes: 2


IMO, i wouldnt want to dice em up, purely because of the above reason that the actually dont load any faster. They may "appear to", but thats an issue in itself :)

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 :)

9:03 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


The reason for slicing images is so you can optimize each peice individually. I have never seen a gui that could not be optimized better by slicing. Some pieces gif some jpegs. Some parts of the gui can just be td background colors. Table markup should only be 1k - 3k. Some guis I have seen go down 20k - 30k by unique slice optimization. Optimizing your guis should be just as important and designing and coding.
9:09 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


I have never seen a gui that could not be optimized better by slicing.
If you're talking about creating the entire navigation interface out of a single original image, then absolutely slice it! Simply being able to use regular links on the navigation "buttons" is preferrable to having to create an imagemap...

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.

9:14 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


I think the distinction is between a gui and a basic image. If it is photograph or logo no slice. If it is an interface or large image taking over the page (450 px or higher) slice er up.

I think that the in between code and graphic creation is a job in itself. I wish I had known that starting out.

9:18 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 20, 2002
posts:1716
votes: 0


For my purposes (business and personal) I prefer text, with images thrown in to highlight or accent things.

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.

9:23 pm on June 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


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.

MediaBoy

10:06 pm on June 24, 2002 (gmt 0)

Inactive Member
Account Expired

 
 


Let me ask this. Where is this large graphic in your site structure?

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.

11:06 pm on June 24, 2002 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8326
votes: 155


I never check into this forum, but just did... this isn't exactly my thing so take this witha grain of salt:

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

3:18 am on June 25, 2002 (gmt 0)

Full Member

10+ Year Member

joined:May 9, 2002
posts:241
votes: 0


I agree to the previous statement that the power of image slicing is using it for selective optimization of each graphics. However, since it uses tables, ... is there any software that uses CSS-P instead?!? just curious. =)

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.

2:07 pm on June 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 20, 2002
posts:1716
votes: 0


Ah, it's not on the home page! I like that pre-load idea. The only problem (with this particular site) is that most of the stuff on our pages is dynamically generated, and that would make programming the pre-load a wee bit trickier. But I'm going to look into it. Thanks!
3:09 pm on June 25, 2002 (gmt 0)

Full Member

10+ Year Member

joined:July 8, 2001
posts:267
votes: 0


What image slicing software to you folks use? I usually just bust out the calculator, and cut and paste selections of an image in PSP...
5:52 pm on June 25, 2002 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8326
votes: 155



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

7:01 pm on June 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


What image slicing software to you folks use? I usually just bust out the calculator, and cut and paste selections of an image in PSP...
I've used both ImageReady and PhotoShop... With ImageReady, you draw in your "slice lines" (guides) and let it do the work of resaving each section, with PhotoShop you draw in your guides, and then cut out each chunk and save it as a separate file.

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)

8:24 am on June 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2001
posts:690
votes: 0


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>

Fitch

5:38 pm on June 27, 2002 (gmt 0)

Inactive Member
Account Expired

 
 


Hello, I'm new to all this and was just reading through this thread. Have only used Java for the "no right click". Am interested in the "preload". Would you mind giving an example of the code to use?

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.

5:50 pm on June 27, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


Welcome Fitch! :)

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!

5:52 pm on June 27, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 8, 2001
posts:447
votes: 0


There you go, slice your images, use Image Ready and use the HTML table Image Ready spits out, why not??!!! Thats is what we do and it works perfectly:)

Fitch

6:43 pm on June 27, 2002 (gmt 0)

Inactive Member
Account Expired

 
 


Thank you for the welcome mivox!
I'll do that.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members