Using sprites with IMG tag?
Solution 1
About semantical correctness:
When an image has semantical meaning, so it is considered to be content, use an IMG tag, without sprites, and a correctly set up ALT.
When an image is just decoration, like the background of a box, background of a button, background of a menu option, etc., it has no semantical meaning, so you can just use it as a background of a SPAN, DIV, etc. from CSS. You can use sprites in this case.
Solution 2
Using sprites doesn't necessarily mean you need to define them in css backgrounds. You can also use IMG tag sprites, to do so you need basically trim your image. There are two good articles explaining that technique:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
Both CSS and IMG methods sure have their own benefits, so you need to figure out which one suits you better.
Solution 3
I use a 1x1 transparent gif (so called spacer) for the src. then set the background image for that img tag with the corresponding bg position. this way you're utilizing the speed of sprites and keeping the semantic of your code (you can still use the alt attribute)
Solution 4
I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct
Actually there is nothing wrong about using CSS to set the background of a span or div. It would actually be incorrect syntactically to omit the src from an image, as that is the whole point of the tag. There is nothing in the standards saying you have to put text inside a span. Syntactically speaking, modifying the background on an element would be the most "correct" way to do it.
Here is the ref on img tags over at W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2
And a little extra reading: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
Solution 5
You can either use CSS backgrounds, or HTML Canvas elements to dynamically draw upon. With canvas's you have the ability to easily subset images and perform blend mode effects.
Ryan Peters
I absolutely love what I do and it is my passion. At my current position, I worked primarily using Microsoft technologies to create and maintain client-facing and internal web applications used throughout the company. All applications leveraged ASP.NET/C#, the MVC framework, WCF/ASMX/REST web services in a SOA, custom DAL wrappers, with SQL server as a storage tier. By night I'm a father of two amazing (also hectic). I also enjoy playing music and PC gaming.
Updated on May 12, 2020Comments
-
Ryan Peters about 4 years
I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct.
Basically, I'd like to omit the SRC for an IMG tag and use just sprites, but am concerned about the HTML not being technically valid because of it. Thanks.
-
dialex almost 13 yearsIs it possible to use sprites inside img tags? That way we could have the speed of sprites and the
alt
attribute. I have a lot of small buttons, so they are not decorative (must use img?) but waste too much time being individually loaded (must use sprite?). What a dilemma! -
kapa almost 13 years@DiAlex If you have small buttons, use the
button
orinput
tag with a background image. -
kapa almost 13 years@DiAlex Refer to the HTML5 spec, you may find some interesting tags to use.
-
Tio Felix over 12 yearsI know this is an old question, but i just really want to thank you for these two articles, both are great, and really gave me what i was looking for. Thank you and i hope this question doesn't bump because of me.
-
Dario Fumagalli over 9 yearsIt's odd I haven't seen this kind of solution in other blogs. I tested it and it works!
-
Paul over 9 yearsI came up with the solution myself. As far as I know its the only solution working with <a> and <img> tags. I needed that for SEO. It also works with bigger sprites containing several icons on the same sprite, just positioning it with css.
-
Dario Fumagalli over 9 yearsWell, there is also this other, highly cross browser solution that lets achieve good results and keep image semantics, even if it might take longer to setup.
-
Richard about 9 yearsI'm just converting my own site from <img> to <div> image sprites for this reason - not having to use a transparent.png image for the image src mean fewer HTTP requests. Who says I'm pedantic...?
-
Davide Andrea about 6 yearsI do it that way as well, but that's an extra image that causes an HTML request; and the number of HTML requests is exactly what we're trying to minimize by using sprites. That's why I don't want to have a "spacer" in the image.
-
Shanimal almost 5 yearsboth links seem to be dead
-
Bret almost 5 yearsHere are two archived snapshots of those: * web.archive.org/web/20170212063839/http://www.cssmojo.com/… * web.archive.org/web/20130726060548/http://www.artzstudio.com/…
-
wchargin almost 5 years@DavideAndrea: To avoid HTTP requests, you can use a data URI for the image; see stackoverflow.com/a/13139830.