| Issue 5: | create foreground IMG sprites | |
| 9 people starred this issue and may be notified of changes. | Back to list |
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 9, 2009
Project Member
#1
stevesou...@gmail.com
Sep 10, 2009
A good example of the need for this is the icons at the bottom of http://wikipedia.org/
Sep 19, 2009
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
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
(No comment was entered for this change.)
Summary:
create foreground IMG sprites
Sep 22, 2009
(No comment was entered for this change.)
Labels:
-Priority-Medium Priority-High
Sep 30, 2009
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
I wrote an article on foreground IMG sprites here: http://www.artzstudio.com/2010/04/img-sprites/
Mar 16, 2011
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. |