Placing images. Image tag or style with background setting? 1

[pkskytektip]

I've been placing an image that repeats in many different table cells using a style class background setting applied to the different cells with that class setting. But I wonder if it might be more efficient to the browser to load these images with an image tag even if they are all the same image.

Is one preferable to the other?

 

[OsakaWebbie]

If it's always the same image file, the browser should cache it (and therefore just fetch it from the server once) regardless of whether it is used as background-image or <img> tag.

If what you're asking is regarding how fast the browser renders the repeated images after it has the data, someone smarter will have to chime in, and that may also vary by browser engine.

 

[Vragabond]

I would keep them as background images. If I understand correctly, these are not content images, they are part of the style. Therefore they fit better as background. And, as background, they're most likely in a separate stylesheet, which is cached after the first load, while each individual html file (with img tags) would be loaded every time. Image would probably always be loaded from cache (unless you're using qualifiers to prevent that), but there's still a bit overhead with more bloated html.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[pkskytektip]

Thanks all who replied.

Actually, the background image is content. But it is a very limited kind of content. It's like a check mark indicating "yes" or "no" in a report. It's simplicity is what suggested to me it might be better displayed as background. The only limitation is that if you wanted to use the data from the table as an import to a spreadsheet of database, you would find that dispite the display, your import had no data in it. I have a solution for that in the works, but it would not require an image.

It sounds to me like using a style sheet is the best way to go.

 

[OsakaWebbie]

If you use a stylesheet and each cell has something like 'class="yes"' or 'class="no"', if you want to get the information out of it to use in a DB or something, you could use Javascript to iterate through the table and get the class of each cell, collecting the class values in an array, for example. If you're using AJAX to send the data to wherever you need it, then you'd just collect and include that data in what you send. Or if you're using an HMTL form as the transmission method, the Javascript function that collects the data from the table cells could be called when the form is submitted, and the array value could be put in an 'input type="hidden"'.

 

[pkskytektip]

Thanks, OsakaWebbie, but I am generating the data and I'm not concerned about exporting the data from the table. It's somebody else who might want to be able to do that. I don't want to expect them to have to figure out that it is a background image generating the data view.

 

[ChrisHunt]

If it's content, it should be in an <img> tag. If it's decorative it should (often) be a background.

It's an accessibility issue - if somebody can't see the {background} image, how do they know whether it's ticked or not? With that in mind, this...

<td><img src="/images/yes.gif" alt="Yes" /></td>

...is far superior to this...

<td class="yes">&nbsp;</td>

You should also get better results with the <img> when cutting and pasting the table for use elsewhere.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd