Inserting a sliced image

[Dark Dragon]

Okay, I have a painfully simple question so don't laugh too hard before you answer..

I have a couple of images..alone they'd take about 5 seconds to load, however by slicing it into three slices I can reduce the load time, right?

Well, how do I insert the sliced image onto my page?
I cannot rely on ImageReady as it uses some odd form of HTML and I just want the image...so do I have to put the image in a table? And how do I do that?

I know this seems like a simple thing to do but there seems to be so many ways to do things so any hints would help..thanks.

[ActiveX]

hmm...how about simply getting the sliced images from ImageReady/Photoshop and then u can insert them manually in your page...??

[James L.]

The "traditional" method of doing this is to put the images into a table. Photoshop and Imageready will create this code for you, but it will need some "tweaking" for it to become complient. What most people do who do this is to use the Photoshop or Imageready html code created by the save functions on these programs, fine tune the html, then copy the table and paste it into their regular page.

Be warned, the Netscape type browsers have a problem with adding some spacing around the images, so your slices don't quite line up. If you remove the spaces from your html table coding it solves the problem for these browsers. So, for example, this:

<tr>
<td>
<img....blah blah blah>
</td>
</tr>

...might cause the gap problem that I mentioned in the Netscape browsers. This:

<tr><td><img.....></td></tr>

...won't.

I hope that helps. I haven't sliced images into a table in quite a long time so I may have forgotten a bit on this.

note, what I have described is if you want the 3 images to all appear as 1 image on the page.

Cheers.

p.s. When you save the slices in Imageready, you don't need to save the html code. Just select the option for images only, slices only, whatever it is called, in the Save dialog box.

[Dark Dragon]

Thanks..I think I will just put the image in as a whole..I just have to sacrifice some quality..

[Lotus]

Is this what the call "Sliced HTML"?

[Dark Dragon]

Umm...what?

[tigrrboxer]

What are you using? FrontPage, Dreamweaver or Notepad or what??
Anyway the principle is the same:
Photoshop kindly saves your slices in order, by the way (image-01.jpg, image-02.jpg etc.).
Let's say you sliced it into 3 horizontal slices. Insert a 3-cell table, and paste a slice within each cell, which will expand to accomodate.
Remember that you can adjust the quality of each slice. If the slice has few colors/ detail, you can save it with fewer colors or lower quality than a detail-intensive area of the image.
I love photoshop :)

[Lotus]

I love Photoshop too.

Btw, forget what I said earlier. Sliced images has nothing to do with SHTML. I just found out.

[Dark Dragon]

Tigrrboxer: Thanks but I know that PhotoShop and ImageReady save the slices in order but the problem is in the table..while I might be able to get a borderless table it may not work in Netscape..also I have to contend with gaps in between the slices...*sighs* :o

BTW..I am using DreamWeaver to build my site...sometimes I supplement it with HTML Kit

I guess since I will have a "Splash" page, I guess I could make the page in Photoshop and use Imageready but it has terrible coding and I'd have to rewrite the tags so they will at least resemble some form of valid HTML....

[James L.]

Dark Dragon.

I told you above how to get rid of the gaps in the images table in netscape. This is a known bug, and one which is easily overcome by simply removing the spaces within the html code, plus there are other methods around it.

If you post a link or send me your code and images I will fix it for you.

[ellie]

If you make sure your table attributes are as follows, you wont get spacing inbetween your images. Then, define your table cells with the pixel sizes of your slices to ensure they don't 'bump' in different browsers.

<table width="insert pixel width of final image when pieced" border="0" cellspacing="0" cellpadding="0">

Hope this helps :)

[James L.]

Hey ellie,

In some browsers, even defined like that, you will get the gaps. It is easily corrected though by removing the excess spaces/line breaks from the html code... don't ask me why.

For example, coding the entire table like you suggested, consider this snippet:

<tr>
<td width="100" height="100" align="left" valign="middle">
<img src="blah" width="100" height="100" border="0" alt="blah">
</td>
</tr>


This type of coding would still have gaps in some browsers between the slices.

If you instead wrote it like this:

<tr><td><img....></td></tr>

It removes the gaps.

[James L.]

Hey ellie,

In some browsers, even defined like that, you will get the gaps. It is easily corrected though by removing the excess spaces/line breaks from the html code... don't ask me why.

For example, coding the entire table like you suggested, consider this snippet:

<tr>
<td width="100" height="100" align="left" valign="middle">
<img src="blah" width="100" height="100" border="0" alt="blah">
</td>
</tr>


This type of coding would still have gaps in some browsers between the slices.

If you instead wrote it like this:

<tr><td><img....></td></tr>

It removes the gaps.

And Dark, you can always get borderless tables!

Cheers!

[Dark Dragon]

I told you above how to get rid of the gaps in the images table in netscape.

...thanks.