by Xavi Esteve
on June 1, 2010
(3 minute read)
Adobe Fireworks or Photoshop haven’t got any CSS Sprite Map tool or wizard but it is very easy to create sprite maps. I recommend you to use Fireworks instead of Photoshop for this since the interface is much cleaner and organized and the exported images have smaller size but excellent results. You should also use Smush.it when you finish with your image to compress it even more.
What is a CSS Sprite?
A CSS Sprite is one big image that has many small images in it. We then use CSS to get the little images, all from the big image. Everyone uses them nowadays and once you get the trick of it it is really beneficial for a website. So, what are the advantages of using Sprites? The user will only have to make one server request to get all the icons and logos, etc. Instead of asking for each image separately. Here are some examples: XaviEsteve, Google, LinkedIn, Facebook…
How to create a CSS Sprite Map with Adobe Fireworks
The image map
Place every little image in a large canvas, trying to order them by groups. Leave as few space as possible between images but do not overlap them, leave 1px spacing between them.
CSS properties for the sprite
The main three CSS properties needed for a CSS Sprite are:
background-position: -Xpx -Ypx; height: 16px; width: 16px;
Which can be easily found in Fireworks. Click the image or layer you want to know the CSS values and look at the bottom left of Fireworks:
Remember that Background Position is always negative. Nothing to worry about, just add a hyphen (-) in the CSS style sheet.
If we are using <div> or <span> tags and want to show them as inline elements we should use:
display: inline-block;
IE6 doesn’t support inline-block so use this in the IE6 style sheet:
display: block; float: left;
We can also use <h1> or any other HTML tags we want. If we need to hide the text inside that tag we can put the text in a <span> and hide it:
<h1><span style="display:none;">Text to be hidden</span></h1>
Do not use inline styling, I’ve added it above just to show you the example in one line.
Group properties to optimize the CSS code
To get the best out of CSS sprite maps it is recommended to group the properties and make the code as small as possible.
There are two main ways to save code while creating a sprite map. The first one is to add all the selectors to the same URL:
The second one is to group all the images by its same height/width or any other shared properties like floatings:
Once you have the image and the CSS you just need to call it in the HTML page like this:
<span class="bigico hp"></span>
This will “magically” convert the <span> into an image.
CSS Sprite Planning for a website
Before starting with creating the CSS Sprite in Fireworks it is good to plan how many icons/images you are going to use and which type of images are you going to use: if they will have transparent background, use a lot of colours or gradients…
How many files will you need?
CSS Sprite map based on its use
Think which graphics are used always and which are just used for specific sections and split them. For example, create one for the home and common content like the header, sidebar, etc. and another one for specific sections that may not be accessed as much. The idea of CSS Sprites is to minimize server requests so packing images by context is the way to go.
Do you need transparency?
Are these images/icons going to be placed always on the same background? If they are going to have different backgrounds save the sprite as a PNG with alpha transparency (or a transparent GIF to support IE6 users). If you don’t need transparency then go with JPG or GIF.
File size of the image
The CSS Sprite map shouldn’t weight more than 300KB. If it does, split it on different ones.
The screenshots of Fireworks were taken using Adobe CS3, the sprite map belongs to PC-Site.co.uk
Top photo by Gadl
No comments yet