User Login

Help Community Login:

Newbie question: CSS Sprites or Web Slices?

1 reply [Last post]
EmStLiv's picture
EmStLiv
Welcome, Unverified New GeekDropper!I use Google ChromeWindows User
Relationship Status:
Taken
Joined: 10/06/2010
Posts: 1
Drops: 3

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?

I Averaged: 0 | 0 votes


Read More ...





Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
STaRDoGG's picture
From:
Olympus
STaRDoGG
Head Mucky MuckJoined the Dark SidePremium Member (Gold)I'm a Code Monkey!The Steel CurtainI use FirefoxI use Google ChromeI use Internet ExplorerI use SafariLinux UserMac UserWindows UserI donated to GeekDrop simply because I love it!Booga Booga BoogaI took a bite of the AppleFormer Phrozen Crew MemberI'm MagicMember of VileThe Dr. put the stem on the apple!The JokerSomeone thinks you're udderly delightful!
Relationship Status:
Single & Not Looking
Joined: 01/14/2009
Posts: 2557
Drops: 3008
Mood: Energetic
Re: Newbie question: CSS Sprites or Web Slices?

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? Smile

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.):

GeekDrop CSS Sprites Tutorial



And at first only showing the top solid orange button to the surfer, and when the mouse hovers over it, replaces it with the orange/yellow button (using the X (left / right), & Y (top / bottom) coordinates of the background-position line), instantly since the entire image has already been loaded. If you were to use 2 separate button images instead, there would be a flicker the first time it was hovered over because the second (hovered) button has to download first. With a sprite it looks like it's all part of some fancy animation or something.

Hope that helped, and didn't confuse you any worse than you probably already were, Laughing.



Shhh.. dont tell anyone, but we also have a private forum area with the really good stuff, wanna see?

Who's New

Tallen's picture
aaron420's picture
Viktor123's picture
paeltc's picture
dimpy123's picture
dfuller4747's picture
Bob the Observer's picture
Skalski5's picture
quattro2468's picture
davidclay123's picture
Sunny's picture
ZDooX's picture
Miamihot2007's picture
Fred McBen's picture
Sri's picture
facebook codes exploits tips tricks Phrozen Crew
All contents ©Copyright GeekDrop 2009-2017
TOS | Privacy Policy