Question

What is a better solution in terms of size (page loading speed etc.):

I need to have many (up to a couple hundred) small, colored boxes (about 30×30 pixels or so) shown on a single website. Should I

• Make each box a div with a colored background?
• Make each box an image loaded onto the page?

There are only a few (less than 6 colors) and these are being displayed in a table.

Thanks

Answer 1

Colored background would be way better for many reasons:

1. the html tag will be smaller

   <div class='xyz'></div> compared to <img src='images/yourfile.jpg'>

2. background-color has no limit (well 17millions colors) while creating image will be long if you ever need more

Edit:
After reading back, if you are to put Colored Div into a table, would not it be easier to just put <td class='redCell'></td>?