Mr said:
Are there hard and fast criteria as to whether an image is displayed using
CSS or HTML?
No, only vague rules.
"Content" should always go in the HTML. "Pure Decoration" wanders
towards the CSS route. Many things are intermediate though. "Layout"
can go in either. There are pros and cons both ways, and you have to
make a per-instance call. If you're repeating the same image on the
page a lot, then that's a suggestion it might work well through the CSS
method.
Hard rules:
CSS only has background images, not foreground (CSS 3 improves this).
So your CSS background image can't have z-index applied to it and it
doesn't co-operate well with a text alternative. OTOH It's very easy to
_overlay_ text over it, but then you could do that with z-index too.
Pure CSS :hover rollovers rely on the background image method.
You can easily tile the CSS backgrounds, which is useful for "elastic"
rules.
CSS stylesheets with huge numbers of image pulled in via an id selector
are generally an indication that you've gone too far. These can work,
but they're hard to manage as you have two "lists of data" that must
remain synchronised but are stored in separate places.
In general I'd suggest coding both and seeing which you prefer. Do this
a few times until you get a feel for how things work.
You can almost ignore non-CSS or non-image browsing. You can't ignore
it, but the issues apply equally well to both implementations.
Automatic "alt text" is better with <img>