CODEWITHSUNDEEP
htmlcssimage
Sergey Telshevsky
Sergey Telshevsky

Reputation: 12197

Optimizing images

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 32x32 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?

Upvotes: 1

Views: 143

Answers (1)

Briguy37
Briguy37

Reputation: 8402

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.

Upvotes: 1

Related Questions