Issue 5: create foreground IMG sprites
Project Member Reported by stevesou...@gmail.com, Sep 1, 2009
SpriteMe currently only handles CSS background images. It does a great job,
but there are far more normal IMG images (or "content" images) out there on
the web. We need to determine if it's feasible to try and sprite these IMG
images, as well. Technically, there are two approaches I'm aware of:

1) Replace the IMG SRC with a 1x1 transparent image and set the IMG's style
to use a background image. This works, but it means the images won't print.
I'm not sure how it works with accessibility. 

2) Another approach is to wrap the IMG in a DIV with style position:
relative; display: inline-block; overflow: hidden; width: <img-width>;
height: <img-height>; and set the IMG's style position: absolute; left:
<sprite-offset-x>; top: <sprite-offset-y>;. This works in most browsers. I
think there's a workaround for IE6. It doesn't work in IE5.5. And it's
quite a bit of added complexity.
Sep 10, 2009
Project Member #2 stevesou...@gmail.com
A good example of the need for this is the icons at the bottom of http://wikipedia.org/
Sep 19, 2009
#3 jef...@gmail.com
The inline-block div approach would be great.

Many people do not have to support older versions of IE (for instance, they are 
developing an Adobe Air app) and it would be awesome if spriteme was not hindered by 
old school IE.
Sep 19, 2009
#4 sergey.c...@gmail.com
I agree that this is a biggest helper as majority of people don't use background 
images as much without using a sprite and there are lots of savings to make.

I think there is an option to print background images, but even without it, not all 
pages need to be printed or provide separate page for printing (days when it's easy 
to generate both displayable and printable versions of a complex page are too far for 
many real-life sites). One the other note, many sites are not printable as is and 
developers just don't think about it (which is wrong too, no questions here).

So I think this option will be quite useful without printable version, all we need is 
to give reasonable warning, best practices on how to fix the issue and a way for 
people to test the result.
Sep 22, 2009
Project Member #5 stevesou...@gmail.com
(No comment was entered for this change.)
Summary: create foreground IMG sprites
Sep 22, 2009
Project Member #6 stevesou...@gmail.com
(No comment was entered for this change.)
Labels: -Priority-Medium Priority-High
Sep 30, 2009
#7 chuc...@gmail.com
First, it would be really hard to track content images pushed into sprites in a
database. Second, for the sake of semantics, the logos at the bottom of wikipedia
should be background images with text links (hidden or not) for accessibility making
the current project work as advertised.
Apr 21, 2010
#8 davea...@gmail.com
I wrote an article on foreground IMG sprites here:

http://www.artzstudio.com/2010/04/img-sprites/
Mar 16, 2011
#9 mrclay....@gmail.com
It looks like there's only one sprite-friendly construction that could "replace" an IMG in an accessible way: http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp 

It's a clever approach, but far from a straightforward conversion and no doubt inline replacements would be tricky to get right across browsers (think vertical-align values). A first step would be a proof of concept to convert a single IMG. I might take this on.