Good question, it CAN be confusing because the "web development community" is so wishy-washy all the time, and new standards and coding languages crop up at an almost ridiculous pace. I'll try to make it as least confusing as possible ...

Web Slices

The "old fashioned" way was to use Web Slices. There are tons of software out there that can create slices, including Adobe Dreamweaver and even Adobe Photoshop, as a couple of examples. "Slices" are just that; you take a big image, that is relatively large in KB's or even MB's and "slice" it into smaller sections, somewhat like a jigsaw puzzle. Each section of the picture is technically it's own smaller image, and loads "faster" than the larger whole image. But in fact, this is all just an illusion.

Pros:

• On slower connections it gives the impression that the image / page is loading faster because the surfer can visibly see sections of a big image loading.

Cons:

• The illusion was mainly designed back in the dial-up modem days where people's attention spans were worsened by slow loading large images, and using slices (hopefully) helped keep surfers from clicking away before the page was even done loading.
• Since each slice is a unique request to the server, there's the overhead time it takes to do so, which can potentially dramatically SLOW the overall loading time of the overall image.
• Creating slices and using tables to assemble them can be somewhat of a slow, painstaking process, potentially slowing workflow.
• Tables themselves are somewhat outdated when designing a website. CSS is the new preferred standard, for a multitude of reasons.

CSS Sprites

A "Sprite" is basically taking a bunch of smaller images on your page, and doing the exact opposite of what slices were designed to do; create one larger image out of the smaller ones, and use CSS Positioning to make visible only the part of the image that you want the surfer to see. You can create a sprite using any image creation software, like Adobe Photoshop. For example, you could take a bunch of small "button" images and place them onto one bigger image with a transparent background, spacing each button's image so there's some transparent space between each one, and save it as one file named "buttons.png".

Pros:

• Easier to make than slices. Less hassle.
• Faster loading time because only a single web request to the server is made to grab the single image, instead of multiple requests for multiple images.
• Easier to use CSS Positioning to choose the area you want to be seen.
• Can do some pretty cool tricks with them, like mouse hover effects for example.
• Sometimes the overall filesize of the larger image is actually smaller in size than the combined total of all of the smaller images.
• There are some pretty slick tools on the web to make creating and using sprites easier, and sometimes almost even a pleasure.

Cons:

• Little bit of a learning curve at first to get used to how it works.
• When building a new site, it's often best to know you'll be using sprites and build from the ground up that way rather than building the site with all of your images first, and THEN creating sprites to replace them all, although technically you can replace them with sprites anytime you want.
• Sometimes it can take alot of fidgeting to place the Background-position: X & Y coordinates exactly where you want them, but fidgeting is the essence of CSS anyway, right?

So, as you can see, there are many more pro's to using Sprites, and I think once you get used to them you'll see why. Like any technology though, things are always subjective, meaning there can still be some circumstances where using slices instead of sprites will still be the better idea. That'll be up to you to decide. Unfortunately, such is the life of a coder and web developer to constantly be forced to know a hundred different language syntax's, and be fairly fluent in each one, and there's no signs of slowing down in that sense, so it'd be wise to play with both until you get a firm grasp of when to use which.

Btw, the way to add (and manipulate) a sprite is like this (using a button image, with a mouse-over effect as an example):

#create_button {
	background-image: url(images/create_quote.png);
	background-position: 0px 0px;
	height: 45px;
	margin: -50px 0 0 0;
	padding: 10px;
	width: 120px;
}
 
#create_button:hover {
	background-image: url(images/create_quote.png);
	background-position: 0px -57px;
}

The main things to focus on in the example is the background-image: line, which points to the image (sprite) that you want to use, and the background-position: line, which is where all of the magic happens. What's happening is it is taking this exact image below (which looks like 2 different image buttons but is actually a single image with 2 button images on it, and a transparent background separating the two.):