picture load slowly

[yllai]

in my site, i have a huge picture(pic.jpg), if i just insert the picture directly as <img src="pic.jpg">, it will take long time to load it completely. In order to make it to be load faster, i want to cut the pic.jpg into few pieces and name it as pic1.jpg, pic2.jpg, pic3.jpg..then i use table to merge them together..it should be faster.

My problem now is, how can i cut the pic.jpg into few pieces (like puzzle) without cut it one by one? can it be done with photoshop? or do you have any other application can do it?

[smokeyb]

If you cut the image up, you may find the totalled filesize bigger! jpegs load progressively so there is no need to do this. The best way to speed it up is to change the format, or use a good compression tool like fireworks or imageready.
HTH

[tfanelli]

In Photoshop you can use guidelines to setup your different areas you want to crop. Then use the guidelines to trim the image and save the different peices.

[JayCee]

Photshop has 2 slicing tools. One slices up the image into the pieces, the other edits the slices.

It is not trivial to do this, nor to get the slices to never show any space between them in all browsers.

Smokeyb is right, it may not load any faster after all your work.

Really there are only 2 advantages to slicing:
1.
It lets you make web pages with big curves or other things you can do in pictures and not in regular HTML.

2.
If some of the slices don't have much detail you can compress just those parts a lot more, so that the total images really IS smaller than it would have been without slices. Then, and only then, it will be faster.

HTH

[codnaway]

JayCee is right, Slicing will reduce the download time only if you can lower the quality on some of the slices. I have found this effective if there are some large areas of block color that can become very small gif files.
An alternative and possibly better solution is to lower the resolution of the entire image. In Photoshop select FILE > SAVE for WEB and play with the quality settings. You can link the image to a high res version if they really need to see the detail and then they only have to wait if it's important to them.

[mahlon]

are you using Photoshop? if you are you could do a save to web and cut the file size down a lot.

ahhh

In Photoshop select FILE > SAVE for WEB and play with the quality settings. You can link the image to a high res version if they really need to see the detail and then they only have to wait if it's important to them

exactly :)

[netguy]

I agree. It is amazing how many relatively small graphics are 3 to 4 times the file size as necessary, and drag down loading times.

As an example, a 740px x 100px header can often be a huge 75kb or more at 100 JPG quality. I always reduce JPGs by about 38% to 62 JPG quality (which is my default for most images). That same 75kb file can easily be reduced to 25kb or less - yet the quality of the image is still preserved nicely for web viewing.

Note: Photoshop uses lower compression values to indicate more compression and a smaller file size (100 = least compression, 1 = most) - Paint Shop Pro does the opposite. Also, a 50% quality reduction is often 4 times the savings in file size.

This works as well with GIFs, where you certainly don't need to use a full 256 colors for most images.

If there is an image that has gradation that requires a JPG on the upper portion of the image, and basic colors on the lower section - I usually break them out to have JPG on top, and GIF on the bottom ('assembled' with CSS or within a table), or convert the lower section to a TD background color.

Steve