Shared publicly  - 
 
CSS Sprites - a different (and easier) approach?)

Using an image map and loading up non-content images from a single source is not exactly a new process.
It's what most of the big-boy/girl sites do (Amazon, Yahoo, google etc.)

The idea is that you only make 1 image request ... saves a ton of http requests (so much faster) and generally saves bandwidth (1 file with 10 images is roughly the size of 8 of those images, not 10).

Yet, it's not really taken off.
One of hte reasons is that it's a sod to implement!
All that math, and planning ... and the sometimes backwards layout you need to do.

Yet ... those nice people at Smashing Magazine have revisited the CSS Sprites,
and provided us with a nice methodical approach to make our lives that bit easier.

For those of you that do design work... have a peek.

#webdesign #css #imagesprites #csssprites
9
1
Edwin Jonk's profile photoAJ Kohn's profile photoLyndon NA's profile photo
12 comments
AJ Kohn
 
Sprites are great but as you say +Lyndon NA, they're not the easiest thing to pull off.
 
I struggled at first ... but got it down pat a while ago ... even when designing from the ground up.

That said - I've found on the odd occassion, it's simpler to make a few sprite maps to save on the headaches.

I've also recently found that I can make 100% fluid (non-limited H/W) alpha-transparent container (rounded corners, shadows etc.) with jsut 2 images (rather than 1 large image and having a max size).
Of course - I finally managed this as the CSS3 stuff kicks in and gains momentum.
:sigh:

What we really need is a real image map command in CSS.
One where we can have just 1 image ... and the browser can be provided constraints, and treat parts of the image as separate pieces.
Would be much easier, and make things soooooo much faster!
AJ Kohn
 
BTW - have you poked at Compass?
 
I assume not ... as I have no idea what it is :D
Framwork?
Approach?
 
Hmmm - I'd have to dig through all of that before I could try and use it.
I've been using certain CSS styling for years now ... and my own layouts etc.
Though I could do with tidying them up a little ... they are fairly tight... not sure what Compass would give me over the top (wondering if it would simply be a loat of redundant stuff for a little gain?)
AJ Kohn
 
I know the architect. Smart guy. But yeah, may not be for everyone.
 
The idea is the way they approach it in the article makes it easier (less of a headache).
No one mentioned it being correct :D
 
No one mentioned it being correct

Ohhh... I am too negative, my bad... sorry... But I just wanted to say that one should test sprites (the G bug appears to be cross OS and only on Chrome ;-)). Besides that when using sprites it might not be that easy to change the image. So it might not be that easy but for sure sprites do have advantages.
 
The trick with sprites is ... wait for it...
WhiteSpace
:D

No - seriously, ensure that you permit plenty of room around each "image" so that at a later date you can use a slightly larger one etc.
Add a comment...