Comments on: SpriteMe (part 2)

By: Jeff

Jeff — Tue, 22 Sep 2009 16:36:57 +0000

@SteveSouders, an example of a pseudo element is div::after { content:’meep’; background:blah; height:20px; width:20px; }

They are used all over the place in WebKit to style scrollbars, ranges, etc.

By: Premasagar Rose

Premasagar Rose — Mon, 21 Sep 2009 15:23:50 +0000

Hi Steve, Thanks for producing this. It should save quite a bit of time in converting a design to one that uses sprites. I recently went deep into the rules for sprite creation, on Dharmafly's widget for BBC World Service. For that, we created 3 sprites: PNG-8 for greyscale and transparent assets PNG-24 for full colour PNG-24 for full colour horizontal repeats (1px wide) (and an extra one for the different widget platform icons). It sounds like you've got most of it covered, although perhaps some other things to consider: The "best case" is actually more than four narrow/short images. If the sprite is more of a square-like grid, which would allow you to fit several images along the sides. If IE6 is to be supported, then PNG-8's must be used for any transparent assets (IE6, bless it, will still only support index-transparency, not alpha-transparency). So when you add the logic for favouring PNG-8's, you could start with those palettes that are used in images with transparency. In most cases, it's probably best to go for several PNG-8's. But, when there's a very wide colour palette, it may be better to go for a single PNG-24 instead. It would be difficult to automate, but when the edge of one asset is the same as the edge for another, it's actually possible to overlap them in the sprite. The BBC widget sprite uses that in a couple of places, where the bottom few pixels of one asset is identical the top few pixels of another, or where the left edge of one is the same as the right edge of another. Strip out absolutely all meta data from the resultant PNG's, as per smush.it and other optimisers. - Prem

By: Steve Souders

Steve Souders — Sat, 19 Sep 2009 23:19:52 +0000

@sunnybear: Cool to hear SpriteMe is already helping! @Jeff: Can you give an example? @s.Daniel: Staying within 255 colors is key. That's on the todo list as issue #17.

By: s.Daniel

s.Daniel — Sat, 19 Sep 2009 15:18:29 +0000

My previous experiance with sprites show that grouping gif/png images with a similar color palette to one sprite and leaving the rest of the images in another sprite can reduce file size even further. Have you made tests in this direction?

By: Jeff

Jeff — Sat, 19 Sep 2009 09:14:54 +0000

Would be cool to support pseudo elements

By: sunnybear

sunnybear — Sat, 19 Sep 2009 07:29:19 +0000

Steve, logic behind SpriteMe is already used (as a part of) in CSS Sprites module of Web Optimizer, which makes hundreds of websites ‘fast by default’ (good slogan, I will remember :)

Thank you for great ideas.