I think any image that's good enough to be shown deserves a frame. And my web site is devoted to photography, so we're talking a lot of images.

At first I built the frame into each jpeg, but this brings up all kinds of problems - changing the background for the site is a major undertaking, it's extra work for every image, etc. So I made some transparent png frames, and in the img tag the src would be the png file, and the background image would be the photo I want to display:



Now this brings up its own set of issues. It's really not very "semantic." And Google Images sends me more traffic than MSN and Yahoo combined, but I'm guessing they probably won't understand the html. How would they?

So, I've got a lot of work ahead of me. But I'm not sure what would be a better structure. I'd really like to work with the pngs I've already got, but I'd also like to keep the markup as simple as possible. And the only thing I can see is using absolute positioning, putting the jpeg in an img tag, and then using a span that's positioned in just the right spot in front of the jpeg. But that's not very semantic, either, and I wonder if there's a better way?

I'm thinking:

<div style='position:relative'>
<img src="i.jpg" />
<span style='position:absolute; top:0; left:0; width=x; height=y; background-image:z.png;" />
</div>

( For the record, I'm not that concerned with the thumbnails, but I use the same technique for the full sized images - http://forrestcroce.com/Photos/Glaci...Waterfall.html )

If you want to keep the markup simple.. then leaving the frame in the image itself is the simplest method.

I could use an image inside a table cell with a background image... Just kidding.

I'd like to keep the html as clean as possible, and I've read some CSS frames tutorials that require five divs per image ( one for the image, four for the corners ). So I guess really I'm trying to strike some kind of balance between the two extremes.

Keeping the frames inside the images is really tempting, and has some strong points, but I'd have to do it as a png file ( right now I have a gradient background, although I'm thinking of changing it to something more simple looking ), and those are huge for photographs. The full sized images ( 800x533 px ) come out to 600 to 900 K, so this would be abusing my visitors and my server.

If I used the code above, what would the drawbacks be? I know absolute positioning and z-index are generally bad ways to code, but there aren't that many ways to lay one image over another, and tables have way too many cons.

Absolute positioning and z-index have their place, it's not 'bad' . What's 'bad' is using position absolute for EVERYTHING, which newbies tend to do a lot.

Maybe you should consider something like Lightbox:
http://www.huddletogether.com/projects/lightbox2/