Preserved Topic: Slicing...Dicing??? (Page 1 of 1)

Hi, guys. How are ya? This is from chilly summer place, New Zealand. On the hill, we got fresh snow on it. It is summer. Yesterday it was unbliebably hot. I cannot belive my eyes. Today fire is going in fire place.

Anyway, I've been reading a book, called "taking your talent to the web" by Zeldman. Pretty difficult to understand often thugh. It fascinates me very much.

I was reading the section about making images for web. I encountered these words, "slicing and dicing".
My understanding is to cut large images into small bits of pieces. Is that right?

And one more question is:

Do you cut pictures into small pieces when you put photo on the web?

Any comment is most appreciated.


Hiroki Kozai

quote:

---

I encountered these words, "slicing and dicing".
My understanding is to cut large images into small bits of pieces. Is that right?

And one more question is: Do you cut pictures into small pieces when you put photo on the web?

-- Hiroki

---

#1 - Yes. This is very helpful for interfaces, or anything you're doing a layout for. You create the entire layout in photoshop, slice it up, and then save the separate images. Then you create your interface (whether it's CSS or tables).

#2 - Depends. Do you mean an actual photo? I most certainly don't. However, if I'm creating an interface, the slice tool is my second best friend (the pen tool comes in first ).

Hi, Rap. Thanks for your reply. Yes, I mean actual photo.

Well, I am making my homepage. I want to use a lot of my photo to show my friends.

By the way, why don't you do that for actual photo?

My understanding is that slicing and dicing make things come up on the screen quicker rather than putting whole one piece of photo.

Is that right?

Hiroki Kozai

You wouldn't want to do that for an actual photo since it would load in pieces and look strange. It works for interface pieces because they are just that, pieces. Plus, you really should have separate files if you want to build things like roll overs and such.

It's a common misconception that slicing something into little bits makes it load faster. It's always been my contention that this isn't true, and recently I've started seeing articles addressing this issue, backing up my assertation. Basically here is what you're doing. You're making PARTS of the picture show up first while others are being downloaded... so you are seeing part of the picture sooner since the little piece loaded and it was a small file. Over all though you're spending a LONGER time downloading the entire page and getting to see the whole picture for two reasons.

1. Every time you save a file you have to save some "overhead" information with it. Basically to tell the computer what kind of file it is, how to interpret the byte order, etc. If you do this one time and that information takes up let's say 1k, you've added 1k to your download total. Let's say you slice that image into 20 pieces. Now you've added 20k to your download total. Let's say (I've seen this) you take a photo and slice it into 100 pieces. Now you've got an additional 100k to download of JUST file information, not even picture data. It adds up.

2. Most browsing software and operating systems limit the number of actual data connections that are available for downloading simultaneously. This number is higher on broadband or frame, but it's still there, you download faster because the connection itself is faster. Well.. what this means is that while you're waiting for parts 1 - 6 to download... the REST of the picture is just sitting there WAITING to be downloaded. This is something you see sometimes when you load a page with a lot of images into your web browser from your harddrive. It should be instantaneous, but you hit the render and download limits of the browser and some of the images take a second or two to load.

If you take this into account, it's better to have as few pieces as you can for contiguous images and ENOUGH pieces to make interfaces load effectively. The reason it's better to have more interface pieces is what I mentioned earlier. Rollovers. When you build a rollover you are actualling building script that replaces one image with another. In this case it's better to only have to replace a tiny image with another tiny image because the load process is taking place in the background or on demand.

Hope that helps..


It's only after we've lost everything...
That we're free to do anything...

Thanks, MB. I understand half of it. I am pretty bigner for PS.

Would you mind explain about following:

quote:

---

2. Most browsing software and operating systems limit the number of actual data connections that are available for downloading simultaneously. This number is higher on broadband or frame, but it's still there, you download faster because the connection itself is faster. Well.. what this means is that while you're waiting for parts 1 - 6 to download... the REST of the picture is just sitting there WAITING to be downloaded. This is something you see sometimes when you load a page with a lot of images into your web browser from your harddrive. It should be instantaneous, but you hit the render and download limits of the browser and some of the images take a second or two to load.

---

Does this mean ....what???




Hiroki Kozai

It means that your browser has hard-coded into it a set limit of images and other elements of your page it can load at one time. This is to speed page loading accros the internet. However it still functions even if you load a saved page from your hard drive. That why pages which (accordding ot hardware load times) should appear instantly apear in chunks one after the other.

The laser toting lizard hit it exactly Props' Skaarjj, sometimes I get a little... techno-babbly. heh.

Something else to consider is how progressive file types work and are effected by timeouts.

File type:

If you are using interlaced gif you will get a scanlines effect while it loads. It makes I believe 4 passes and each time it fills in some lines as it goes.

If you are using progressive jpeg, it will start out really blurry and get crisper and crisper.

Personally, I prefer gif's method, but there really isn't any way to choose. The concept is that you can see PART of the image as it loads before it ever gets fully loaded. You can turn it on and off and that's about it. The only consideration to bring up of importance here is if you have a larger file and it only loads halfway due to the connection timing out or hittnig stop or something... it will look really nasty... especially jpegs. And sometimes progressive images get stuck in your cache and don't like to go away (IE and NS are notorious for this, especially older versions).

Not much you can do but be aware of it and try to keep your files sizes reasonable.

Just FYI.


It's only after we've lost everything...
That we're free to do anything...