Lots of Images

need some ideas and info...

[Emperor]

Hi guys,

I have a long list of items and I'd like each item to have a color coded image just before it.

The problem is that the list is very long, about 500 items. So for every item I have this:

<img src="grfx/icon_name.gif" alt="" />

...which seems like a lot of source (and thus loading time) for what's essentially the same code (I only have four different color codes.) Any ideas?

Also, I always thought the browser can load/display images faster if it knows the dimensions, so it would be better for me to add this:

div.mylist img {
width: 12px;
height: 12px;
}

...but is that exactly the same as this:

<img src="..." width="12" height="12" />

...that way I can save some bytes by not having the width and height in the tag, so is it the same?

Thanks,
Emperor

[Emperor]

I was just thinking,

How about a <div> with a background? Then the <div> would have to be empty, is that ok (I still am unsure what happens with empty elements, they seem fine on IE6)?

<img src="a.gif" alt="" /> = 26 chars
<div class="a" /> = 17 chars

500 items times 9 chars saved = 4,500 chars saved so if a char is 2 bytes I save about 9k, not too shabby.

Is it even worth it?

Any other ideas?

[encyclo]

Why not fix the four images as backgrounds to a div or a list? That way, you only need to put the class name on each list item.

It will look something like:

CSS:

li.one {
background:url(/path/to/1.jpg) no-repeat top left;
}

li.two {
background:url(/path/to/2.jpg) no-repeat top left;
}

li.three {
background:url(/path/to/3.jpg) no-repeat top left;
}

li.four {
background:url(/path/to/4.jpg) no-repeat top left;
}

HTML:

<ul>
<li class="one">text</li>
<li class="two">text</li>
<li class="three">text</li>
<li class="four">text</li>
</ul>

The above is completely untested, but it will give you the basic idea.

[createErrorMsg]

I'll add this onto encyclos (great) idea: put a padding-left equal to the width of the image (plus a pixel or two for breathing room) on each of the above class rule declarations. Otherwise the text will overlap the image.