homepage Welcome to WebmasterWorld Guest from 23.20.61.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Optimal image size for page loading
One big image vs. several smaller images - which is better?
Hawkgirl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 375 posted 7:45 pm on Jun 24, 2002 (gmt 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.

 

mivox

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



 
Msg#: 375 posted 8:08 pm on Jun 24, 2002 (gmt 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

10+ Year Member



 
Msg#: 375 posted 8:17 pm on Jun 24, 2002 (gmt 0)

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?

Hawkgirl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 375 posted 8:18 pm on Jun 24, 2002 (gmt 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!)

mivox

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



 
Msg#: 375 posted 8:26 pm on Jun 24, 2002 (gmt 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? ;) )

mahlon

10+ Year Member



 
Msg#: 375 posted 8:39 pm on Jun 24, 2002 (gmt 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!:)

Hawkgirl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 375 posted 8:57 pm on Jun 24, 2002 (gmt 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. :)

brotherhood of LAN

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



 
Msg#: 375 posted 9:02 pm on Jun 24, 2002 (gmt 0)

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

korkus2000

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



 
Msg#: 375 posted 9:03 pm on Jun 24, 2002 (gmt 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.

mivox

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



 
Msg#: 375 posted 9:09 pm on Jun 24, 2002 (gmt 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.

korkus2000

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



 
Msg#: 375 posted 9:14 pm on Jun 24, 2002 (gmt 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.

Hawkgirl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 375 posted 9:18 pm on Jun 24, 2002 (gmt 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.

korkus2000

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



 
Msg#: 375 posted 9:23 pm on Jun 24, 2002 (gmt 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+ Year Member



 
Msg#: 375 posted 10:06 pm on Jun 24, 2002 (gmt 0)

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.

ergophobe

WebmasterWorld Administrator ergophobe us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 375 posted 11:06 pm on Jun 24, 2002 (gmt 0)

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

copongcopong

10+ Year Member



 
Msg#: 375 posted 3:18 am on Jun 25, 2002 (gmt 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.

Hawkgirl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 375 posted 2:07 pm on Jun 25, 2002 (gmt 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!

kingkelly

10+ Year Member



 
Msg#: 375 posted 3:09 pm on Jun 25, 2002 (gmt 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...

ergophobe

WebmasterWorld Administrator ergophobe us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 375 posted 5:52 pm on Jun 25, 2002 (gmt 0)


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

mivox

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



 
Msg#: 375 posted 7:01 pm on Jun 25, 2002 (gmt 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)

knighty

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 375 posted 8:24 am on Jun 26, 2002 (gmt 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

10+ Year Member



 
Msg#: 375 posted 5:38 pm on Jun 27, 2002 (gmt 0)

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.

mivox

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



 
Msg#: 375 posted 5:50 pm on Jun 27, 2002 (gmt 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!

mahlon

10+ Year Member



 
Msg#: 375 posted 5:52 pm on Jun 27, 2002 (gmt 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

10+ Year Member



 
Msg#: 375 posted 6:43 pm on Jun 27, 2002 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved