create foreground IMG sprites

[GoogleCodeExporter]

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.

Original issue reported on code.google.com by stevesou...@gmail.com on 1 Sep 2009 at 5:43

[GoogleCodeExporter]

great links:

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques
-tools-and-tutorials/

Original comment by stevesou...@gmail.com on 10 Sep 2009 at 12:37

[GoogleCodeExporter]

A good example of the need for this is the icons at the bottom of 
http://wikipedia.org/

Original comment by stevesou...@gmail.com on 10 Sep 2009 at 5:38

[GoogleCodeExporter]

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.

Original comment by jef...@gmail.com on 19 Sep 2009 at 9:09

[GoogleCodeExporter]

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.

Original comment by sergey.c...@gmail.com on 20 Sep 2009 at 1:57

[GoogleCodeExporter]

Original comment by stevesou...@gmail.com on 22 Sep 2009 at 7:35

• Changed title: create foreground IMG sprites

[GoogleCodeExporter]

Original comment by stevesou...@gmail.com on 22 Sep 2009 at 5:15

• Added labels: Priority-High
• Removed labels: Priority-Medium

[GoogleCodeExporter]

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.

Original comment by chuc...@gmail.com on 30 Sep 2009 at 4:33

[GoogleCodeExporter]

I wrote an article on foreground IMG sprites here:

http://www.artzstudio.com/2010/04/img-sprites/

Original comment by davea...@gmail.com on 21 Apr 2010 at 7:34

[GoogleCodeExporter]

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_techn
ique.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.

Original comment by mrclay....@gmail.com on 16 Mar 2011 at 11:23