Which loads faster?

[vozzek]

Hi everyone, quick question:

When I first started my website three months ago, I was a total rookie. I used a lot of <img> tags to create borders around things and to dress up different tables on my site.

Later on, I set classes in a CSS external file and used the background-image: command to fill those same tables with the same images.

So my question is: which is faster? I would think the CSS method. And how much faster is it? Fast enough that I should go back through my entire site and change those <img> tags to style sheet references?

Thanks for the help!

[astangeland]

The main time in loading an image is in connecting to the server and downloading the image. All methods are going to require that, so there is no real gain in speed.

The proper way to decide which way to do it, is to use img tags for images that are part of your content. (A picture that you are talking about in the text, or some other element that would be important to content of the page.) If the image is used only for decorating a page, you should use the background-image attribute.

[drhowarddrfine]

No, the css method is quicker. I don't have time to explain it all but it has to do with caching of the external css file compared to the html having to find out if the image is old or not. Each image has to be checked in html but in css the whole css file is checked for age. If it's OK then the images are not checked.

Actually, I need to correct that because it's not true for the initial load. In that case, it doesn't matter.

I promised myself I would stay away for two weeks. ;)

[garrow]

Also

If you remove IMG tags and replace them with a css rule that applies in multiple places, your html code will decrease in size by n X <img> tags and css increases by 1 css declaration.

So good for markup weight as well.