I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz)
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
Pro's:
- image alt text is best-practice for accessibility/seo
- no extra HTML markup, and the css is pretty minimal too
- gets around the css on/images off issue where "text-indent" techniques hide text from low bandwidth users
The biggest disadvantage that I can think of is the css off/images on situation, because you'll only send a transparent gif.
I'd like to know, who uses images without stylesheets? some kind of mobile phone or something?
I'm making some sites for clients in regional Australia (hundreds of km from the nearest city), where many users will be suffering from dial-up connections, and often outdated browsers too, so the "images off" issue is an important consideration.
are there any other side effects with this technique that I haven't considered?
edit: Just wanted to add the extra info that I'd use this over a normal image tag because
A. I can use css-sprites
B. I can generate css with php that alternates background-image sources between different sub-domains using a single array
C. I like the way that resizing the image now doesn't stretch or distort it so it behaves like everything else on the page.