View Full Version : how to combine sliced image

07-09-2006, 06:35 AM
I have a huge image file to use as a background image. To save downloading time, i have sliced up the image into many pieces.
Does anyone know the htm/javascript script to use so that the sliced image will appear as a whole on the webpage?
Many thanks in advance.

07-09-2006, 07:14 AM
There is such a thing called ImageReady or ImageReady Slices for various programs. Google:

ImageReady Slices

There are also some free programs, I believe, that will do this. Basically what happens is your image is automatically sliced up into chunks that you can specify their sizes and then HTML code is generated that will assemble them into a layout, usually a table. One can do this 'by hand' but, it is far easier to have a program do it for you.

I'm not real thrilled with this technique because it is graphics intensive and it makes little difference how many slices you have, the entire number of bytes still need to be loaded and, if the user has images disabled, there is little or nothing for them on your page.

For a visually/graphics oriented person and also for someone who likes to control the exact appearance of their page(s), this is a very tempting technique but, no substitute for learning to design an accessible page.

Added - Here's a link to a freeware 'dicer':


07-09-2006, 08:00 AM
Thank you John, but the site given above is not suitable Window XP. :(
I have actually used Photoshop to slice the image up into 20 pieces.

Earlier from the site below, I learnt that cutting the image up can save downloading time and space:
(freeware tool called Dicer mentioned in the article is also not for WINDOW XP)

The code for a single background image is :

But i do not know the htm code for background image with several sliced pieces. Would be grateful if you could assist.

07-09-2006, 12:09 PM
Earlier from the site below, I learnt that cutting the image up can save downloading time and space:No, that's not what it's trying to say. This only applies if you intend to swap images, since you only need to download the portion of the image that needs to be changed rather than the whole image again. If you don't intend to be swapping images around, there's no reason to slice them; in fact, it's even less efficient than simply setting the image normally, since multiple requests have to be made to the server and there are many different image files, all with their own seperate metadata.
The code for a single background image is :
<background=imagename.gif>No, it isn't. That's not an HTML tag. The background attribute has also been deprecated for the CSS background-image (http://www.w3schools.com/css/pr_background-image.asp) property.

07-09-2006, 12:13 PM
Thank you for your explanation. I understood now.

07-09-2006, 02:36 PM
I don't see anywhere that dicer won't work on XP. I have yet to try an install myself though.

Anyways, background images are one per customer. If you want sliced images as backgrounds to line up, you need to put the elements next to each other or above and below each other. This is why tables are used by these slicer/dicer programs but, the image usually is in the foreground so that it can thereby dictate the size of the table cell it occupies. Working as consultant for others that have used slicer, I've been able to move the image to the background and then apply its dimensions to the cell.

07-11-2006, 02:26 AM
Thanks John, I tried downloading the Dicer software from the site you gave earlier but without success. So now I use the whole image as the background instead.

I use the code below and it works fine for me.
<body background=image.jpg>

07-11-2006, 02:56 PM
I use the code below and it works fine for me.
<body background=image.jpg>Yes, that's valid HTML (although somewhat outdated). The important thing to note is that it's an attribute, not a tag in its own right.