graphics - to slice or not

  • jpg
  • Newbie
  • Newbie
  • jpg
  • Posts: 6
  • Loc: Florida Keys

Post 3+ Months Ago

Is it better to slice large graphics in to smaller ones or compress the image as much as possible and leave it as one image?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Borrow -A- Geek
  • Professor
  • Professor
  • User avatar
  • Posts: 763
  • Loc: Dallas/Ft Worth, Texas

Post 3+ Months Ago

thats a good question. i have always wondered the same... i guess it is better to do it in parts so that the image can load the different pieces in seperate threads, thus faster loading.. but im not sure.. that would be a good one to ask unflux.
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

Sometimes it's better to keep it as one large image and use an imagemap, because basically it only contains one header, footer, etc.

Breaking it up into, say 20, smaller images will create a total that is probably larger than the single image.

But, breaking it up into smaller images will often speed up the process of downloading them. Usually, enough images will come down that the browser can see where they want to go, and click it (even if not all of the images have come down yet).

So, they click it, go to the next page, half of the images have already downloaded so they just come up from the cache, and it carries on downloading what it doesn't already have.

So, it depends on entirely on the situation, but as a general rule, splitting it up into smaller images makes for a faster browsing experience (even if it ultimately takes longer to download in total).
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

For me, I agree with the above. Well explained. It just depends on how large it is and what the end file size result is going to be.
  • Alan Lastufka
  • Proficient
  • Proficient
  • User avatar
  • Posts: 318
  • Loc: ChicagoLand, IL, USA

Post 3+ Months Ago

Plus, if you are slicing in photoshop, you can save the slices with different # of colors as .gifs, so if one part of your pic is more complicated, designate a higher color count to it, for simpler parts, lower numbers, this will help speed up the d/l time.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

While I can see how that makes sense in theory. If part of your image has less colors, then it'll have less colors. If you were to slice and change the color ammount, you'd have images with varied qualities, and it would look bad. I think sticking with one image in the case of a single image is best, and slicing may work for website layouts and such, but even DIV tags can get rid of that.
  • Alan Lastufka
  • Proficient
  • Proficient
  • User avatar
  • Posts: 318
  • Loc: ChicagoLand, IL, USA

Post 3+ Months Ago

As an example check out the header of this forum...

If you were to slice it in half, with the left part being in one slice and the right half being in the second slice, you could set the left to 32-colors to get the red and the grayscale shadding, while you could set the whole right side to 2-colors for the black/grey...

This way the right side would load in no time because of the low color count and would not effect the image in anyway...
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

moved to Drawing, Digital Art, and Photography Forum
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

I think what Alan's trying to say and b_heyer's interpretation of it are getting a lil mixed up...

It's not just low colour count that can reduce filesize. It's complexity of the image.

You wouldn't have sections that are necessarily higher or lower quality than other parts of the whole, but some images use much less filespace when converted to gif than they would as a jpg.

Complex images (like photographs, or something with lots of detail), will often be smaller as a jpg than as a gif (even if the gif does only contain 256 colours).

Simple images (such as a single colour background with blocks of single-tone colours, like squares, circles, etc.) are generally going to be smaller as gif rather than jpg, and be much better quality (no obvious dithering around edges from jpg compression).

So, if you have a single image that forms a whole website layout, you can chop it up into various different jpg & gif files, without them all looking odd next to each other, and you can actually get away with not using any images at all for some areas. If you end up cutting up a gif that's just a single colour, and it's going in a table cell, you could just

Code: [ Select ]
<td bgcolor="#000000" width="50" height="10">

or whatever colour & size, and not have to use an image at all in that particular cell.

How it's chopped up, what format it's saved in, and whether you actually need to save an image at all, all depends on each individual layout.

The header of this forum is a pretty good example. I didn't view the source to check, but you could have a tiled jpg as the background image to a table cell, so that it fits any screen width, then have a transparent gif, or a jpg on top of it. It doesn't look out of place, or show any difference in quality.

This is how I did the header on my site too. Different images are in different formats to keep the size as small as possible, and some of the cells have backgrounds (some are just bgcolor, some are images) to make it stretch & shrink to any width screen res.

You have to experiment to see which combination of jpg/gif/nothing works best in each individual case, and you can always shave an extra byte or two off the bandwidth needs - everybody has their own suggestions for optimization - and it can take a lil practise to figure out what'll work best.
  • Alan Lastufka
  • Proficient
  • Proficient
  • User avatar
  • Posts: 318
  • Loc: ChicagoLand, IL, USA

Post 3+ Months Ago

Axe wrote:
you can chop it up into various different jpg & gif files, without them all looking odd next to each other, and you can actually get away with not using any images at all for some areas. If you end up cutting up a gif that's just a single colour, and it's going in a table cell, you could just...


That's exactly what I did with the frame for my new site (http://www.fallofautumn.com), and exactly what I was trying to say as far as saving something with fewer colors if any are needed at all...
  • jpg
  • Newbie
  • Newbie
  • jpg
  • Posts: 6
  • Loc: Florida Keys

Post 3+ Months Ago

Thanks for all the replies. The site we were concerned about is http://www.pondboss.com. My partner Elizabeth has taken over most of the design work and has become a little obsessed with the slicing tool in Photoshop.

We had a discussion the other day about how she is slicing almost every image she creates. She is convinced that sliced images load faster. I asked what she was basing this on, and she had no answer, so I thought I would seek some other opinions.

The partner wife thing can be interesting at times :).

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 15 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.