While making a webpage I’ve noticed a huge decrease in performance(client side) when I’ve added more rows to a table. Each row in my table consists of the same 4-5 different 32×32 icons (links to actions) and about 100 characters. When there were 10 rows, the webpage run fluently – scrolling and jQuery animations were smooth. Now that my table has 100+ rows (pagination is not an option), the animations are really slow and rough.
Is there a way to optimize not the images themselves, but the code, to raise performance?
Right now I have images in tags. Will it make any difference if I will change them to with background-image? Will the browser be less loaded?
If images are the problem, it is likely because the client is trying to re-download the images for each row, which is very inefficient even though the images are small. You can test if this is true with a tool such as Fiddler by checking if you get a whole bunch of the same requests every time you reload the page.
If this is the problem, look into CSS sprites. With this method, you can deliver 1 image to the client, and this one image will be used to render all of your icons on all your rows.