views:

433

answers:

5

I need to create a site that is very graphics-heavy (torn paper backgrounds with transparent shadows over textured graphics, etc.) One way that I was thinking of saving on file size was to drop all my background elements into one PNG. The issue is that this file is now 180k. If I break it up into various GIFs and a couple PNGs then it would be closer to 70k.

Does it really matter? What is "too large" these days for file size? Will anyone notice if the file is 180 or 70k?

+3  A: 

If your users have fast access to your site (like, in an intranet), 180k is hardly a problem. If, on the other hand, the site is used by The Generic Older Person With A Humorously Slow Connection, it's probably going to be a problem. If your users use GPRS, but have endless patience, it's probably not going to be a problem. If the site gives out a million dollar to whoever has the patience to wait out the load time, transfer speeds are not an issue. And so on.

What I'm saying, it really depends on your requirements and constrains. This requires you to know (and subsequently tell us, for us to be more helpful) many things before you can get it close to right.

To avoid those pesky downvotes for very-valid-answers-but-simply-doesn't-please-someone, here's my answer:

180k divided by a standard ADSL modem transfer rate = 180kB / 100kB/s = 1.8s = endurable.

Henrik Paul
You get a pesky upvote instead :-)
ChssPly76
+1  A: 

Is there a reason not to use the smaller images? It sounds like you've already broken it up, so why not go with the smaller, faster method?

From a pure relativistic point of view, 70k will take only 38% of the download time that 180k would (approximately). If you're expecting high traffic or want fast load times, every bit helps.

zombat
A: 

You have to compare the time it takes to request all the separate images and the time it takes to download the one large one. The issue is with HTTP requests.

I suggest you run some tests with Google's Firefox extension, Pagespeed to see if there is a huge difference between the large png or the separate ones.

One benefit I can think of, besides fewer HTTP requests is that your site will load all at once instead of gradually as all the graphics are downloaded. The bottom line however, as Henrik said is that it depends on your requirements.

A: 

I'm sure you're aware that splitting into multiple images means additional connections to the server to retrieve them, with associated lag on each, and the additional size of the request and response headers.

Since browsers restrict the number of active connections to each server (browser version dependent) this may end up taking longer than retrieving a single image. The usual workaround to lift the limit is to use a separate "images" server, or a DNS alias that maps to the same host.

And unless you require animation, I'd always recommend PNG over GIF.

devstuff
A: 

Make sure that the site looks fine with images disabled first (so alt tags, width and heights set, correct colours used) and then split the images based up into groups. Group all of your buttons into one image if possible (using css sprite sheets), and all of the borders into another. Keep large images in separate files (so site background, headers).

The more images you have, the more the browser can parallelize the requests. However, if you split them up too much then different images will load at different times, making parts of the site pop in. It's a bit of a trade off, but that's the joy of programming :)

The better your site looks before the images are visible, the less the user will mind the speed of downloading the images.

Steve Johnstone