I am trying to speed up page loading times on my blog with a lot of images on it. I am totally confused whether I should use Slices or Sprites though, and I'm not even sure how to do either one of them. Can anyone give me some help?
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 ...
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.
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".
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):
background-position: 0px 0px;
margin: -50px 0 0 0;
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.):